JS实例-图片轮播

最新推荐文章于 2022-11-23 16:57:23 发布

祥灬子

最新推荐文章于 2022-11-23 16:57:23 发布

阅读量564

点赞数

分类专栏： js html css

本文链接：https://blog.csdn.net/qq_17505335/article/details/52748906

版权

js 同时被 3 个专栏收录

14 篇文章 0 订阅

订阅专栏

html

13 篇文章 0 订阅

订阅专栏

css

10 篇文章 0 订阅

订阅专栏

图片按顺序轮播

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            *{margin: 0;padding: 0;}
            ul{width: 50px; height: 600px;}
            li{list-style: none;width: 40px; height: 40px; background-color:bisque; margin-top: 18px; margin-left: 5px;font-size: 12px;line-height: 40px;text-align: center;}
            .div{width: 500px; height: 600px; border: 1px solid red; position:relative;}
            #div_one{width: 400px; height:550px; border: 1px solid blue; position: absolute; top: 22px; left: 50px;}
            #ul_two{position: absolute;top:0px;right: 0px;}
            img{width: 400px; height:550px;}
        </style>
        <script>
            window.onload = function(){
                var div = document.getElementById("div");
                var ali = div.getElementsByTagName('li')
                var img = document.getElementById("img");
                var arr = ['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg','img/6.jpg','img/7.jpg','img/8.jpg','img/9.jpg','img/10.jpg','img/11.jpg','img/12.jpg','img/13.jpg','img/14.jpg','img/15.jpg','img/16.jpg','img/17.jpg','img/18.jpg','img/19.jpg','img/20.jpg']
                var num = 0;
                var timer = null;
                //图片轮播
                function fn2(){
                    timer = setInterval(function(){
                        num++;
                        num%=ali.length;
                        for(var i=0;i<ali.length;i++){
                            img.src = arr[num%=ali.length];
                            ali[i].style.backgroundColor = 'bisque';
                            ali[num].style.backgroundColor = 'orange';      

                        }
                    },500);
                }
                fn2();

                //鼠标聚焦时显示该图片
                function fn1(){
                    for(var i=0; i<ali.length;i++){
                    ali[i].index = i ;
                    ali[i].onmousemove = function(){
                        //取消轮播
                        clearInterval(timer);
                        img.src = arr[this.index];
                        for(var i=0;i<ali.length;i++){
                            ali[i].style.backgroundColor = 'bisque';
                        }
                        this.style.backgroundColor = 'orange';  
                    }
                    ali[i].onmouseout = function(){
                        fn2();
                        this.style.backgroundColor = 'bisque';      
                    }
                }
            }

            img.onmousemove = function(){
                fn1();
            }
        }
    </script>
    </head>
    <body>
        <div class="div" id="div">
            <ul id="ul_one">
                <li>美女1</li>
                <li>美女2</li>
                <li>美女3</li>
                <li>美女4</li>
                <li>美女5</li>
                <li>美女6</li>
                <li>美女7</li>
                <li>美女8</li>
                <li>美女9</li>
                <li>美女10</li>
            </ul>
                <div id="div_one"><img id="img" src="img/1.jpg" /></div>
            <ul id="ul_two">
                <li>美女11</li>
                <li>美女12</li>
                <li>美女13</li>
                <li>美女14</li>
                <li>美女15</li>
                <li>美女16</li>
                <li>美女17</li>
                <li>美女18</li>
                <li>美女19</li>
                <li>美女20</li>
            </ul>
        </div>
    </body>
</html>

祥灬子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS实例-图片轮播

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> *{margin: 0;padding: 0;} ul{width: 50px; height: 600px;} li{
复制链接

扫一扫