轮播图案例

最新推荐文章于 2024-05-17 03:12:00 发布

她还会来吗

最新推荐文章于 2024-05-17 03:12:00 发布

阅读量474

点赞数

分类专栏： javaScript

本文链接：https://blog.csdn.net/m0_53895172/article/details/116355354

版权

javaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

案例效果

在这里插入图片描述

案例功能需求

鼠标经过轮播图,左右按钮显示,离开隐藏左右按钮
点击左右按钮一次,图片往左播放一张,以此类推,左侧按钮同理
图片播放的同时,下面小圆圈模块跟随一起变化
点击小圆圈，可以播放响应图片
鼠标不经过轮播图,.轮播图也会自动播放图片
鼠标通过,轮播图模块,自动播放停止

代码展示

我此处的代码全部是写在html中的,这是不提倡的,最好各写各的,封装在自己的模块中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    // 引用icon图标
    @font-face {
    font-family: 'icomoon';
    src:  url('../品优购/shopping/fonts/');
    src:  url('../品优购/shopping/fonts/icomoon.eot?slklzb#iefix') format('embedded-opentype'),
      url('../品优购/shopping/fonts/icomoon.ttf?slklzb') format('truetype'),
      url('../品优购/shopping/fonts/icomoon.woff?slklzb') format('woff'),
      url('../品优购/shopping/fonts/icomoon.svg?slklzb#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }
   *{
      margin: 0;
      padding: 0;
   }
      .slider{
          position: relative;
          overflow:hidden;
          width: 500px;
          height: 300px;
          margin: 100px auto;
      }
      .slider-bar{
          position: relative;
          width: 1500px;
          height: 300px;
      }
      ul li{
          list-style: none;
      }
      img{ 
          float: left;
          width: 500px;
          height: 300px;
      }
      .front span, .next span{
        position: absolute;
        display: none;
        font-family: 'icomoon';
        color: lightblue;
        font-size: 25px;
        cursor: pointer;
      } 
      .front span{
          top: 50%;
          left: 24px;
          content: '\ea44';
          transform: translateY(-50%);
      }
      .next span{
          top: 50%;
          right: 24px;
          content: '\ea42';
          transform: translateY(-50%);
      }
      .content{
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          bottom: 10px;
          /* background-color: pink; */
      }
     .current{
       background-color: lightblue!important;
      }
    .content ol li{
        display: inline-block;
        width: 8px;
        height: 8px;
        background-color: #fff;
        margin: 10px;
        border-radius: 4px;
    }
    </style>
    <script src="../品优购/shopping/js/animate.js"></script>
</head>
<body>
    <div class="slider">
        <div class="slider-bar">
            <ul>
                <li><img src="./img/02374b8e81521da118ef60fc481de725.jpeg" alt=""></li>
                <li><img src="./img/c07e7a7d592b9de571eb86b45f13531b.jpeg" alt=""></li>
                <li><img src="./img/d551f24bbd0adb87008c239830f3bb9a.jpeg" alt=""></li>
            </ul>
        </div>
        <div class="front">
            <span></span>
        </div>
        <div class="next">
            <span></span>
        </div>
        <div class="content">
            <ol>
            </ol>
        </div>
    </div>
</body>
<script>
    var front = document.querySelector('.front').children[0];
    var next = document.querySelector('.next').children[0];
    var slb = document.querySelector('.slider-bar');
    var slider = document.querySelector('.slider');
    var ul = slb.querySelector('ul');
    var ol = document.querySelector('ol');
    var focusWith = slider.offsetWidth;
    var timer = null;
    var flag = true;
    // 鼠标经过显示左右按钮
    slider.addEventListener('mouseover',function(){
        front.style.display = 'block';
        next.style.display = 'block';
        // 停止计时器
        clearInterval(timer)
    })
    // 鼠标离开隐藏按钮
    slider.addEventListener('mouseout',function(){
        front.style.display = 'none';
        next.style.display = 'none';
        // 开启定时器
        timer = setInterval(function(){
        // 手动调用点击事件
        next.click();
    },1000)
    })
    // 动态添加小圆圈
    for(var i = 0;i<ul.children.length;i++)
    {
        var li = document.createElement('li');
        // 记录当前小圆圈的索引号
        li.setAttribute('index',i);
        ol.appendChild(li);
        // 创建li的时候就给其绑定点击事件
         li.addEventListener('click',function(){
            for(var i = 0;i<ol.children.length;i++)
            {
                ol.children[i].className = '';
            }
            this.className = 'current';
            var index = this.getAttribute('index');
            // 当我们点击了某个小li,把当前li的索引号赋值给num
            num = index;
            // 当我们点击了某个小li,把当前li的索引号赋值给circle
            circle = index; 
            // 点击小圆圈,移动图片
            // 图片移动距离,就是小圆圈的索引号乘以图片的宽度 注意是负值
            animate(slb,-index*focusWith)
        })
    }
    // 把ol里面的第一个小圆点设置类名为current
    ol.children[0].className = 'current';
    // 克隆第一张图片,放到ul盒子最后面
    var first = ul.children[0].cloneNode(true);//加true表示深克隆,它本身及其子元素都会被复制。
    ul.appendChild(first);
    var num = 0;
    var circle = 0;
   // 点击左侧按钮,图片滚动一张   
    front.addEventListener('click',function(){
        if(flag)
        {
            flag= false;
            if(num == 0)
        {   num = ul.children.length-1;
            slb.style.left = -num*focusWith+'px';
        }
        num--;
        animate(slb,-num*focusWith,function(){
            flag = true;
        })
        circle--;
       if(circle < 0)
       {
           circle = ol.children.length-1;
       }
     // 给小圆圈添加样式   
       for(var i =0;i<ol.children.length;i++){
           ol.children[i].className = '';
       }
       ol.children[circle].className = 'current';
        }
       
    })
    // 点击右侧按钮,图片滚动一张
    next.addEventListener('click',function(){
        if(flag)
        {    // 关闭节流阀
            flag = false;
            num++; 
     // 如果走到了最后复制的一张图片，设置滚动盒子的left值为0 
       if(num==ul.children.length-1)
       {
         slb.style.left = 0;
         num=0;
       }
       animate(slb,-num*focusWith,function(){
           flag = true;
       })
       circle++;
    //    如果circle等于圆圈的个数,使circle重新赋值为0
       if(circle == ol.children.length)
       {
           circle = 0;
       }
       for(var i =0;i<ol.children.length;i++){
           ol.children[i].className = '';
       }
       ol.children[circle].className = 'current';
        }
     
    })
    // 自动播放
    var timer = setInterval(function(){
        // 手动调用点击事件
        next.click();
    },1000)
</script>
</html>

她还会来吗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
轮播图案例

案例效果案例功能需求鼠标经过轮播图,左右按钮显示,离开隐藏左右按钮点击左右按钮一次,图片往左播放一张,以此类推,左侧按钮同理图片播放的同时,下面小圆圈模块跟随一起变化点击小圆圈，可以播放响应图片鼠标不经过轮播图,.轮播图也会自动播放图片鼠标通过,轮播图模块,自动播放停止代码展示我此处的代码全部是写在html中的,这是不提倡的,最好各写各的,封装在自己的模块中<!DOCTYPE html><html lang="en"><head> &
复制链接

扫一扫