*{
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\');
}
})
？...)
...)
