jQuery实现简易轮播图的效果
程序员文章站
2022-07-02 20:47:02
（图片素材取自于小米官网） 刚开始接触jQuery的学习，个人觉得如果为了实现多数的动态效果，jQuery的确很简易方便。 下面简易的轮播图效果，还请前辈多多指教~ （努力学习react vue angular中，加油~~~） ......
（图片素材取自于小米官网）
刚开始接触jQuery的学习，个人觉得如果为了实现多数的动态效果，jQuery的确很简易方便。
下面简易的轮播图效果，还请前辈多多指教~
（努力学习react vue angular中，加油~~~）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body,p,ul{margin:0px;padding:0px;}
#box{width:1226px;height:460px;margin:0 auto;position:relative;}
img{position:absolute;width:100%;display:none;}
#cir{position:absolute;height:20px;width:150px;bottom:0;left:50%;transform:translateX(-50%);}
span{height:20px;width:20px;border-radius:10px;background:blue;display:inline-block;box-sizing:border-box;}
#left{height:69px;width:41px;position:absolute;top:50%;transform:translateY(-50%);background:url("img/icon-slides.png") no-repeat -83px 0px;}
#right{height:69px;width:41px;position:absolute;right:0;top:50%;transform:translateY(-50%);background:url("img/icon-slides.png") no-repeat -125px 0px;}
#left:hover{background:url("img/icon-slides.png") no-repeat 0px 0px;}
#right:hover{background:url("img/icon-slides.png") no-repeat -42px 0px;}
.span_on{background:red;border:1px solid yellow;}
.img_on{display:block;}
</style>
<script src="jquery-1.11.3.js"></script>
<script>
$(function(){
var index=0;
var timer=null;
function play(){
index++;
if(index>5){
index=0;
}
$("span").eq(index).prop("class","span_on").siblings().prop("class","");
$("img").eq(index).prop("class","img_on").siblings().prop("class","");
}
timer=setInterval(play,1000);
$("#box").mouseover(function(){
clearInterval(timer);
})
$("#box").mouseout(function(){
timer=setInterval(play,1000);
})
$("#left").click(function(){
index--;
if(index<0){
index=5;
}
$("span").eq(index).prop("class","span_on").siblings().prop("class","");
$("img").eq(index).prop("class","img_on").siblings().prop("class","");
})
$("#right").click(function(){
play();
})
$("span").mouseover(function(){
$(this).prop("class","span_on").siblings().prop("class","");
index=$(this).index();
})
})
</script>
</head>
<body>
<div>
<div id="box">
<img class="img_on" src="img/11.jpg" alt="">
<img src="img/22.jpg" alt="">
<img src="img/33.jpg" alt="">
<img src="img/44.jpg" alt="">
<img src="img/55.jpg" alt="">
<img src="img/66.jpg" alt="">
<div id="cir">
<span class="span_on"></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div id="left">
</div>
<div id="right">
</div>
</div>
</div>
</body>
</html>