码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2014-05-06 01:15:45      阅读:362      评论:0      收藏:0      [点我收藏+]

标签:style   blog   class   code   java   ext   

slider幻灯片(焦点图轮换)

 

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

效果图:

bubuko.com,布布扣

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

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

标签:style   blog   class   code   java   ext   

原文地址:http://www.cnblogs.com/haicheng/p/3704251.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!