WEB前端：04_slider幻灯片(焦点图轮换)

2020-11-24 10:53

阅读：548

YPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">

标签：style blog class code java ext

slider幻灯片(焦点图轮换)

网站常用效果之一，以下为简化版，用于学习javascript基础知识。

效果图：

soscw.com,搜素材

slider幻灯片(焦点图轮换) - 纯JS简化版


"Content-Type" 
content="text/html; charset=utf-8">

slider幻灯片 - 纯JS简化版

>

*{margin: 0; padding: 0;}

/* slider */

#sliderbox { width: 500; height:313px;position: relative; overflow: hidden;margin: 20px;}

#slider {list-style: none; margin: 0; padding: 0;}

#slider li {float:left; margin: 0; padding: 0;}

#slidertab {position: absolute; right: 10px; bottom:10px; width: 80px; height: 20px; list-style: none;}

#slidertab li {float: left; width: 20px; height: 20px; margin: 2px; background: #eee;text-align: center; line-height: 20px;font-size: 12px;}

#slidertab li.sliderclass {background: #f00;}

>

window.onload = function() {

var sliderbox = document.getElementById(‘sliderbox‘);

var slider = document.getElementById(‘slider‘);

var sliderli = slider.getElementsByTagName(‘li‘);

var slidertab = document.getElementById(‘slidertab‘);

var slidertabli = slidertab.getElementsByTagName(‘li‘);

var inow = 0;

sliderbox.onmouseover = function() {

clearInterval(timer);

}

sliderbox.onmouseout =function() {

//clearInterval(timer);

timer = setInterval(autoplay, 1000);

}

for(var i=0; i

slidertabli[i].index = i;

slidertabli[i].onclick = function() {

clearInterval(timer);

for(var a=0; a

slidertabli[a].className = "";

sliderli[a].style.display = "none";

}

this.className = "sliderclass";

sliderli[this.index].style.display = "block";

inow = this.index;

}

function autoplay() {

for(var i=0; i

sliderli[i].style.display = ‘none‘;

slidertabli[i].className = "";

}

sliderli[inow].style.display = ‘block‘;

slidertabli[inow].className = "sliderclass";

inow = inow==sliderli.length-1 ? 0 : inow+1;

}

timer = setInterval(autoplay, 1000);

}


"sliderbox">

      
    
"slider">


      
        
"tab1.jpg" 
/>


      
        
"tab2.jpg" 
/>


      
        
"tab3.jpg" 
/>


      
    

      
    
"slidertab">


      
        1

      
        2

      
        3