个人中心
gpt4 book ai didi

javascript - 下一个 上一个 预览 slider 导航

转载 作者：行者123 更新时间：2023-11-28 05:54:50 25 4
gpt4 key购买 nike

我有扁平化设计，需要编写 HTML 和 jquery 代码。当悬停在下一个箭头上以显示即将到来的幻灯片或上一个箭头以显示上一张幻灯片时，我需要对导航箭头上的 slider 进行编码，我该如何在 HTML 和 java 脚本或 jquery 方面进行此操作以获取更多信息，请查找图像关于设计我有。

这是我尝试过的。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>


        .prev, .next{
            background-color: #000000;
            padding: 12px;
            width: 60px;
            float: left;
            cursor: pointer;
        }
        .prev-content{
            background-color: beige;
            padding-left: 8px;
            width: 200px;
            float: left;
            height: 92px;
            display: none;
            font-family: sans-serif;
        }

        .next-content{
            background-color: beige;
            padding-left: 8px;
            width: 200px;
            float: left;
            height: 92px;
            margin-top: -37px;
/*            display: none;*/
            font-family: sans-serif;
        }

        .con{
            position: absolute;
            left: 0px;
            top:40%;
        }

        .con-next, .next-content{
            position: absolute;
            right: 0px;
            top:40%;
        }
        .prev-content img, .next-content img{
            float: left;
            margin-right: 7px;
        }


    </style>

    <title>Siyandza ELP</title>
</head>

<body>
    <div class="con">
        <div class="prev">
            <img src="images/left-arrow.png" />
        </div>
        <div class="prev-content">
            <p><img src="images/image.png" width="40"/> Previous<br />Learning Object Title<br />PDF</p>
        </div>        
    </div><!-- end prev prev -->

    <!-- SCRIPTS **********************-->
    <script src="js/jquery-1.12.4.min.js" type="text/javascript"></script>

    <script type="application/javascript">

        $(".prev").hover(function(){
            $('.prev-content').show();
            },function(){
                $('.prev-content').hide();
            });


    </script>
<!--    <script src="js/sandile.js" type="text/javascript"></script>-->
</body>

</html>

谢谢

最佳答案

这是使用纯 JavaScript 的基本内容

    function setScr (){
      imageLeft.setAttribute("src",imageArray[i-1]);
      sliderWrapper.style.backgroundImage = 'url(' + imageArray[i] + ')';
      imageRight.setAttribute("src",imageArray[i+1]);
    }

    var i=0,
        main = document.querySelector("main"),
        imageArray =["http://placekitten.com/500/200","http://placekitten.com/501/200","http://placekitten.com/500/201","http://placekitten.com/499/200","http://placekitten.com/400/600"],
        sliderWrapper= document.createElement("figure"),
        sliderArrowLeft = document.createElement("div"),
        sliderArrowRight = document.createElement("div"),
        imageArrayLength = imageArray.length,
        imageLeft = document.createElement("img"),
        imageRight= document.createElement("img"),
        figureLeft = document.createElement("figure"),
        figureRight= document.createElement("figure");

    sliderWrapper.classList.add("slider-wrapper");
    sliderArrowLeft.classList.add("sliderArrowLeft","arrow");
    sliderArrowRight.classList.add("sliderArrowRight","arrow");

    imageLeft.setAttribute("src","undefined");
    imageRight.setAttribute("src",imageArray[i+1]);

    figureLeft.appendChild(imageLeft);
    figureRight.appendChild(imageRight);

    sliderArrowLeft.appendChild(figureLeft);
    sliderArrowRight.appendChild(figureRight);

    sliderWrapper.appendChild(sliderArrowLeft);
    sliderWrapper.appendChild(sliderArrowRight);

    main.appendChild(sliderWrapper);
    sliderWrapper.style.backgroundImage = 'url(' + imageArray[i] + ')';

    document.querySelectorAll(".arrow").forEach(function(e){

    e.addEventListener("click", function(){
        console.log(imageArray[i-1],i,imageArray[i+1]);
        if(this.classList.contains("sliderArrowLeft") && i > 0){
            i--;setScr ()
        }if(this.classList.contains("sliderArrowRight") && i < imageArrayLength -1){
            i++;setScr ()
        }else{return false}
      
    }, false);

    });
*{box-sizing:border-box;padding: 0; margin: 0;}
.slider-wrapper{
  width: 650px;
  height: 320px;
  margin: 20px auto;
  position: relative;
  background: #ebebeb;
  background-size:cover;
  border: 2px solid brown
}

.arrow img[src="undefined"]{
  opacity:0
}
.sliderArrowRight{
  right: 0;
}
.sliderArrowLeft, .sliderArrowRight{
  position: absolute;
  width: 80px;
  height: 100px;
  top: 50%;
  margin-top: -50px;
  background: black;
  background-size:cover;
  cursor:pointer;
  transition: all .3s ease;
  overflow:hidden
}
.sliderArrowLeft figure, .sliderArrowRight figure, .sliderArrowLeft:hover, .sliderArrowRight:hover{
  width: 250px;
}
.sliderArrowLeft figure, .sliderArrowRight figure{
  position: relative;
  top:0;
  display: block;
  height: 100%
}
.sliderArrowLeft figure{
  float: left
}
.sliderArrowRight figure{
  float: right
}
.sliderArrowLeft img, .sliderArrowRight img{
  position: relative;
  width: 120px;
  height: 80px; 
}
.sliderArrowLeft img{
    margin: 10px 0 0 116px;
}
.sliderArrowRight img{
    margin: 10px 0 0 12px;
  }
<main></main>

现在你可以玩 overflow:hidden

关于javascript - 下一个 上一个 预览 slider 导航，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37790426/

25 4 0
文章推荐： Javascript:翻译动画错误
文章推荐： swift - 在 Swift 中使用分区将一些预定义的元素移动到数组的末尾
文章推荐： swift - 截断 NSTextField 的最后可见行
文章推荐： javascript - 在 Angular-bootstrap 弹出窗口中使用指令/隔离范围作为 HTML
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com