您的位置：首页 > Web前端

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

2014-05-02 17:54 507 查看

slider幻灯片(焦点图轮换)

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

效果图：

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>slider幻灯片 - 纯JS简化版</title>
<style type="text/css">
*{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;}
</style>
<script type="text/javascript">

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.length; i++) {
slidertabli[i].index = i;
slidertabli[i].onclick = function() {
clearInterval(timer);
for(var a=0; a<slidertabli.length; 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.length; 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);
}

</script>
</head>
<body>

<div id="sliderbox">
<ul id="slider">
<li><img src="tab1.jpg" /></li>
<li><img src="tab2.jpg" /></li>
<li><img src="tab3.jpg" /></li>
</ul>
<ul id="slidertab">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>

</body>
</html>

slider幻灯片 - 面向对象版

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>slider幻灯片 - 面向对象版</title>
<style type="text/css">
*{margin: 0; padding: 0;}
/* slider */
#sliderbox, #sliderbox2 { width: 500; height:313px;position: relative; overflow: hidden;margin: 20px;}
#slider, #slider2 {list-style: none; margin: 0; padding: 0;}
#slider li, #slider2 li {float:left; margin: 0; padding: 0;}
#slidertab, #slidertab2 {position: absolute; right: 10px; bottom:10px; width: 80px; height: 20px; list-style: none;}
#slidertab li, #slidertab2 li {float: left; width: 20px; height: 20px; margin: 2px; background: #eee;text-align: center; line-height: 20px;font-size: 12px;}
#slidertab li.sliderclass, #slidertab2 li.sliderclass {background: #f00;}
</style>
<script type="text/javascript">
window.onload = function() {
new slider('sliderbox', 'slider', 'slidertab');
new slider('sliderbox2', 'slider2', 'slidertab2');
}

function slider(sliderbox, slider, slidertab) {

var _this = this;
var sliderbox = document.getElementById(sliderbox);
var slider = document.getElementById(slider);
var slidertab = document.getElementById(slidertab);

this.sliderli = slider.getElementsByTagName('li');
this.slidertabli = slidertab.getElementsByTagName('li');
this.inow = 0;

sliderbox.onmouseover = function() {
_this.stop(_this);
}

sliderbox.onmouseout = function() {
_this.autoplay(_this);
}

for(var i=0; i<this.slidertabli.length; i++) {
this.slidertabli[i].index = i;
this.slidertabli[i].onclick = function() {
_this.tabfn(_this, this);
}
}

_this.autoplay(this);

};

slider.prototype.autoplay = function(obj) {
obj.timer = setInterval(function(){
for(var i=0; i<obj.sliderli.length; i++) {
obj.sliderli[i].style.display = 'none';
obj.slidertabli[i].className = "";
}
obj.sliderli[obj.inow].style.display = 'block';
obj.slidertabli[obj.inow].className = "sliderclass";
obj.inow = obj.inow==obj.sliderli.length-1 ? 0 : obj.inow+1;
}, 1000);
}

slider.prototype.stop = function(obj) {
clearInterval(obj.timer);
}

slider.prototype.tabfn = function(obj, elem) {
clearInterval(obj.timer);
for(var a=0; a<obj.slidertabli.length; a++) {
obj.slidertabli[a].className = "";
obj.sliderli[a].style.display = "none";
}
elem.className = "sliderclass";
obj.sliderli[elem.index].style.display = "block";
obj.inow = elem.index;
}

</script>
</head>
<body>

<div id="sliderbox">
<ul id="slider">
<li><img src="tab1.jpg" /></li>
<li><img src="tab2.jpg" /></li>
<li><img src="tab3.jpg" /></li>
</ul>
<ul id="slidertab">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>

<div id="sliderbox2">
<ul id="slider2">
<li><img src="tab1.jpg" /></li>
<li><img src="tab2.jpg" /></li>
<li><img src="tab3.jpg" /></li>
</ul>
<ul id="slidertab2">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航