javascript - 图片的幻灯片效果

浏览数：31 / 时间：2015年06月08日

javascript 代码:

<script type="text/javascript">
    function select_play() {
        var select_play_box = document.getElementById("select_play_box");
        var aUl = select_play_box.getElementsByTagName("ul");
        var aImg = aUl[0].getElementsByTagName("li");
        var aNum = aUl[1].getElementsByTagName("li");
        var timer = play = null;
        var i = index = 0;
        //切换按钮
        for (i = 0; i < aNum.length; i++) {
            aNum[i].index = i;
            aNum[i].onmouseover = function () {
                show(this.index)
            }
        }
        //鼠标划过关闭定时器
        select_play_box.onmouseover = function () {
            clearInterval(play)
        };

        //鼠标离开启动自动播放
        select_play_box.onmouseout = function () {
            autoPlay()
        };

        //自动播放函数
        function autoPlay() {
            play = setInterval(function () {
                index++;
                index >= aImg.length && (index = 0);
                show(index);
            }, 2500);
        }

        autoPlay();//应用
        //图片切换, 淡入淡出效果
        function show(a) {
            index = a;
            var alpha = 0;
            for (i = 0; i < aNum.length; i++)aNum[i].className = "";
            aNum[index].className = "current";
            clearInterval(timer);

            for (i = 0; i < aImg.length; i++) {
                aImg[i].style.opacity = 0;
                aImg[i].style.filter = "alpha(opacity=0)";
            }

            timer = setInterval(function () {
                alpha += 2;
                alpha > 100 && (alpha = 100);
                aImg[index].style.opacity = alpha / 100;
                aImg[index].style.filter = "alpha(opacity = " + alpha + ")";
                alpha == 100 && clearInterval(timer)
            }, 20);
        }
    }
</script>

html代码:

<div id="select_play_box">
    <ul class="select_play_list">
        <li class="select_play_current"><img src="d/a.jpg"/></li>
        <li><img src="d/b.jpg"/></li>
        <li><img src="d/c.jpg"/></li>
        <li><img src="d/d.jpg"/></li>
    </ul>
    <ul class="select_play_count">
        <li class="select_play_current">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>

css代码:

 1 #select_play_box {
 2     position: relative;
 3     width: 315px;
 4     height: 272px;
 5     background: #fff;
 6     border-radius: 5px;
 7     border: 8px solid #fff;
 8     margin: 5px auto;
 9 }
10 #select_play_box ul {
11     list-style-type: none;
12 }
13 
14 #select_play_box ul, li {
15     margin: 0;
16     padding: 0;
17 }
18 
19 #select_play_box .select_play_list {
20     position: relative;
21     width: 100%;
22     height: 100%;
23     overflow: hidden;
24     border: 1px solid #ccc;
25 }
26 
27 #select_play_box .select_play_list li {
28     position: absolute;
29     top: 0;
30     margin-left: 15px;
31     margin-top: 5px;
32     width: 300px;
33     height: 170px;
34     opacity: 0;
35     filter: alpha(opacity=0);
36 }
37 #select_play_box .select_play_list img {
38     width:250px;
39     height: 250px;
40 }
41 
42 #select_play_box .select_play_list li.select_play_current {
43     opacity: 1;
44     filter: alpha(opacity=100);
45 }
46 
47 #select_play_box .select_play_count {
48     position: absolute;
49     right: 0;
50     bottom: 5px;
51 }
52 
53 #select_play_box .select_play_count li {
54     text-align: center;
55     color: #fff;
56     float: left;
57     width: 20px;
58     height: 20px;
59     cursor: pointer;
60     margin-right: 5px;
61     overflow: hidden;
62     background: #F90;
63     opacity: 0.7;
64     filter: alpha(opacity=70);
65     border-radius: 20px;
66 }
67 
68 #select_play_box .select_play_count li.select_play_current {
69     color: #fff;
70     opacity: 1;
71     filter: alpha(opacity=100);
72     font-weight: 700;
73     background: #f60;
74 }

View Code

完整html页面代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>javascript - 图片的幻灯片效果</title>
    <link type="text/css" href="sy/select_auto_image.css" rel="stylesheet"/>
</head>
<body onload="select_play()">
<div id="select_play_box">
    <ul class="select_play_list">
        <li class="select_play_current"><img src="d/a.jpg"/></li>
        <li><img src="d/b.jpg"/></li>
        <li><img src="d/c.jpg"/></li>
        <li><img src="d/d.jpg"/></li>
    </ul>
    <ul class="select_play_count">
        <li class="select_play_current">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>
<script type="text/javascript">
    function select_play() {
        var select_play_box = document.getElementById("select_play_box");
        var aUl = select_play_box.getElementsByTagName("ul");
        var aImg = aUl[0].getElementsByTagName("li");
        var aNum = aUl[1].getElementsByTagName("li");
        var timer = play = null;
        var i = index = 0;
        //切换按钮
        for (i = 0; i < aNum.length; i++) {
            aNum[i].index = i;
            aNum[i].onmouseover = function () {
                show(this.index)
            }
        }
        //鼠标划过关闭定时器
        select_play_box.onmouseover = function () {
            clearInterval(play)
        };

        //鼠标离开启动自动播放
        select_play_box.onmouseout = function () {
            autoPlay()
        };

        //自动播放函数
        function autoPlay() {
            play = setInterval(function () {
                index++;
                index >= aImg.length && (index = 0);
                show(index);
            }, 2500);
        }

        autoPlay();//应用
        //图片切换, 淡入淡出效果
        function show(a) {
            index = a;
            var alpha = 0;
            for (i = 0; i < aNum.length; i++)aNum[i].className = "";
            aNum[index].className = "current";
            clearInterval(timer);

            for (i = 0; i < aImg.length; i++) {
                aImg[i].style.opacity = 0;
                aImg[i].style.filter = "alpha(opacity=0)";
            }

            timer = setInterval(function () {
                alpha += 2;
                alpha > 100 && (alpha = 100);
                aImg[index].style.opacity = alpha / 100;
                aImg[index].style.filter = "alpha(opacity = " + alpha + ")";
                alpha == 100 && clearInterval(timer)
            }, 20);
        }
    }
</script>
</body>
</html>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

javascript - 图片的幻灯片效果