javascript - 图片的幻灯片效果

时间：2022-01-17 17:17:14

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代码:

 #select_play_box {

     position: relative;

     width: 315px;

     height: 272px;

     background: #fff;

     border-radius: 5px;

     border: 8px solid #fff;

     margin: 5px auto;

 }

 #select_play_box ul {

     list-style-type: none;

 }

 #select_play_box ul, li {

     margin:;

     padding:;

 }

 #select_play_box .select_play_list {

     position: relative;

     width: 100%;

     height: 100%;

     overflow: hidden;

     border: 1px solid #ccc;

 }

 #select_play_box .select_play_list li {

     position: absolute;

     top:;

     margin-left: 15px;

     margin-top: 5px;

     width: 300px;

     height: 170px;

     opacity:;

     filter: alpha(opacity=0);

 }

 #select_play_box .select_play_list img {

     width:250px;

     height: 250px;

 }

 #select_play_box .select_play_list li.select_play_current {

     opacity:;

     filter: alpha(opacity=100);

 }

 #select_play_box .select_play_count {

     position: absolute;

     right:;

     bottom: 5px;

 }

 #select_play_box .select_play_count li {

     text-align: center;

     color: #fff;

     float: left;

     width: 20px;

     height: 20px;

     cursor: pointer;

     margin-right: 5px;

     overflow: hidden;

     background: #F90;

     opacity: 0.7;

     filter: alpha(opacity=70);

     border-radius: 20px;

 }

 #select_play_box .select_play_count li.select_play_current {

     color: #fff;

     opacity:;

     filter: alpha(opacity=100);

     font-weight:;

     background: #f60;

 }

完整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>

相关文章