html自动滑动轮播代码,html+css+js 实现自动滑动轮播图

轮播图

*{

margin: 0 auto;

padding: 0;

list-style: none;  //去圆点

}

.one {

width: 1200px;

height:350px;

margin: 0 auto;

overflow: hidden;    //设定好的宽度多余的进行隐藏

}

.one ul{

width: 3600px;

position: relative;

}

.one ul li{

float: left;    //图片浮动

}

.two ul li {            //轮播条的样式设置

width: 50px;

height: 5px;

background-color: red;

display: inline-block;       //向行内样式一样显示

position: relative;

left: 800px;

top: -30px;

}

.two .a {

background-color: #565656;

}

• 
• 
• 

$(function(){

var oneul = $(\'.one ul\'); //声明一个变量找到图片的ul

var oneulli = $(\'.one ul li\'); //声明一个变量找到图片的ul li

var twoulli = $(\'.two ul li\'); //声明一个变量找到轮播按钮 ul li

var Awidth = oneulli.eq(0).width(); //声明一个变量找到声明图片的(ul li)=oneulli的那个变量 从0开始eq(0) 宽度width()

var count=0; //用来计数

var time=null; //用来计时间

twoulli.on(\'click\',function(){

$(this).addClass(\'a\').siblings().removeClass(\'a\'); //addClass()添加 siblings()同胞元素 removeClass()移除

count=$(this).index();

oneul.animate({"left":-count*Awidth}); //四张图片依次向左滑动

})

time=setInterval(lun,2000);

function lun(){ //lun 调用上面命名

count++; //js运算符 %= 取模 就是去得它的余数 18

count%=twoulli.length;

twoulli.eq(count).trigger(\'click\');

}

})