最简单的轮播实现（不需要图片资源的项目）

最新推荐文章于 2022-08-04 18:09:55 发布

叶川飞流

最新推荐文章于 2022-08-04 18:09:55 发布

阅读量361

点赞数

本文链接：https://blog.csdn.net/weixin_41033048/article/details/92798305

版权

这里最主要的就是index的操作和time的设置了，index负责第几张图片进行展示，这个index关联着左右按钮和右下角的小圆点的操作。time用来设置定时轮播的功能，但是我们进行按钮和小圆点操作的时候，我们不能让图片继续轮播，而需要让他们先暂停下来，所以要在点击按钮事件时需要重置time的值，time重新计数，如果无操作，则再次进入轮播时间。

html和javaScript代码

<!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>
    <link rel="stylesheet" href="./css/carousel.css">
    <link rel="stylesheet" href="./css/main.css">
    <script src="./jquery-2.1.1.min.js"></script>
</head>
<body>
    <!-- 96*77 -->
    <div class="wrap">
        <ul class="carousel_ul">
            <!-- <li class="carousel_li"><img src="./img/1.png" alt=""></li>
            <li class="carousel_li"><img src="./img/2.png" alt=""></li>
            <li class="carousel_li"><img src="./img/3.png" alt=""></li>
            <li class="carousel_li"><img src="./img/4.png" alt=""></li> -->
            <li class="carousel_li active">0</li>
            <li class="carousel_li">1</li>
            <li class="carousel_li">2</li>
            <li class="carousel_li">3</li>
        </ul>
        <button id="preBtn" class="btn btn1"><</button>
        <button id="nextBtn" class="btn btn2">></button>
        <ul class="points">
            <li class="point active" data-point="0"></li>
            <li class="point" data-point="1"></li>
            <li class="point" data-point="2"></li>
            <li class="point" data-point="3"></li>
        </ul>
    </div>
</body>

<script>
     var carousel_li = document.getElementsByClassName("carousel_li");
     var preBtn = document.getElementById("preBtn");
     var nextBtn = document.getElementById("nextBtn");

     var point = document.getElementsByClassName("point");
     
     var time = 0;
     
     var index = 0 ;
     /* 清除定时器 START */
     var clearActive = function(){
         for(var i = 0; i<carousel_li.length;i++){
             carousel_li[i].className = 'carousel_li';
             point[i].className = 'point';
         }
     }
     /* 清除定时器 END */

     /* 展示图片 START */
     var show = function(){
        clearActive();
        carousel_li[index].className = 'carousel_li active';
        point[index].className = 'point active';
     }
     /* 展示图片 END */

     /* 左右移一张 START */
     var goPre = function(){
         if(index == 0){
             index = 3;
         }
         else{
             index --;
         }
         console.log(index);
         show();
     }

     var goNext = function(){
         if(index == 3){
             index = 0;
         }
         else{
             index ++;
         }
         console.log(index);
         show();
     }

     /* 左右移一张 END */

     /* 点击事件 START */
     preBtn.addEventListener('click',function(){
        // index++;
        goPre();
        time = 0;
     });

     nextBtn.addEventListener('click',function(){
        // index++;
        goNext();
        
        time = 0;
     });


     /* 小圆点点击事件 START*/
     for(var j= 0;j<point.length;j++){
        point[j].addEventListener('click',function(){
            index = this.getAttribute('data-point');
            show();
                
            time = 0;
        });
     }
     /* 小圆点点击事件 END*/

     /* 点击事件 END */


     /* 定时轮播 START */
     setInterval(() => {
         if(time == 20){
             goNext();
             time = 0;
         }
         else{
             time++;
         }
         console.log(time);
     }, 100);
     /* 定时轮播 END   */
</script>


</html>

css代码

.wrap { height: 307px; width: 409px; margin: 200px auto; position: relative; }

.wrap .carousel_ul { height: 80px; }

.wrap .carousel_ul .carousel_li { font-size: 34px; position: absolute; height: 307px; width: 409px; list-style: none; color: white; opacity: 0.5; }

.wrap .carousel_ul .carousel_li img { height: 77px; width: auto; }

.wrap .carousel_ul .carousel_li:nth-child(1) { background: red; }

.wrap .carousel_ul .carousel_li:nth-child(2) { background: green; }

.wrap .carousel_ul .carousel_li:nth-child(3) { background: yellow; }

.wrap .carousel_ul .carousel_li:nth-child(4) { background: pink; }

.wrap .carousel_ul .carousel_li.active { opacity: 1; z-index: 20; transition: all .8s; }

.wrap .btn { position: absolute; top: 120px; z-index: 40; outline: 0px; border: 0px; color: rgba(0, 0, 0, 0.4); background: transparent; width: 32px; height: 60px; font-size: 25px; cursor: pointer; }

.wrap .btn:hover { position: absolute; top: 120px; z-index: 40; outline: 0px; border: 0px; background: rgba(0, 0, 0, 0.4); color: white; width: 32px; height: 60px; font-size: 25px; transition: all .8s; }

.wrap .btn1 { left: 0; }

.wrap .btn2 { right: 0; }

.wrap .points { position: absolute; bottom: 2px; z-index: 1000; right: 3px; }

.wrap .points .point { float: left; width: 10px; height: 10px; background: rgba(0, 0, 0, 0.4); border: 2px solid gray; border-radius: 100%; list-style: none; box-sizing: border-box; margin-left: 3px; cursor: pointer; }

.wrap .points .point.active { opacity: 1; z-index: 20; transition: all .5s; border: .9px solid gray; background: white; box-sizing: border-box; }

* { margin: 0; padding: 0; }

叶川飞流

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
最简单的轮播实现（不需要图片资源的项目）

html和javaScript代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <...
复制链接

扫一扫