swiper

最新推荐文章于 2023-11-15 18:16:02 发布

Mr._Dang

最新推荐文章于 2023-11-15 18:16:02 发布

阅读量55

点赞数

分类专栏： JavaScript基础文章标签： html5 vue.js

本文链接：https://blog.csdn.net/m0_55832273/article/details/120407538

版权

JavaScript基础专栏收录该内容

30 篇文章 2 订阅

订阅专栏

<!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>Document</title>
  <link rel="stylesheet" href="css/swiper.css">
  <style>
    .swiper-container {
      width: 1200px;
      height: 675px;
      margin: 0 auto;
    }

    .swiper-container img {
      width: 100%;
    }

    .swiper-pagination-bullet-active {

      background-color: brown;
    }
  </style>
</head>

<body>
  <!-- 
    第一步：引入css和js。
    第二步：书写相应的HTML结构
    第三步：初始化Swiper 在js中new一个swiper对象。
   -->
  <div class="swiper-container box">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="img/b2.jpg" alt=""></div>
      <div class="swiper-slide"><img src="img/b3.jpg" alt=""></div>
      <div class="swiper-slide"><img src="img/b4.jpg" alt=""></div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>

  </div>

  <script src="js/swiper.js"></script>
  <script>
    // 第一个参数：在哪个div下创建轮播图
    // 第二个参数：一个对象，包含配置信息
    var mySwiper = new Swiper('.swiper-container', {
      // direction: 'vertical', // 垂直切换选项
      loop: true, // 循环模式选项
      autoplay: {
        delay: 1000,//1秒切换一次
      },

      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
      },

      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },

      // // 如果需要滚动条
      scrollbar: {
        el: '.swiper-scrollbar',
      },
      effect: 'cube',
      spaceBetween: 10,
      slidesPerView: 4,
      watchSlidesVisibility: true,//防止不可点击
    })
    var thumbsSwiper = new Swiper('#thumbs', {
      spaceBetween: 10,
      thumbs: {
        swiper: thumbsSwiper,
      }
    })
    var gallerySwiper = new Swiper('#gallery', {
      spaceBetween: 10,
      thumbs: {
        swiper: thumbsSwiper,
      }
    })

  </script>
</body>

</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>练习</title>
    <style>
        .lb-container {
            width: 800px;
            height: 500px;
            background: yellowgreen;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .img-content {
            /* position: absolute;
            top:0;
            left:0; */
            /* width:600% ; */
        }

        .img-content img {
            width: 800px;
            height: 500px;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transition: all 1s;
        }

        .left,
        .right {
            width: 30px;
            height: 30px;
            position: absolute;
            top: 50%;
            background: whitesmoke;
            display: none;
            text-align: center;
            line-height: 30px;
            cursor: pointer;
        }

        .left {
            left: 0;
        }

        .right {
            right: 0;
        }

        ul {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
        }

        ul li {
            width: 10px;
            height: 10px;
            list-style: none;
            float: left;
            margin: 0 5px;
            border-radius: 50%;
            background: #fff;
        }

        .lb-container .action {
            background: red;
            opacity: 1;
        }
    </style>
</head>

<body>
    <div class="lb-container">
        <div class="img-content">
            <img src="./img/01.jpg" alt="">
            <img src="./img/02.jpg" alt="">
            <img src="./img/04.jpg" alt="">
            <img src="./img/06.jpg" alt="">
        </div>

        <!-- 导航按钮 -->
        <span class="left">&lt;--</span>
        <span class="right">--&gt;</span>

        <!-- 分页器 -->
        <ul></ul>
    </div>
    <script>
        var lbContainer = document.querySelector('.lb-container')
        // 获取左右按钮
        var left = document.querySelector('.left')
        var right = document.querySelector('.right')
        var imgContent = document.querySelector('.img-content')

        var imgAll = imgContent.children  // 获取到指定元素内的子元素节点
        // var imgAll = document.querySelectorAll('.img-content img')
        var ulBox = document.querySelector('ul')
        // 循环遍历imgAll数组
        var str = ''
        for (var i = 0; i < imgAll.length; i++) {
            str += '<li></li>'
        }
        ulBox.innerHTML = str;
        // 获取到所有小圆点
        //  var liAll = document.querySelector('ul li')
        var liAll = ulBox.children;
        // 进入页面时选中第一个小圆点和第一张图片
        liAll[0].classList.add('action')
        imgAll[0].classList.add('action')
        // 遍历所有小圆点，给每一个小圆点添加点击事件
        for (var j = 0; j <= liAll.length - 1; j++) {
            // 循环的时候给每一个小圆点绑定一个自定义属性，记录小圆点的索引
            liAll[j].dataset['index'] = j
            // 给每一个小圆点添加点击事件
            liAll[j].onclick = function () {
                for (var k = 0; k <= liAll.length - 1; k++) {
                    // 排它思想，先将所有小圆点的选中状态删除
                    liAll[k].classList.remove('action')
                    // 先将所有的图片上的选中类全清除
                    imgAll[k].classList.remove('action')
                }
                // 点击到哪一个小圆点，就给当前的小圆点选中状态
                this.classList.add('action')
                num = this.dataset['index']
                imgAll[this.dataset['index']].classList.add('action')
            }
        }

        // 当鼠标移入轮播图的时候，显示left和right
        lbContainer.onmouseover = function () {
            left.style.display = 'block'
            right.style.display = 'block'
            // 清除自动播放
            clearInterval(timer)
        }
        lbContainer.onmouseout = function () {
            left.style.display = 'none'
            right.style.display = 'none'
            // 继续自动播放
            timer = setInterval(() => {
                right.click()
            }, 1000);
        }

        var num = 0
        // 点击right，切换下一张图片
        var flag = true
        right.onclick = function () {
            if (flag) {
                flag = false
                num++
                if (num == imgAll.length) {
                    num = 0
                }
                for (var l = 0; l <= liAll.length - 1; l++) {
                    // 排他思想，先将所有小圆点的选中状态删除
                    liAll[l].classList.remove('action')
                    // 先将所有的图片上的选中类全清除
                    imgAll[l].classList.remove('action')
                }
                imgAll[num].classList.add('action')
                imgAll[num].addEventListener('transitionend', function () {
                    // console.log('过度结束了',this);
                    flag = true
                })
                liAll[num].classList.add('action')
            }
        }
        // 点击left.切换上一张图片
        left.onclick = function () {
            num--
            if (num < 0) {
                num = imgAll.length - 1
            }
            for (var m = 0; m <= liAll.length - 1; m++) {
                //排它思想，先将所有小圆点的选中状态删除
                liAll[m].classList.remove('action')
                //先将所有的图片上的选中类全清除
                imgAll[m].classList.remove('action')
            }
            imgAll[num].classList.add('action')
            liAll[num].classList.add('action')
        }

        //---自动轮播
        var timer = setInterval(function () {
            right.click();
        }, 1000)
    </script>
</body>

</html>

Mr._Dang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
swiper

<!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>Document&l
复制链接

扫一扫