下一个上一个预览滑块导航答案

【问题标题】：next previous preview slider navigation下一个上一个预览滑块导航
【发布时间】：2016-06-13 12:55:43
【问题描述】：

我有平面设计，我需要编写 HTML 和 jquery 代码。当悬停在下一个箭头上以显示即将到来的幻灯片或上一个箭头以显示上一张幻灯片时，我需要为导航箭头上的滑块编写代码我如何在 HTML 和 java-script 或 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 jquery html css slider

【解决方案1】：

这里是使用纯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;
  }

&lt;main&gt;&lt;/main&gt;

现在你可以和overflow:hidden一起玩了

【讨论】：

感谢它的工作，但效果不佳，因为它给了我 index.html:117 Uncaught TypeError: document.querySelectorAll(...).forEach is not a function

【解决方案2】：

您实际上不必使用任何 javascript 来实现这一点。只需在你的 css 标签之间添加这个。

.con:hover .prev-content{ display:block}

您的箭头和内容都保留在同一个容器中。这样，每当您将鼠标悬停在该容器上时，都会显示 .prev-content。

将 CSS 用于此类交互可以极大地提高您网站的性能。您使用的脚本越多，您的网站就会越重。

【讨论】：