标签：style blog class code java ext
slider幻灯片(焦点图轮换)
网站常用效果之一，以下为简化版，用于学习javascript基础知识。
效果图：
slider幻灯片(焦点图轮换) - 纯JS简化版
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82 |
<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> |
WEB前端：04_slider幻灯片(焦点图轮换),布布扣,bubuko.com
标签：style blog class code java ext
原文地址：http://www.cnblogs.com/haicheng/p/3704251.html
