<html> | |
<head> | |
<meta charset="UTF-8"> | |
<title></title> | |
<script type="text/javascript" src="js/jquery-1.11.0.js"></script> | |
<style type="text/css"> | |
*{ | |
margin: 0;padding: 0; | |
} | |
#box{ | |
width:300px;height:200px;margin:0 auto; | |
position: relative;overflow: hidden; | |
} | |
.list{ | |
height:200px;position: absolute; | |
} | |
.list li{ | |
width:300px;height:200px;list-style: none; | |
float: left; | |
} | |
.list li img{ | |
display: block; | |
height: 200px; | |
width: 300px; | |
} | |
.btn div{ | |
width:50px;height:50px; | |
position: absolute; | |
display: none; | |
} | |
.btn_l{ | |
left:0;top:50%; | |
background: url(img/left_1122.png) no-repeat center; | |
margin-top: -25px; | |
} | |
.btn_r{ | |
right:0;top:50%; | |
background: url(img/right_1122.png) no-repeat center; | |
margin-top: -25px; | |
} | |
.small{ | |
position: absolute;right:10px;bottom:10px; | |
} | |
.small li{ | |
width:20px;height:20px;background: #CECECE; | |
text-align: center;line-height: 20px;list-style: none; | |
float: left;margin: 0 5px;border-radius: 50%; | |
} | |
.small .hover{ | |
background: red; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="box"> | |
<ul class="list"> | |
<li><img src="img/2.jpg"/></li> | |
<li><img src="img/3.jpg"/></li> | |
<li><img src="img/1.jpg"/></li> | |
<li><img src="img/4.jpg"/></li> | |
<li><img src="img/2.jpg"/></li> | |
</ul> | |
<div class="btn"> | |
<div class="btn_l"></div> | |
<div class="btn_r"></div> | |
</div> | |
<ul class="small"> | |
<li class="hover">1</li> | |
<li>2</li> | |
<li>3</li> | |
<li>4</li> | |
</ul> | |
</div> | |
<script type="text/javascript"> | |
var _left=$(".list li").eq(0).width(); | |
var leng=$(".list li").length; | |
$(".list").width(_left*leng) | |
var num=0; | |
var timer=null; | |
timer=setInterval(function(){ | |
move() | |
},2000) | |
//方便下次再次使用 | |
function move(){ | |
num++; | |
if(num==leng){ | |
// $(".list").css("left",0) | |
$(".list").animate({left:0},0) | |
num=1; | |
} | |
//按钮的判断 | |
if(num==-1){ | |
$(".list").animate({left:-_left*(leng-1)},0) | |
// $(".list").css("left",-_left*(leng-1)) | |
num=leng-2; | |
} | |
//下方背景颜色 | |
if(num==leng-1){ | |
$(".small li").eq(0).addClass("hover").siblings().removeClass("hover") | |
}else{ | |
$(".small li").eq(num).addClass("hover").siblings().removeClass("hover") | |
} | |
$(".list").stop().animate({left:-_left*num}); | |
} | |
//左右按钮点击事件 | |
$(".btn_r").click(function(){ | |
move(); | |
}) | |
$(".btn_l").click(function(){ | |
num=num-2; | |
move(); | |
}) | |
//下面小方块事件 | |
$(".small li").mouseover(function(){ | |
num=$(this).index()-1; | |
move(); | |
}) | |
//移入移除事件 | |
$("#box").mouseenter(function(){ | |
console.log("aaaa") | |
clearInterval(timer) | |
$(".btn_l").css({"display":"block"}); | |
$(".btn_r").css({"display":"block"}); | |
}); | |
$("#box").mouseleave(function(){ | |
timer=setInterval(function(){ | |
move() | |
},2000) | |
$(".btn_l").css({"display":"none"}); | |
$(".btn_r").css({"display":"none"}); | |
}) | |
</script> | |
</body> | |
</html> |
jq的无限轮播
最新推荐文章于 2020-11-29 03:28:02 发布