最简单的图片轮播

最新推荐文章于 2022-08-05 16:22:15 发布

姑娘这鸡汤有毒

最新推荐文章于 2022-08-05 16:22:15 发布

阅读量479

点赞数 1

文章标签：简单的图片轮播

本文链接：https://blog.csdn.net/u013321789/article/details/54380493

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<style>
.contain{
width:830px;
height:300px;
border:1px solid #008B8B;
position:relative;
}
.content{
width:720px;
height:300px;
border:1px solid #cccccc;
float:left;

}
.one{
width:100%;
height:100%;
background-image: url("imgs/case/case1.png");
display:block;
}
.two{
width:100%;
height:100%;
background-image: url("imgs/case/case2.png");
display:none;
}
.three{
width:100%;
height:100%;
background-image: url("imgs/case/case3.png");
display:none;
}
.left_btn{
width:50px;
height:300px;
border:1px solid #66A8CC;
float:left;

}
.right_btn{
width:50px;
height:300px;
border:1px solid #66A8CC;
float:left;
}

</style>
</head>
<body>
<div class="contain">
<div class="left_btn">左</div>
<div class="content">
<li class="one">111</li>
<li class="two">2</li>
<li class="three">3</li>

</div>
<div class="right_btn">右</div>

</div>
<script>
var idx=0;//默认第一张
var now_idx;//当前照片
var timer=null;
if(now_idx==undefined||now_idx==null){
now_idx=idx;
}
var pics=$(".content").find("li");
timer=setInterval(autoPlay, 5000);

function autoPlay(){
idx=idx+1;
if(idx>=pics.length){
idx=0;
}
showPic(idx);
}
function showPic(_idx){
for (var i = 0; i < pics.length; ++i) {

pics[i].style.display = "none";
}
pics[_idx].style.display = "block";

}

$(".left_btn").on("click",function(){
now_idx=now_idx==0?0:now_idx-1;
$(".content").find("li").siblings().css("display","none");
$(".content").find("li").eq(now_idx).css("display","block");

})

$(".right_btn").on("click",function(){
now_idx=now_idx==2?2:now_idx+1;
$(".content").find("li").siblings().css("display","none");
$(".content").find("li").eq(now_idx).css("display","block");

})

</script>

</body>
</html>