它是一个比较活的轮播图,不需要点击自动轮播
学习轮播图*{
margin: 0;
padding: 0;
list-style: none;/*去li圆点*/
}
.pic {
width: 1200px;
height: 350px;
overflow: hidden;/*溢出隐藏*/
margin: 10px auto;/*居中向下10px*/
}
.pic ul {
width: 3600px;
position: relative;/*相对定位*/
}
.pic ul li {
float: left;/*浮动 让它变成一排*/
}
.long {
width: 500px;
height: 50px;
}
.long ul li {
width: 71px;
height: 9px;
background-color: #000;
display: inline-block;
position: relative;
top: -38px;
left: 858px;
margin-right: 20px;
}
.long .action {
background-color: #007ae1;
}
$(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)
})