完美代碼
<script>
window.onload = function () {
//1.獲取標(biāo)簽
var slider = document.getElementById('slider');
var slider_scroll = document.getElementById('slider_scroll');
var slider_ctrl = document.getElementById('slider_ctrl');
var slider_main = document.getElementById('slider_main');
var slider_pics = slider_main.children;
var slider_w = slider.offsetWidth;
var iNow = 0;//用來記錄當(dāng)前顯示的圖片的索引
//2.操作標(biāo)簽
//2.1添加span,用來控制下面的跳轉(zhuǎn)
for(var i= 0;i < slider_pics.length;i ++){
//創(chuàng)建span
var mySpan = document.createElement('span');
//2.11綁定索引
mySpan.innerHTML = slider_pics.length - i;
mySpan.className = 'slider-ctl-icon';
//插入span,每次都插入到 第2個(gè)標(biāo)簽之前 (2對(duì)應(yīng)的索引是1)
slider_ctrl.insertBefore(mySpan,slider_ctrl.children[1]);
}
slider_ctrl.children[1].className = 'slider-ctl-icon current';
//2.2讓除了第一張圖片,都放在第一張圖片的后面
//遍歷除了第一張的圖片
for(var i = 1;i < slider_pics.length;i++){
slider_pics[i].style.left = slider_w +'px';
}
//2.3點(diǎn)擊span,做對(duì)應(yīng)的操作
//遍歷span
for(var i = 0;i < slider_ctrl.children.length;i ++){
//2.31取出span
var mySpan = slider_ctrl.children[i];
//2.32點(diǎn)擊span,判斷類型,然后做對(duì)應(yīng)的操作
mySpan.onmousedown = function () {
//根據(jù)類名來判斷點(diǎn)擊了那個(gè)span
if(this.className == 'slider_left'){
//讓當(dāng)前圖片移動(dòng)到右邊,我們需要搞一個(gè)值用來記錄當(dāng)前顯示的圖片
buffer(slider_pics[iNow],{left:slider_w});
//讓上張圖片快速定位到左邊
iNow --;
if (iNow < 0){
iNow = slider_pics.length - 1;
}
slider_pics[iNow].style.left = -slider_w +'px';
//讓上一張圖片快速移動(dòng)到當(dāng)前的位置
buffer(slider_pics[iNow],{left:0});
}else if(this.className == 'slider_right'){
//當(dāng)前圖片左移
buffer(slider_pics[iNow],{left:-slider_w});
iNow ++;
if (iNow > slider_pics.length -1){
iNow = 0;
}
//讓下一張圖片快遞定位到右邊
slider_pics[iNow].style.left = slider_w + 'px';
//讓下一張圖片移動(dòng)到當(dāng)前的位置
buffer(slider_pics[iNow],{left:0});
}else {
//我們要獲取點(diǎn)擊的span的索引,要和當(dāng)前的圖片比較
//一般做法:就是在創(chuàng)建span的時(shí)候綁定索引
var index = this.innerHTML - 1;
//判斷
if(index > iNow){//點(diǎn)擊右邊
//讓當(dāng)前的圖片快速左移
buffer(slider_pics[iNow],{left:-slider_w});
//讓索引對(duì)應(yīng)的值快速定位右邊
//讓當(dāng)前的值等于index
iNow = index;
slider_pics[index].style.left = slider_w + 'px';
//讓索引對(duì)應(yīng)的值快速移動(dòng)到當(dāng)前位置
buffer(slider_pics[iNow],{left:0});
}else if(index < iNow){//左邊
//讓當(dāng)前的圖片快速右移
buffer(slider_pics[iNow],{left:slider_w});
//讓索引對(duì)應(yīng)的值快速定位左邊
//讓當(dāng)前的值等于index
iNow = index;
slider_pics[index].style.left = -slider_w + 'px';
//讓索引對(duì)應(yīng)的值快速移動(dòng)到當(dāng)前位置
buffer(slider_pics[iNow],{left:0});
}
}
//更新索引
changeIndex();
}
}
//3.更新索引
function changeIndex(indx) {
//就是讓當(dāng)前索引對(duì)應(yīng)的span顯示對(duì)應(yīng)的顏色,其他原來的顏色
//使用排他
for(var i = 1;i < slider_ctrl.children.length -1;i ++){
slider_ctrl.children[i].className = 'slider-ctl-icon';
}
slider_ctrl.children[iNow +1].className = 'slider-ctl-icon current'
}
//4自動(dòng)滾動(dòng)
var timer = setInterval(autoPlay,1000)
/*抽取自動(dòng)滾動(dòng)的函數(shù)
* */
function autoPlay() {
//相當(dāng)于點(diǎn)擊了右鍵
//當(dāng)前圖片左移
buffer(slider_pics[iNow],{left:-slider_w});
iNow ++;
if (iNow > slider_pics.length -1){
iNow = 0;
}
//讓下一張圖片快遞定位到右邊
slider_pics[iNow].style.left = slider_w + 'px';
//讓下一張圖片移動(dòng)到當(dāng)前的位置
buffer(slider_pics[iNow],{left:0});
//更新索引
changeIndex();
}
//5.當(dāng)移動(dòng)到slider,停止定時(shí)器,離開就開啟定時(shí)器
slider.onmouseover = function () {
clearInterval(timer);
}
slider.onmouseout = function () {
timer = setInterval(autoPlay,1000);
}
}
</script>
