JQ轮播图
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQ轮播图相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
border: 0;
}
li{
list-style: none;
}
#box{
width: 600px;
height: 300px;
margin: 100px auto;
overflow: hidden;
border: 10px solid blue;
position: relative;
}
#list1{
width: 5000px;
height: 300px;
position: absolute;
left: 0;
top: 0;
}
img{
width: 600px;
height: 300px;
}
#list1 li{
float: left;
height: 300px;
width: 600px;
}
#list2{
width: 100px;
height: 20px;
position: absolute;
right: 30px;
bottom: 30px;
}
#list2 li{
float: left;
height: 18px;
border: 1px solid black;
width: 18px;
line-height: 18px;
text-align: center;
background: yellow;
margin-right: 5px;
cursor: pointer;
}
#first,#last{
height: 20px;
width: 50px;
cursor: pointer;
background: yellowgreen;
position: absolute;
top: 140px;
}
#first{
left: 20px;
}
#last{
right: 20px;
}
#list2 .active{
background: red;
}
</style>
<script src="js/jquery-1.12.3.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<ul id="list1">
<li><img src="img/b1.jpg"</li>
<li><img src="img/b2.jpg"</li>
<li><img src="img/b3.jpg"</li>
<li><img src="img/b4.jpg"</li>
</ul>
<ul id="list2">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div id="first">
<span>上一页</span>
</div>
<div id="last">
下一页
</div>
</div>
<script type="text/javascript">
$(function(){
var ul1=$("#list1");
var ul2=$("#list2");
var li1=$("#list1 li");
var li2=$("#list2 li");
//复制第一张图到最后
li1.first().clone().appendTo(ul1);
var size=$("#list1 li").size();
//自动轮播
var i=0;//记录图片下标
var timer=setInterval(function(){
i++;
move()
},2000);
//移动的函数
function move(){
//如果i<0（左边界）
if(i<0){
i=size-2;//即将移动到第四张图
ul1.css("left",-(size-1)*600)//瞬间移动到第五张图
}
//如果i超出了图片总量
if(i==size){
i=1;//即将移动到第二张图
ul1.css("left",0)//瞬间移动到第一张图
}
//移动到i张图
ul1.stop().animate({left:-i*600},500);
//改变ul2按钮的状态
li2.eq(i).removeClass().addClass("active").siblings().removeClass("active");
if(i==size-1){
li2.eq(0).removeClass().addClass(‘active‘).siblings().removeClass("active");
}
}
//上一页
$("#first").click(function(){
i--;
move();
});
//下一页
$("#last").click(function(){
i++;
move();
});
//li2上面的按钮
li2.hover(function(){
var index = $(this).index();
//console.log(index);
i = index;
move();
})
//移入box, 移出box
$("#box").hover(function(){
//移入, 关闭定时器
clearInterval(timer);
},
function(){
//移出, 重新开启定时器
timer = setInterval(function(){
i++;
move();
}, 2000);
})
})
</script>
</body>
</html>
以上是关于JQ轮播图的主要内容，如果未能解决你的问题，请参考以下文章