自动滑动图片html5,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‘);

}

})

原文：http://www.cnblogs.com/tangtangsimida/p/7570068.html

总结

以上是生活随笔为你收集整理的自动滑动图片html5,html+css+js 实现自动滑动轮播图的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。