![](/img/trans.png)
[英]adding navigation bullets in my existing slider with next / previous button
[英]next previous preview slider navigation
我有平面设计,我希望编写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>
谢谢
你真的不必使用任何JavaScript来实现这个目标。 只需在你的css标签之间添加它。
.con:hover .prev-content{ display:block}
箭头和内容都保留在同一个容器中。 因此,无论何时将鼠标悬停在该容器上,都会显示.prev-content。
使用CSS进行这类交互可以极大地提高网站的性能。 您使用的脚本越多,您的网站就越重。
这里是使用纯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>
现在你可以玩溢出:隐藏
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.