js图片轮播

最新推荐文章于 2018-08-05 19:47:28 发布

夜空中-最亮的星

最新推荐文章于 2018-08-05 19:47:28 发布

阅读量961

点赞数

分类专栏： js 文章标签： js 图片轮播定时器

本文链接：https://blog.csdn.net/wanglilong2013/article/details/47010741

版权

js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

思路：通过js定时器定时切换图片的src，当鼠标以上按钮的时候改变图片的src属性，并停止轮播，记录当前图片所处轮播的位置，鼠标移出的时候继续轮播。

<!Doctype html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .bt{
            width: 15px;
            line-height: 15px;
            text-align: center;
            border: 1px solid gray;
            font-size: 12px;
            float: left;
            margin-right: 10px;
        }
        .bt:hover{
            background: red;
            /*设置鼠标样式为手型*/
            cursor: pointer;
        }
        .rd{background: red;}
    </style>

</head>
<body>
    <div class='banner'>
        <img id='lb' src="./lb1.jpg"/>
        <div id='btn'>
            <div class='bt rd'  onmouseover='fun1(1)' onmouseout='fun2()'>1</div>
            <div class='bt' onmouseover='fun1(2)' onmouseout='fun2()'>2</div>
            <div class='bt' onmouseover='fun1(3)' onmouseout='fun2()'>3</div>
            <div class='bt' class='bt' onmouseover='fun1(4)' onmouseout='fun2()'>4</div>
            <div class='bt' class='bt' onmouseover='fun1(5)' onmouseout='fun2()'>5</div>
        </div>
    </div>
</body>
<script type="text/javascript">
        //获取到图片，并保存为全局变量
        var img=document.getElementById('lb');


        //初始化i=1
        var i=1;
        // var t=setInterval(change,1000);

        //切换图片方法
        function change(){
            //没执行一次加一
            i++;
            //如果i循环到最大哪张图片，则把i的值赋为1，让它又从第一张开始滚动
            if(i==6) i=1;

            //处理图片路径
            img.src='./lb'+i+'.jpg';

            //获取到id为btn的div元素
            var div1=document.getElementById('btn');

            //获取div1下面所有的div标签
            var divArr=div1.getElementsByTagName('div');

            //遍历btn下的所有div并设置背景色为白色
            for(var k=0;k<divArr.length;k++){
                divArr[k].style.background='white';
            }

            //设置当前div的背景色随着图片轮而变化
            divArr[i-1].style.background='red';
            // console.debug(i);
        }

        //调用定时函数，定时切换图片
        var t=setInterval(change,1000);

        //停止轮播
        function stoplb(){
            window.clearInterval(t);
        }

        //开始轮播
         function startlb(){
            // stoplb();
            //注意t应该是对全局变量的一次重新赋值，而不是重新声明为局部变量
            //若在t前面加var会导致轮播加快
            t=setInterval(change,1000);
         }
         function fun1(j){

            //停止轮播并把i的值赋值为j的值
            stoplb();
            i=j;

            //获取id为btn的div元素标签
            var div1=document.getElementById('btn');

            //获取div1后面的所有div标签，获取的是一个数组对象
            //可以通过名称[索引]的方式访问当中的div元素
            var divArr=div1.getElementsByTagName('div');

            //遍历div数组对象，把所有的div背景设置为白色 
            for(var k=0;k<divArr.length;k++){
                divArr[k].style.background='white';
            }

            //把当前div背景设置为红色
            divArr[j-1].style.background='red';

            //改变鼠标移上后图片的路径
            img.src='./lb'+j+'.jpg';
            // console.debug('test');
         }

         function fun2(){

            //开始轮播
            startlb();
         }
    </script>
</html>

缺陷：图片名称必须符合一定要求才能轮播。

夜空中-最亮的星

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
js图片轮播

思路：通过js定时器定时切换图片的src，当鼠标以上按钮的时候改变图片的src属性，并停止轮播，记录当前图片所处轮播的位置，鼠标移出的时候继续轮播。<!Doctype html><html><head> <title></title> <style type="text/css"> .bt{ width: 15px;
复制链接

扫一扫

专栏目录