使用js制作一般网站首页图片轮播效果

最新推荐文章于 2021-09-27 08:50:57 发布

duenyang

最新推荐文章于 2021-09-27 08:50:57 发布

阅读量734

点赞数

本文链接：https://blog.csdn.net/duenyang/article/details/52397570

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片轮播</title>
    <style>
        .warp{
            width: 600px;
            height: 750px;
            position: relative;
            margin:30px auto 0;
            overflow: hidden;
        }
        #box{
            width: 600px;
            height: 750px;
            position: absolute;
            top: 0px;
            left: 0px;
            overflow: hidden;
            /*overflow-x:auto;*/
        }
        #box #con{
            width: 6000px;
            height: 750px;
            overflow: hidden;
        }
        #con img{
            float: left;
            width: 600px;
            height: 750px;
        }
        #btnL{
            position: absolute;
            left: 0px;
            top: 366px;
            width: 36px;
            height: 36px;
            background: url(images/btnL.png) 0 0 no-repeat;
            cursor: pointer;
        }
        #btnR{
            position: absolute;
            right: 0px;
            top: 366px;
            width: 36px;
            height: 36px;
            background: url(images/btnR.png) 0 0 no-repeat;
            cursor: pointer;
        }
        #num{
            position: absolute;
            bottom: 10px;
            left: 148px;
            overflow: hidden;
            list-style: none;
        }
        #num li{
            float: left;
            margin:0 5px;
            font-size: 16px;
            line-height: 25px;
            height: 25px;
            width: 25px;
            background: #ccc;
            text-align: center;
            cursor: pointer;
        }
        #num li.select{
            background-color: green;
            color: white;
        }
    </style>
</head>
<body>
    <div class="warp">
        <div id="box">
            <div id="con">
                <img src="images/meinv1.jpg" alt="">
                <img src="images/meinv2.jpg" alt="">
                <img src="images/meinv3.jpg" alt="">
                <img src="images/meinv4.jpg" alt="">
                <img src="images/meinv5.jpg" alt="">
                <img src="images/meinv6.jpg" alt="">
            </div>
        </div>
        <div id="btnL"></div>
        <div id="btnR"></div>
        <ul id="num">
            <li class="select">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
    </div>
    <script>
        var box=document.getElementById('box');
        var con=document.getElementById('con');
        var imgs=con.getElementsByTagName('img');
        var btnL=document.getElementById('btnL');
        var btnR=document.getElementById('btnR');
        var num=document.getElementById('num');
        var lis=num.getElementsByTagName('li');
        var timer1=null,timer2=null;
        var imgw=imgs[0].clientWidth;
        var x=0;
        function imgScroll(){//图片切换
          var start=box.scrollLeft;
            var end=imgw*x;
            var change=end-start;
            var minstep=0;
            var maxstep=30;
            var stepLength=change/maxstep;
                clearInterval(timer2);
                timer2=setInterval(function(){
                    minstep++;
                    // console.log(minstep);
                    if (minstep>=maxstep) {
                        clearInterval(timer2);
                    }
                    start+=stepLength;
                    box.scrollLeft=start;
                },20)    
                for (var i = 0; i < lis.length; i++) {
                    lis[i].className='none';
                }
                lis[x].className='select';
        }
        function move(){//默认向左每隔3s滚动
            clearInterval(timer1);
            timer1=setInterval(function(){
                x++;
                if (x>=imgs.length) {
                    x=0;
                }
              imgScroll();
              for (var i = 0; i < lis.length; i++) {
                  lis[i].className='none';
                  lis[x].className='select';
              }
                },3000);
            }
        move();//启动默认滚动函数；
        btnR.onclick=function(){
            clearInterval(timer1);
            x++;
            if (x>=imgs.length) {
                x=0;
            }
          imgScroll();
          move();
        }
        btnL.onclick=function(){
            clearInterval(timer1);
            x--;
            if (x<0) {
                x=imgs.length-1;
            }
          imgScroll();
            move();
        }
        for (var i = 0; i < lis.length; i++) {
            lis[i].index=i;
            lis[i].onclick=function(){
                x=this.index;
                imgScroll();
                move();
            }
        }

    </script>
</body>
</html>

具体效果我是仿照hao123导航页面图片轮播的效果，大家可以去那个网站参考

duenyang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用js制作一般网站首页图片轮播效果

DOCTYPE html>html lang="en">head> meta charset="UTF-8"> title>图片轮播title> style> .warp{ width: 600px; height: 750px; position: relativ
复制链接

扫一扫