版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
样式教丑，只是个 Demo，可根据实际情况调整。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq轮播</title>
<style>
#lun {
width: 80%;
height: 400px;
margin: 0 auto;
}
/*=====轮播图片======*/
#most_box {
width: 100%;
height: 400px;
position: relative;
overflow: hidden;
}
#img_box {
width: 1000%;
height: 100%;
/*overflow: hidden;*/
position: absolute;
}
#img_box img {
width: 10%;
height: 100%;
float: left;
}
/*=====前进后退按钮======*/
#change_box {
color: #999;
font-size: 30px;
font-weight: 900;
}
#prev,
#next {
position: absolute;
top: 45%;
width: 40px;
height: 70px;
line-height: 70px;
border-radius: 5%;
}
#prev:hover,
#next:hover {
background-color: red;
cursor: pointer;
}
#prev {
left: 0;
}
#next {
right: 0;
}
/*=====下面列表======*/
#num_box {
position: absolute;
bottom: 3%;
right: 3%;
text-align: center;
}
#num_box ul li {
float: left;
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
border: 2px solid #999;
margin-right: 5px;
background-color: #757575;
}
#num_box ul li:hover {
background-color: white;
cursor: pointer;
}
#num_box .select {
background-color: white;
cursor: pointer;
}
</style>
</head>
<body>
<div id="lun">
<div id="most_box">
<div id="img_box">
<img src="img/060511.jpg" />
<img src="img/060513.jpg" />
<img src="img/060514.jpg" />
<img src="img/060511.jpg" />
<img src="img/060514.jpg" />
<img src="img/060511.jpg" />
<img src="img/060514.jpg" />
<img src="img/060514.jpg" />
<img src="img/060511.jpg" />
<img src="img/060514.jpg" />
</div>
<div id="change_box">
<span id="prev"><</span>
<span id="next">></span>
</div>
<div id="num_box">
<ul>
<li class="select"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script>
var num = 0,
imgLen = $('#img_box img').length, //5 6 7
imgWidth = $('#img_box img').width();
var liList = $('#num_box ul li');
//自动变换调用
autoChange()
//清除定时器时候的重置定时器--封装
function autoChange() {
autochange = setInterval(function() {
if(num < imgLen - 1) {
num++;
} else {
num = 0;
}
changeTo(num);
}, 2000);
}
//点击左右变换
$('#prev').on('click', function() {
clearInterval(autochange)
if(num > 0) {
num = num - 1;
} else {
num = imgLen - 1;
}
changeTo(num);
autoChange();
})
$('#next').on('click', function() {
clearInterval(autochange)
if(num < imgLen - 1) {
num = num + 1;
} else {
num = 0;
}
changeTo(num);
autoChange();
})
//li点击变换
liList.on('click', function() {
clearInterval(autochange)
for(var i = 0; i < imgLen; i++) {
if(liList[i] == this) {
num = i;
changeTo(num);
}
}
autoChange();
});
//改变函数
function changeTo(num) {
var goLeft = num * imgWidth;
$('#img_box').animate({
left: "-" + goLeft + "px"
}, 500);
for(var i = 0; i < imgLen; i++) {
liList[i].className = '';
}
liList[num].className = 'select';
}
</script>
</body>
</html>
觉得有帮助的小伙伴右上角点个赞~
