輪播圖

*{

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\');

}

})

總結

以上是生活随笔為你收集整理的html自动滑动轮播代码,html+css+js 实现自动滑动轮播图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。