JS switch picture slideshow switching effect-JS Tutorial-php.cn

JS switch picture slideshow switching effect

韦小宝

Release： 2017-12-04 10:03:31

Original

2693 people have browsed it

This article explains in detail, js does the slideshow effect of switching pictures, and there are explanations for each line of the js code! This is a benefit for students who are not familiar with js, you can read more!

Code:

<!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>JS切换图片幻灯切换效果</title>
    <style>
        body, p, ul, li { margin: 0; padding: 0; }
        ul { list-style-type: none; }
        body { background: #000; text-align: center; font: 12px/20px Arial; }
        #box { position: relative; width: 322px; height: 172px; background: #fff; border-radius: 5px; border: 8px solid #fff; margin: 10px auto; }
        #box .list { position: relative; width: 320px; height: 240px; overflow: hidden; border: 1px solid #ccc; }
        #box .list li { position: absolute; top: 0; left: 0; width: 320px; height: 240px; opacity: 0; filter: alpha(opacity=0); }
        #box .list li.current { opacity: 1; filter: alpha(opacity=100); }
        #box .count { position: absolute; right: 0; bottom: 5px; }
        #box .count li { 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; }
        #box .count li.current { color: #fff; opacity: 1; filter: alpha(opacity=100); font-weight: 700; background: #f60; }
        #tmp { width: 100px; height: 100px; background: red; position: absolute; }
    </style>
    <script type="text/javascript">
        window.onload = function() {
            var oBox = document.getElementById("box");            var aUl = document.getElementsByTagName("ul");            var aImg = aUl[0].getElementsByTagName("li");            var aNum = aUl[1].getElementsByTagName("li");            var timer = play = null;            var i = index = 0;            var bOrder = true;            //切换按钮
            for(i = 0; i < aNum.length; i++) {
                aNum[i].index = i;
                aNum[i].onmouseover = function() {
                    show(this.index)
                }
            }            //鼠标划过关闭定时器
            oBox.onmouseover = function() {
                clearInterval(play)
            };            //鼠标离开启动自动播放
            oBox.onmouseout = function() {
                autoPlay()
            };            //自动播放函数
            function autoPlay() {
                play = setInterval(function() {
                    //判断播放顺序
                    bOrder ? index++ : index--;                    //正序
                    index >= aImg.length && (index = aImg.length - 2, bOrder = false);                    //倒序
                    index <= 0 && (index = 0, bOrder = true);                    //调用函数
                    show(index)
                }, 2000);
            }

            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></head><body><p id="box">
    <ul class="list">
        <li class="current"><img src="img/3.jpg" width="320" height="240"/></li>
        <li><img src="img/1.jpg" width="320" height="240"/></li>
        <li><img src="img/2.jpg" width="320" height="240"/></li>
        <li><img src="img/3.jpg" width="320" height="240"/></li>
        <li><img src="img/4.jpg" width="320" height="240"/></li>
    </ul>
    <ul class="count">
        <li class="current">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul></p></body></html>

Copy after login

The above is all the content of JS switching picture slideshow switching effect. I hope it will be helpful to the students!

Related recommendations:

JS slideshow can be looped and rotated smoothly with scrolling navigation (self-written)_javascript Skills

Detailed introduction of Js operating BOM object model

How to set up random switching background images in js

The above is the detailed content of JS switch picture slideshow switching effect. For more information, please follow other related articles on the PHP Chinese website!