运动(下)

陈海超
98 阅读1分钟

运动（下）

轮播图

轮播图的实现形式

位置变化的轮播
步骤
  • 准备一个显示内容的盒子（溢出隐藏），准备一个装内容的盒子（多个内容的 每个内容的大小就是其对应的显示盒子的大小）
  • 控制对应的装内容的盒子在显示内容的盒子内移动（每次移动的区间就是一个显示内容盒子的大小）
  • 实现无缝主要是通过将第一张图放在最后（当你从最后一张切换到添加的这个第一张时 直接更改当前的位置为第一张的位置）
<!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>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .showBox{
      width: 500px;
      height: 300px;
      /* border: 1px solid #000; */
      margin:  200px auto;
      position: relative;
      overflow: hidden;
    }
    .content{
      width: 600%; 
      height: 100%;
      display: flex;
      flex-direction: row;
      position: absolute;
      list-style: none;
    }
    .content>li{
      width: 500px;
      height: 300px;
    }
  </style>
</head>
<body>
  <!-- 显示的盒子 -->
  <div class="showBox">
    <!-- 内容的盒子 -->
    <ul class="content"></ul>
  </div>
  <script type="module">
    import {animation} from "./move.js"
    //无缝
    var colors = ['red','blue','pink','skyblue','black']
    //获取元素
    var showBox = document.querySelector('.showBox')
    var content = document.querySelector('.content')
    //根据对应的数组声明li
    function init(){
      //给ul添加内容 li设置对应的背景颜色
      content.innerHTML = colors.reduce((prev,v)=>{
        return prev + `<li style='background:${v}'></li>`
      },'')
      //在后面再追加第一张
      content.appendChild(content.firstElementChild.cloneNode(true))
    }
    init()
    //自动轮播
    var i = 0
    setInterval(()=>{
      i++
      //到达最后一张
      if(i > colors.length){
        i = 1
        //直接更改为第一张
        content.style.left = 0
      }
      //切换对应内容盒子的位置
      animation(content,{
        left:showBox.clientWidth * -1 * i 
      })
    },2000)
  </script>
</body>
</html>
透明度切换的轮播
  • 将所有的图片全部定位在一个位置 （初始全部为透明 只有第一张不透明）
  • 切换其透明度 （将上一个透明度为0 当前为1）
<!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>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            .showBox {
                width: 700px;
                height: 300px;
                /* border: 1px solid #000; */
                margin: 200px auto;
                position: relative;
                overflow: hidden;
            }

            .content {
                width: 600%;
                height: 100%;
                display: flex;
                flex-direction: row;
                position: absolute;
                list-style: none;
            }

            .content>li {
                width: 700px;
                height: 300px;
                /* 将所有的li叠在一块 */
                position: absolute;
                left: 0;
                top: 0;
                opacity: 0;
            }
            .content>li img{
                width: 100%;
                height: 100%;
            }
        </style>
    </head>

    <body>
        <!-- 显示的盒子 -->
        <div class="showBox">
            <!-- 内容的盒子 -->
            <ul class="content">
            </ul>
        </div>
        <script type="module">
            import {animation} from "./move.js"
            //准备图片数组
            var imgs = ['./images/1.jpg','./images/2.jpg','./images/3.jpg','./images/4.jpg','./images/5.jpg']
            //获取元素
            var content = document.querySelector('.content')
            function init(){
                //根据图片数量生成li
                content.innerHTML = imgs.reduce((prev,v)=>{
                    return prev + `
<li><img src="${v}" alt=""></li>
`
                },'')
                //将第一个li的透明度为1
                content.firstElementChild.style.opacity = 1
            }
            init()
            //动画切换
            var i = 0
            setInterval(()=>{
                //变化透明度
                //当前透明度变为0
                animation(content.children[i],{
                    opacity:0
                })
                i++
                //超出下标变成第一个
                if(i >= imgs.length){
                    i = 0
                }
                //下一个透明度变为1
                animation(content.children[i],{
                    opacity:1
                })
            },2000)
        </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>Document</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .showBox{
                width: 700px;
                height: 300px;
                margin:  200px auto;
                overflow: hidden;
            }
            img{
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <body>
        <div class="showBox">
            <img src="./images/1.jpg" alt="">
        </div>
        <script>
            //准备图片数组
            var imgs = ['./images/1.jpg','./images/2.jpg','./images/3.jpg','./images/4.jpg','./images/5.jpg']
            //定时器控制值变化
            var i = 0
            setInterval(() => {
                i++
                if(i >= imgs.length){
                    i = 0
                }
                //更改src的地址
                document.querySelector('img').src = imgs[i]
            }, 2000);
        </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>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            .showBox {
                width: 700px;
                height: 300px;
                margin: 200px auto;
                position: relative;
                overflow: hidden;
            }

            .content {
                width: 600%;
                height: 100%;
                display: flex;
                flex-direction: row;
                position: absolute;
                list-style: none;
            }

            .content>li {
                width: 700px;
                height: 300px;
            }

            .content>li img {
                width: 100%;
                height: 100%;
            }

            .point {
                display: flex;
                flex-direction: row;
                position: absolute;
                bottom: 20px;
                right: 50px;
                list-style: none;
            }

            .cir {
                width: 20px;
                height: 20px;
                background-color: #aaa;
                border-radius: 50%;
                margin: 5px;
            }

            .selected {
                background-color: #eee;
                box-shadow: 0 0 5px #333;
            }

            .arrow {
                width: 100%;
                height: 70px;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                opacity: 0;
            }

            .arrow img {
                width: 60px;
                height: 70px;
                position: absolute;
            }

            .prev {
                left: 0;
            }

            .next {
                right: 0;
            }
        </style>
    </head>

    <body>
        <!-- 显示的盒子 -->
        <div class="showBox">
            <!-- 内容的盒子 -->
            <ul class="content"></ul>
            <!-- 焦点盒子 -->
            <ol class="point"></ol>
            <!-- 前后箭头 -->
            <div class="arrow">
                <img src="./images/prev.png" class="prev" alt="">
                <img src="./images/next.png" class="next" alt="">
            </div>
        </div>
        <script type="module">
            import {animation} from "./move.js"
            //无缝
            var imgs = ['./images/1.jpg','./images/2.jpg','./images/3.jpg','./images/4.jpg','./images/5.jpg']
            //获取元素
            var showBox = document.querySelector('.showBox')
            var content = document.querySelector('.content')
            var point = document.querySelector('.point')
            var arrow = document.querySelector('.arrow')

            //切换的定时器
            var timer
            //根据对应的数组声明li
            function init(){
                //根据图片数量生成li
                content.innerHTML = imgs.reduce((prev,v)=>{
                    return prev + `
<li><img src="${v}" alt=""></li>
`
                },'')
                //在后面再追加第一张
                content.appendChild(content.firstElementChild.cloneNode(true))
                //根据对应的图片个数生成焦点个数
                point.innerHTML = imgs.reduce((prev,v)=>{
                    return prev + `
<li class="cir"></li>
`
                },'')
                //给第一个添加选中效果
                point.firstElementChild.classList.add('selected')
                //处理移入移出的操作
                showBox.onmouseenter = ()=>{
                    //显示箭头
                    arrow.style.opacity = 1
                    //清除定时器
                    clearInterval(timer)
                }
                showBox.onmouseleave = ()=>{
                    //隐藏箭头
                    arrow.style.opacity = 0
                    //重新开启
                    autoMove()
                }
                //处理点击上一个和下一个
                Array.from(arrow.children).forEach((v,i)=>{
                    v.onclick = ()=>{
                        move(!i)
                    }
                })
            }
            init()
            //自动轮播
            var i = 0
            autoMove()
            //自动轮播的函数
            function autoMove(){
                timer =  setInterval(()=>{
                    //调用右移的方法
                    move()
                },2000)
            }
            //移动的方法 flag为true左移 false就右移
            function move(flag){
                if(!flag){ //往右移
                    i++
                }else{ //往左移
                    i--
                }
                //到达最后一张  0 1 2 3 4 
                if(i > imgs.length){
                    i = 1
                    //直接更改为第一张
                    content.style.left = 0
                }
                //判断最小值 5 1 2 3 4
                if(i < 0){
                    i = imgs.length - 1
                    //直接更改为拷贝的第一张
                    content.style.left = showBox.offsetWidth * -1 * imgs.length + 'px'
                }
                //调用切换圆点的方法
                togglePoint()
                //切换对应内容盒子的位置
                animation(content,{
                    left:showBox.offsetWidth * -1 * i 
                })
            }
            //切换焦点
            function togglePoint(){
                //选中对应的焦点
                //排他思想 其他的清除 自己添加
                Array.from(point.children).forEach(v=>{
                    v.classList.remove('selected')
                })
                //0 1 2 3 4 5   -->   0 1 2 3 4   用i的值取余原本图片数组的个数
                point.children[i%imgs.length].classList.add('selected')
            }
        </script>
    </body>

</html>

第三方插件

swiper

官方网站

swiper是一个用于制作轮播图的插件（包含对应的js以及css）

var swiper = new Swiper('.swiper-container', { //当前需要轮播的盒子
    pagination: '.swiper-pagination', //指定显示点的盒子
    nextButton: '.swiper-button-next', //显示的下一个按钮
    prevButton: '.swiper-button-prev', //显示的上一个按钮
    paginationClickable: true, //允许焦点点击
    spaceBetween: 30,//间距
    centeredSlides: true, //是否居中
    autoplay: 2500,//自动播放 2500表示2.5自动切换
    autoplayDisableOnInteraction: false 
});
avatar
文章
阅读
粉丝