Question

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

由于

Answer 1

你真的不必使用任何javascript来实现这个目标。只需在你的css标签之间添加它。

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

您的箭头和内容都保留在同一个容器中。因此，无论何时将鼠标悬停在该容器上，都会显示.prev-content。

使用CSS进行这类交互可以极大地提高网站的效果。您使用的脚本越多，您的网站就越重。

Answer 2

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

了

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

2 个答案: