来一个自己写的轮播图代码

最新推荐文章于 2023-12-30 16:29:28 发布

e沐风尘

最新推荐文章于 2023-12-30 16:29:28 发布

阅读量702

点赞数 3

分类专栏： JavaScript 文章标签：轮播图

本文链接：https://blog.csdn.net/qq_43222297/article/details/90546050

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

最近写了一个轮播图给大家借鉴一下，话不多说，上干货

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>轮播图</title>
    <style>
      *{
          padding:0px;
          margin: 0px;
          list-style:none;
      }
      .start{
          position:relative;
          height: 250px;
          width: 400px;
          margin:100px auto 0px;
          border:2px solid black;
          overflow: hidden;
      }
      .start .start1{
             height:250px;
             width:2000px;
             position: absolute;
             left:0px;
             top:0px;
      }
      .start .start1 li{
          float:left;
          height:250px;
          width:400px;
      } 
      .start .start1 li img{
          width:100%;
          height: 100%;  
      }
      .start .btn {
            position: absolute;
            top: 50%;
            margin-top: -20px;
            width: 40px;
            height: 40px;
            color: #fff;
            background-color: #000;
            text-align: center;
            line-height: 40px;
            opacity: 0.1;
            cursor: pointer;
        }
        .start:hover .btn {
            opacity: 0.7;
        }

        .start .leftbtn {
            left: 15px;
        }

        .start .rightbtn {
            right: 15px;
        }
        .start .end {
            position: absolute;
            width: 100%;
            bottom: 15px;
            text-align: center;
        }
        .start .end span {
            display: inline-block;
            width: 15px;
            height: 6px;
            background-color: #ccc;
            margin-right: 10px;
            cursor: pointer;
        }

        .start .end .active {
            background-color: #f40;
        }
    </style>
</head>
<body>
    <div class="start">
       <ul class="start1">
         <li>
             <img src="./cat1.jpg"/>
         </li>
         <li>
            <img src="./cat2.jpg"/>
         </li>
         <li>
            <img src="./cat3.jpg"/>
         </li>
         <li>
            <img src="./cat4.jpg"/>                  **图片的话自己可以修改哈，还有位置。**
         </li>
         <li>
             <img src="./cat1.jpg"/>
        </li>
       </ul>
    <div class="btn leftbtn">&lt;</div>
    <div class="btn rightbtn">&gt;</div>
    <div class="end">
        <span class="active"></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
 </div>
 **这个外部引用的js文件下面会给出**
 <script src='./move.js'></script>
 <script>
      var timer = null;
        var sliderPage = document.getElementsByClassName('start1')[0];
        var moveWidth = sliderPage.children[0].offsetWidth;
        var num = sliderPage.children.length - 1;
        var leftBtn = document.getElementsByClassName('leftbtn')[0];
        var rightBtn = document.getElementsByClassName('rightbtn')[0];
        var oSpanArray = document.getElementsByClassName('end')[0].getElementsByTagName('span');
        var lock = true;
        var index = 0;

        leftBtn.onclick = function () {
            autoMove('right->left');
        }

        rightBtn.onclick = function () {
            autoMove('left->right');
        }
         **这个部分是按钮**

        for (var i = 0; i < oSpanArray.length; i++) {
            (function (myIndex) {
                oSpanArray[i].onclick = function () {
                   lock = false;
                   clearTimeout(timer);
                   index = myIndex;
                   startMove(sliderPage, {left: - index * moveWidth}, function () {     
                       lock = true;
                       timer = setTimeout(autoMove, 1500);
                       changeIndex(index);
                   })
                 
                }
            })(i) 
        }
        **上面这部分是让索引可以点击跳转图片**
        function autoMove (direction) {
           **加lock是为了让你点击按钮快速的时候不出错**
            if (lock) {            
                lock = false;      

                clearTimeout(timer);
                **默认方向为向左**
                if (!direction || direction == 'left->right') {
                    index++;
                    **startMove（）是一个外部的js文件的函数下面会给大家**
                    startMove(sliderPage, {left: sliderPage.offsetLeft - moveWidth}, function () {
                        if (sliderPage.offsetLeft == - num * moveWidth) {
                            index = 0;
                            sliderPage.style.left = '0px';
                        }
                        timer = setTimeout(autoMove, 1500);
                        lock = true;
                        changeIndex(index);
                    });
                }else if (direction == 'right->left') {
                    if (sliderPage.offsetLeft == 0) {
                        sliderPage.style.left = - num * moveWidth + 'px';
                        index = num;
                    }
                    index--;
                    startMove(sliderPage, {left: sliderPage.offsetLeft + moveWidth}, function () {
                        timer = setTimeout(autoMove, 1500);
                        lock = true;
                        changeIndex(index);
                    })
                }
            }
        }
**这个是让索引按第几个图片动**
        function changeIndex (_index) {
            for (var i = 0; i < oSpanArray.length; i++) {
                oSpanArray[i].className = '';
            }
            oSpanArray[_index].className = 'active';
        }
        timer = setTimeout(autoMove, 1500);  
 </script>
</body>
</html>


**这个是外部的js文件，是一个让图片运动的文件**
function getStyle (obj, attr) {
    if (obj.currentStyle) {
        return obj.currentStyle[attr];
    }else {
        return window.getComputedStyle(obj, false)[attr];
    }
}
    // object是dom（元素），data是对象，function是函数传方法   
function startMove (obj, data, func) {         
    clearInterval(obj.timer);
    var iSpeed;
    var iCur;
    var name;            
    startTimer = obj.timer = setInterval(function () {
        var bStop = true;
        for (var attr in data) {
            if (attr === 'opacity') {
                name = attr;
                iCur = parseFloat(getStyle(obj, attr)) * 100;
            }else {
                iCur = parseInt(getStyle(obj, attr));
            }
            iSpeed = ( data[attr] - iCur) / 8;

            if (iSpeed > 0) {
                iSpeed = Math.ceil(iSpeed);
            }else {
                iSpeed = Math.floor(iSpeed);
            }

            if (attr === 'opacity') {
                obj.style.opacity = ( iCur + iSpeed ) / 100; 
            }else {
                obj.style[attr] = iCur + iSpeed + 'px';
            }
            if ( Math.floor(Math.abs(data[attr] - iCur)) != 0 ) {
                bStop = false;
            }
        }
        if (bStop) {					
            clearInterval(obj.timer);
            if (name === 'opacity') {
                obj.style.opacity = data[name] / 100;
            }
            func();
        }
    },30);
}

希望大家可以点点关注，多多评论。谢谢啦！