它是一个比较活的轮播图，不需要点击自动轮播
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学习轮播图</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;/*去li圆点*/
}
.pic {
1200px;
height: 350px;
overflow: hidden;/*溢出隐藏 */
margin: 10px auto;/*居中向下10px*/
}
.pic ul {
3600px;
position: relative;/*相对定位*/
}
.pic ul li {
float: left;/*浮动 让它变成一排*/
}
.long {
500px;
height: 50px;
}
.long ul li {
71px;
height: 9px;
background-color: #000;
display: inline-block;
position: relative;
top: -38px;
left: 858px;
margin-right: 20px;
}
.long .action {
background-color: #007ae1;
}
</style>
<body>
<div class="content">
<div class="pic">
<ul>
<li><a href="#"><img src="images/index_02.png"></li>
<li><a href="#"><img src="images/index_03.png"></li>
<li><a href="#"><img src="images/index_04.png"></li>
</ul>
</div>
<div class="long">
<ul>
<li class="action"></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<script type="text/javascript">
$(function(){
//声明一个变量=找到图片的.pic ul
//声明一个变量=找到图片的pic ul li
//声明一个变量=找到长方条的long ul
var imgUL = $ (".pic ul ");
var imgULli = $(".pic ul li");
var longUI = $ (".long ul li");
var Awidth=imgULli.eq(0).width();
//用来计数
var count=0; //声明变量count=0
var time=null; //声明时间time=null 空
longUI.on('click',function(){ //找到长方条按钮 点击事件
$(this).addClass('action').siblings().removeClass('action');//addClass()
var index =$(this).index();
content=index;
imgUL.animate({"left":-content*Awidth});
})
time = setInterval(function(){ //setInterva()时间毫秒
count++;
if (count>longUI.length-1){
count=0;
}
longUI.eq(count).trigger('click');//选择长方条按钮 trigger()触发某个事件
},2000)
})
</script>
</body>
</html>