实战轮播图：JS基础与CSS布局-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43817972/article/details/98070456

今天写了轮播图，主要的还是练手，为以后写大项目打好js基础。在写的时候呢，css花了我好大的力气，之前学过的许多属性都忘记了，好多都是查出来的。然后js部分刚开始写的时候基本上没有啥头绪，在看了人家写的开始的一点代码之后，基本上就有大致思路了。流程以及操作都是自己完成的，算是一个自主知识产权的作品吧！哈哈哈哈哈！
我将3部分的代码全部放在这，希望看到的大佬能够多多指点。
这是html部分

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="base.css">


</head>

<body>
    <div class="main">
        <ul>
            <li>
                <img src="img\1.jpg" alt="">
                <img src="img\2.jpg" alt="">
                <img src="img\3.jpg" alt="">
                <img src="img\4.jpg" alt="">
            </li>
        </ul>
        <div class="iconlist">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
          <a href="javascript:" id='left' class="arrow">&lt;</a>
        <a href="javascript:" id='right' class="arrow">&gt;</a>
    </div>
     <script src="base.js"></script>
</body>
</html>

这是css部分

* {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

.main {
    margin: 100px auto;
    width: 800px;
    height: 500px;
    background-color: red;
    overflow: hidden;
    position: relative;
}

.main:hover .arrow {
    display: block;
}

.main img {
    width: 100%;
    height: 500px;
    float: left;
}

.iconlist {
    width: 80px;
    height: 30px;
    display: flex;
    justify-content: space-around;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
}

.iconlist span {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #aaa;
    margin-top: 7px;
}

.arrow {
    position: absolute;
    display: block;
    width: 50px;
    height: 100px;
    background-color: rgba(0, 0, 0, 0.6);
    font-size: 50px;
    line-height: 100px;
    top: 250px;
    transform: translateY(-50%);
    color: #fff;
    display: none;
}

#right {
    right: 0;
}

这是js部分

 let imgs = document.getElementsByTagName('img');
 let iconlist = document.getElementsByClassName('iconlist')[0];
 let icons = iconlist.getElementsByTagName('span');
 let main = document.getElementsByClassName('main')[0];
 let arrows = document.getElementsByClassName('arrow');
 //定时器
 let m = 0;
 let timer;

 function setTime() {
     timer = setInterval(run, 3000);
 }
 //run函数
 setTime();

 function run() {
     control(m);
     m++;
     if (m >= imgs.length) {
         m = 0;
     }
 }

 function control(n) {
     for (let i = 0; i < imgs.length; i++) {
         imgs[i].style.display = 'none';
     }
     imgs[n].style.display = 'block';


 }

 //控制小icon切换图片
 function mouseimg() {
     iconlist.addEventListener('mouseover', function(e) { //事件委托
         var e = e || window.event;
         var tar = e.target || e.srcElement;
         console.log(tar)
         for (var i = 0; i < icons.length; i++) {
             icons[i].style.backgroundColor = '';
             if (tar == icons[i]) {
                 icons[i].style.backgroundColor = 'red';
                 for (let i = 0; i < imgs.length; i++) {
                     imgs[i].style.display = 'none';

                 }
                 imgs[i].style.display = 'block';
                 m = i; //在这里不保存m的值将会发生错误。底下需要m的值再次进行切换图片


             }
         }
     }, true);

 }
 mouseimg();

 //清除和重启定时器部分
 function stop() {
     clearInterval(timer);
 }
 main.addEventListener('mouseover', stop, false);

 function start() {
     setTime();
 }
 main.addEventListener('mouseout', start, false);


 //实现左右切换图片
 function Dragimg() {
     arrows[0].addEventListener('click', function() {
         m--;
         if (m <= 0) {
             m = 3;
         }
         control(m);
     })
     arrows[1].addEventListener('click', function() {
         m++;
         if (m >= 3) {
             m = 0;
         }
         control(m);
     })
 }
 Dragimg();

无限轮播图