JS原生轮播图代码

最新推荐文章于 2021-10-29 00:59:29 发布

qq_34481114

最新推荐文章于 2021-10-29 00:59:29 发布

阅读量366

点赞数

分类专栏： HTML JavaScript

本文链接：https://blog.csdn.net/qq_34481114/article/details/64689519

版权

JavaScript 同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

HTML

10 篇文章 0 订阅

订阅专栏

布局一个这样的轮播图

难点在于图4与图1怎么实现无缝轮播,巧妙的是把图1插入图4后面 12341...代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .box{
            width: 490px;
            height: 327px;
            padding: 5px;
            border: 1px solid #cccccc;
            margin: 200px auto;
        }
        .inner {
            width: 490px;
            height: 327px;
            position: relative;
            overflow: hidden;
        }
        ul{
            list-style: none;
            width: 500%;
            position: absolute;
            left:0px;

        }
        li{
            float: left;
        }
        .square {
            position: absolute;
            bottom: 10px;
            right: 10px;
        }
        span {
            display: inline-block;
            width: 16px;
            height: 16px;
            background-color: #fff;
            text-align: center;
            margin: 3px;
            border: 1px solid #ccc;
            line-height: 16px;
            cursor: pointer !important;
        }
        .current {
            background-color: darkorange;
            color: #fff;
        }
        .box .inner img{
            width: 490px;
        }
        .s{
            width: 490px;
            height: 80px;
            position: absolute;
            top: 150px;
            left:0;
            color: #1bb52b;
            display: none;

        }
        .s #left{
            width: 40px;
            height: 30px;
            text-align: center;
            float:left;
            font: 30px/30px "simsun";
            background-color: rgba(0,0,0,0.8);
        }
        .s #right{
            width: 40px;
            height: 30px;
            text-align: center;
            float:right;
            font: 30px/30px "simsun";
            background-color: rgba(0,0,0,0.8);
        }
    </style>
    <script>
        window.onload=function () {
            //:获取事件源
            var k=0;
            var inner =document.getElementsByClassName("inner")[0];
            var ul=inner.children[0];
            var spanArr=inner.children[1].children;
            var imgWidth=inner.offsetWidth;
            var s=inner.children[2];
            var sLeft =s.children[0];
            var sRight =s.children[1];
            var spanIndex= 0;
            var imgIndex=0;
console.log(sRight);

    //: 1:定时器每隔1s自动轮播
            var timer1=setInterval(autoPlay,3000);
            function autoPlay() {
                //span方块定时变色
                spanIndex++;
                if(spanIndex>spanArr.length-1){
                    spanIndex=0;
                }

                for(var i=0;i<spanArr.length;i++){
                    spanArr[i].className="";
                }
                spanArr[spanIndex].className="current";

                //ul左移,img右移
                imgIndex++;
                if(imgIndex>spanArr.length){
                    ul.style.left= 0;
                    imgIndex = 1;
                }
                animate(ul,-imgWidth*imgIndex);
            }

    //鼠标放在inner上清除大的定时器
            inner.onmouseover =function () {
                clearInterval(timer1);
                s.style.display="block";
            }
    //鼠标移开inner  加上定时器
            inner.onmouseout =function () {
                timer1=setInterval(autoPlay,1000);
                s.style.display="none";
            }

    // 2: span绑定事件,
            for(var i=0;i<spanArr.length;i++){
                spanArr[i].index=i;
                spanArr[i].onmouseover=function () {
                    clearInterval(timer1);
                    //span变色
                    for(var j=0;j<spanArr.length;j++){
                        spanArr[j].className="";
                    }
                    this.className="current";
                    spanIndex = imgIndex= this.index;
                    //ul移动
                    animate(ul,-imgWidth*this.index);
                }
            }

    //3: 两边的箭头加上事件..
           sLeft.onclick =function () {
               spanIndex--;
               //span变色
               for(var i=0;i<spanArr.length;i++){
                   spanArr[i].className="";
               }
               if(spanIndex<0){
                   spanIndex=spanArr.length-1;
               }
               spanArr[spanIndex].className="current";

               //ul移动
                imgIndex--;
               if(imgIndex<0){
                   //先移动到最后一张，然后key的值取之前一张的索引值，然后在向前移动
                   ul.style.left = -imgWidth*(spanArr.length)+"px";
                   imgIndex = spanArr.length-1;
               }
               animate(ul,-imgIndex*imgWidth);
           }

           sRight.onclick =function () {
               autoPlay();
           }





            function animate(ele,target) {
                clearInterval(ele.timer);
                var step=target>ele.offsetLeft?10:-10;
                ele.timer=setInterval(function () {

                    ele.style.left=ele.offsetLeft+step+"px";
                    var delta=target-ele.offsetLeft;
                    if(Math.abs(delta)<=Math.abs(step)){
                        ele.style.left=target+"px";
                        clearInterval(ele.timer);
                    }
                },10)
            }

        }

    </script>
</head>
<body>
<div class="box">
    <div class="inner">
        <ul>
            <li><img src="Student/1.jpg" alt=""/></li>
            <li><img src="Student/2.jpg" alt=""/></li>
            <li><img src="Student/3.jpg" alt=""/></li>
            <li><img src="Student/4.jpg" alt=""/></li>
            <li><img src="Student/1.jpg" alt=""/></li>

        </ul>
        <div class="square">
            <span class="current">1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
        </div>
        <div class="s">
            <span id="left"><</span>
            <span id="right">></span>
        </div>
    </div>
</div>
</body>
</html>

qq_34481114

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS原生轮播图代码

布局一个这样的轮播图难点在于图4与图1怎么实现无缝轮播,巧妙的是把图1插入图4后面 12341...代码如下html>html lang="en">head> meta charset="UTF-8"> title>Titletitle> style> *{ margin:0; padding:
复制链接

扫一扫