• js轮播图有，移入移出事件，左右滑动事件功能

    效果图：

    具体代码：

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8" />
    5. <meta name="viewport" content="width=device-width, initial-scale=1">
    6. <title></title>
    7. </head>
    8. <style>
    9.     * {
    10.         margin: 0;
    11.         padding: 0;
    12.     }
    13.  
    14.     .banner {
    15.         width: 100%;
    16.         height: 500px;
    17.         overflow: hidden;
    18.         position: relative;
    19.     }
    20.  
    21.     .tow {
    22.         width: 600%;
    23.         height: 500px;
    24.         margin-left:0%;
    25.         display: flex;
    26.         display: relative;
    27.         /* transition: 1s all ; */
    28.     }
    29.  
    30.     .tow img {
    31.         width: 100%;
    32.         height: 100%;
    33.     }
    34.  
    35.     .five {
    36.         position: absolute;
    37.         bottom: 0px;
    38.         left: 50%;
    39.         transform: translateX(-50%);
    40.         display: flex;
    41.         bottom: 0;
    42.         border: 1px solid lightgray;
    43.  
    44.     }
    45.  
    46.     .five span {
    47.         width: 15px;
    48.         height: 15px;
    49.         display: block;
    50.         background-color: antiquewhite;
    51.         border-radius: 50%;
    52.         display: flex;
    53.  
    54.  
    55.  
    56.     }
    57.  
    58.     .but {
    59.         width: 100%;
    60.         height: 30px;
    61.         position: absolute;
    62.         border-radius: 50%;
    63.         top: 37%;
    64.  
    65.         display: flex;
    66.         justify-content: space-between;
    67.  
    68.     }
    69.  
    70.     .but span {
    71.         display: none;
    72.         background-color: aqua;
    73.     }
    74.  
    75.     .banner:hover .but span {
    76.         display: block;
    77.     }
    78. </style>
    79. <body>
    80. <div class="banner">
    81.     <div class="tow">
    82.         <img src="img/ou.jpg" alt="" class="mlShow">
    83.         <img src="img/oui.jpg" alt="">
    84.         <img src="img/tu.jpg" alt="">
    85.         <img src="img/opp.jpg" alt="">
    86. 		<img src="img/iu.jpg" alt="" />
    87. 		<img src="img/yu.jpg" alt="" />
    88.     </div>
    89.     <div class="five"></div>
    90.     <div class="but">
    91.         <span>&lt;</span>
    92.         <span class="one">&gt;</span>
    93.     </div>
    94. </div>
    95. <script>
    96.     let banner = document.getElementsByClassName('banner')[0];//获取所有内容的标签
    97.     let tow = document.getElementsByClassName('tow')[0];//获取所有图片的标签
    98.     let img = tow.children; //获取图片子元素
    99.     let imgWidth = img[0].offsetWidth;//图片宽度自适应
    100.     let five = document.getElementsByClassName('five')[0];//获取所有小圆点的标签
    101.     let but = document.getElementsByClassName('but')[0];//获取所有按钮的标签
    102.     let butItem = but.children;//获取按钮子元素
    103.     let index = 0;//初始下标为零
    104.     let times = setInterval(scrolls, 2000); //设置定时器
    105.  
    106.     // 动态生成小圆点
    107.     for (let i = 0; i < img.length; i++) {
    108.         let dot = document.createElement('span'); // 创建一个 span 元素
    109.         dot.classList.add('dot'); // 添加 dot 类名
    110.         five.appendChild(dot); // 将创建的小圆点添加到五个按钮的容器中
    111.     }
    112.  
    113.     function scrolls() {  //设置轮播函数
    114.         console.log(index);
    115.         if (index < img.length - 1) {//判断当前页的长度，如果小于img图片的长度
    116.             index++;  //自增至最后一张图片
    117.             tow.style.marginLeft = -index * imgWidth + "px";
    118.         } else { //不小于3变为0第一张
    119.             index=0  //跳转至轮播初始位置
    120.             tow.style.marginLeft = -index * imgWidth + "px";
    121.         }
    122.         console.log(index);
    123.         // 修改小圆点颜色
    124.         let span = five.children;
    125.         for (let i = 0; i < span.length; i++) {//循环小圆点
    126.             span[i].style.backgroundColor = "rgba(255, 255, 255, 0.6)"; //将其背景颜色变为白色
    127.         }
    128.         span[index].style.backgroundColor = "rgba(0, 0, 255, 0.6)";//图片轮播到第几张时把对应的小圆点变为蓝色
    129.     }
    130.  
    131.     //鼠标移入
    132.     banner.onmouseover = function() {
    133.         clearInterval(times); //清除定时器
    134.     }
    135.  
    136.     // 鼠标移出
    137.     banner.onmouseout = function() {
    138.         times = setInterval(scrolls, 2000);//开启定时器
    139.         butItem[0].onclick = function() {//按钮绑定点击事件
    140.             if (index > 0) {
    141.                 index--;
    142.             } else if(index==0) {
    143.  
    144.                 index = img.length - 1; //随后一张图片
    145.             }
    146.             tow.style.marginLeft = -index * imgWidth + "px";
    147.             for (let i = 0; i < span.length; i++) {
    148.                 span[i].style.backgroundColor = "rgba(255, 255, 255, 0.6)";
    149.             }
    150.             span[index].style.backgroundColor = 'rgba(0, 0, 255, 0.6)';//同上
    151.         }
    152.     }
    153.     butItem[1].onclick = scrolls; //向右点击调用轮播函数
    154. </script>
    155. </body>
    156. </html>

    具体的轮播可以根据需求进行调整；希望可以帮到大家；

  • 相关阅读:
    为什么要学爬虫？
    JSTL标签库和EL表达式
    测试需求平台2-搭建前后端分离github托管项目
    【licheePi-dock】驱动一个OLED-SSD1306
    【systemd】简单的服务创建练习
    程序员的自我修养-链接、装载与库_笔记_第2章：编译和链接
    【NLP入门教程】十八、支持向量机（Support Vector Machines）
    Pthon中的文件处理
    Java实现Excel的导入以及导出，极其简单
    react 项目搭建步骤
  • 原文地址：https://blog.csdn.net/tianxianghuiwei/article/details/139669706