JavaScript
搜索
分类

JS实现简单图片轮播效果

作者：一纸岚风 时间：2024-11-21 06:05:51　

本文实例为大家分享了JS实现简单图片轮播效果的具体代码，供大家参考，具体内容如下

实现效果

JS实现简单图片轮播效果

  • 左右按钮可点击左右移动显示图片进行无缝滚动

  • 下面的小圆圈点击可跳到对应的图片索引

  • 不进行上述操作时，图片自动轮播

html源码


<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Carousel chart</title>
   <link rel="stylesheet" href="./style.css" >
   <script src="./index.js"></script>
   <script src="./animate.js"></script>
</head>

<body>
   <div class="carousel_box" id="carousel-box">
       <a href="javascript:;" class="arrow-l">
           < </a>
               <a href="javascript:;" class="arrow-r"> > </a>
               <ul class="move">
                   <li><img src="./images/xuezhong_1.jpg" alt=""></li>
                   <li><img src="./images/guimizhizhu_2.jpg" alt=""></li>
                   <li><img src="./images/jianlai_3.jpg" alt=""></li>
                   <li><img src="./images/yichang_4.jpg" alt=""></li>
               </ul>
               <ol class="circle">
               </ol>
   </div>
</body>

</html>

一个大的div盒子里面，两个左右悬浮于中间的按钮，四张图片，一行相对于下面的小圆圈

CSS源码


*{
   padding: 0;
   margin: 0;
}

li {
   list-style-type: none;
}

#carousel-box {
   position: relative;
   width: 700px;
   height: 300px;
   background-color: pink;
   margin: 100px auto;
   overflow: hidden;
}

.arrow-l,.arrow-r {
   display: none;
   position:absolute;
   width: 24px;
   height: 40px;
   top: 50％;
   margin-top: -20px;
   background: rgba(0, 0, 0, 0.3);
   text-align:center;
   line-height: 40px;
   color: #fff;
   font-size: 18px;
   font-family: 'icomoon';
   z-index: 3;
}
.arrow-r {
   right: 0;
}

#carousel-box img{
   width: 700px;
   height: 300px;
}

#carousel-box ul {
   position:absolute;
   width: 1000％;
}

#carousel-box ul li {
   float: left;
}

.circle {
   position: absolute;
   bottom: 10px;
   right: 10px;
}

.circle li {
   float: left;
   width: 8px;
   height: 8px;
   margin: 0 5px;
   border: 2px solid rgba(255, 255, 255, 0.5);
   border-radius: 50％;
   cursor: pointer;
   z-index: 9999;
}

.current {
   background-color: pink;
}

JS源码

animate.js：在水平平面实现左右移动的函数


function animate(obj, target, callback) {
   clearInterval(obj.timer);
   obj.timer = setInterval(function () {
       /* 判断正负，小数取大还是取小 */
       var step = (target - obj.offsetLeft) / 10;
       step = step > 0 ? Math.ceil(step) : Math.floor(step);

if (obj.offsetLeft == target) {
           clearInterval(obj.timer);
           callback && callback();
       }
       obj.style.left = obj.offsetLeft + step + 'px';
   }, 15);
}

index.js


window.addEventListener('load', function () {
   var carousel = document.querySelector('.carousel_box');
   var ul = document.querySelector('.move');
   var ol = document.querySelector('.circle');
   var carcouselWidth = carousel.offsetWidth;
   var arrow_l = document.querySelector('.arrow-l');
   var arrow_r = document.querySelector('.arrow-r');

carousel.addEventListener('mouseenter', function () {
       arrow_r.style.display = 'block';
       arrow_l.style.display = 'block';
       clearInterval(timer);
       timer = null; // 清除定时器变量
   })

carousel.addEventListener('mouseleave', function () {
       arrow_r.style.display = 'none';
       arrow_l.style.display = 'none';
       timer = setInterval(function () {
           arrow_r.click();
       }, 2000);
   })
   var num = 0;
   var circle = 0;

// 根据图片数量生成相对应的小圆圈
   for (var i = 0; i < ul.children.length; i++) {
       var li = document.createElement('li');
       li.setAttribute('index', i);
       ol.appendChild(li);

li.addEventListener('click', function () {
           for (var i = 0; i < ol.children.length; i++) {
               ol.children[i].className = '';
           }
           this.className = 'current';
           var n = this.getAttribute('index');
           num = n;
           circle = n;
           animate(ul, -n * carcouselWidth);
           console.log(n);
       })
   }

ol.children[0].className = 'current';
   var first = ul.children[0].cloneNode(true);
   ul.appendChild(first);

var flag = true;

/* function circleChange() {
       for (var i = 0; i < ol.children.length; i++) {
           ol.children[i].className = '';
       }
       ol.children[circle].className = 'current';
   } */

arrow_r.addEventListener('click', function () {

if (flag) {
           flag = false;
           if (num == ul.children.length - 1) {
               ul.style.left = 0;
               num = 0;
           }
           num++;
           animate(ul, -num * carcouselWidth, function () {
               flag = true;
           });
       }

circle++;
       if (circle == ol.children.length) {
           circle = 0;
       }

circleChange();
   })

arrow_l.addEventListener('click', function () {
       if (flag) {
           flag = false;
           if (num == 0) {
               num = ul.children.length - 1;
               ul.style.left = -num * carcouselWidth + 'px';

}
           num--;
           animate(ul, -num * carcouselWidth, function () {
               flag = true;
           });

circle--;
           circle = circle < 0 ? ol.children.length - 1 : circle;
           // 调用函数
           circleChange();
       }
   });

function circleChange() {

for (var i = 0; i < ol.children.length; i++) {
           ol.children[i].className = '';
       }

ol.children[circle].className = 'current';
   }

var timer = setInterval(function () {

arrow_r.click();
   }, 2000);

心得：在js实现功能中，如何根据图片数量生成小圆圈并能无缝滚动需要重点注意。
未解决的bug：多次快速点击小圆圈跳转后，可能会导致小圈圈与图片索引位置错乱，同样点击左右按钮也有可能出现类似问题。

来源：https://blog.csdn.net/weixin_44356372/article/details/115752022

标签：js,图片轮播
0
投稿

猜你喜欢

  • JS的get和set使用示例

    2024-05-13 09:35:45

  • ASP ,IP地址分段计算

    2008-04-13 06:55:00

  • Golang 如何判断数组某个元素是否存在 (isset)

    2024-02-04 17:11:46

  • PHP Laravel门面的实现原理详解

    2023-05-25 06:42:36

  • 详解PyTorch预定义数据集类datasets.ImageFolder使用方法

    2022-01-30 20:15:07

  • python 绘制场景热力图的示例

    2022-01-22 07:03:21

  • 纯ASP结合VML生成完美图-折线图

    2010-05-11 16:50:00

  • js模拟电脑选择多文件夹效果_选区代码

    2024-05-10 14:08:08

  • Python清空文件并替换内容的实例

    2023-03-22 04:09:43

  • Golang之casbin权限管理的实现

    2024-05-09 14:54:28

  • 用JavaScript实现PHP的urlencode与urldecode函数

    2023-11-23 08:18:14

  • AJAX使用get与post模式的区别分析

    2024-04-29 13:58:39

  • Python中WebService客户端接口调用及身份验证的问题

    2021-12-22 06:01:05

  • NumPy统计函数的实现方法

    2021-10-15 22:02:27

  • Linux上MySql远程备份方案

    2010-11-25 17:23:00

  • 实例讲解MySQL 慢查询

    2024-01-20 16:25:56

  • Python递归实现打印多重列表代码

    2023-05-28 10:38:32

  • Python函数装饰器的使用详解

    2023-04-30 14:47:24

  • PHP实现设计模式中的抽象工厂模式详解

    2024-06-05 09:39:58

  • Python脚本如何在bilibili中查找弹幕发送者

    2021-05-18 21:46:15
    • asp之家 网络编程 m.aspxhome.com