JS---轮播图

今天我们来学习一个简单的轮播图片

可以理解为一个大的相框，里面有许多张图片，但是一次性只能显示一张图片。

我们要学会的就是让这个有规律图片自己动起来

<>代表向左向右移动上/下一张。

下面的小圆点则是响应式，点击第几个小圆点的时候会切换到第几张图片。

 

整体的布局如下： 

    <!-- 大容器 -->
    <div class="swiper-wraper">

        <!-- 相框 -->
        <div class="swiper">
            <ul>
                <li style="background-color:yellow">元素五</li>
                <li style="background-color:brown">元素一</li>
                <li style="background-color:palegoldenrod">元素二</li>
                <li style="background-color:pink">元素三</li>
                <li style="background-color:skyblue">元素四</li>
                <li style="background-color:yellow">元素五</li>
                <li style="background-color:brown">元素一</li>
            </ul>
            <!-- 导航 -->
            <!-- 下一页面 -->
            <a href="javascript:void(0)" class="next">&gt;</a>
            <!-- href=”javascript:void(0)”这个的含义是，让超链接去
                执行一个js函数，而不是去跳转到一个地址，而void(0)
                表示一个空的方法，也就是不执行js函数 -->
            <a href="javascript:void(0)" class="prev">&lt;</a>
            <!-- 上一页面 -->

          <!-- 指示器 -->
            <ol>
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ol>
        </div>
    </div>

 外层有一个大的容器，里面包裹了一个UI和两个a标签，li代表了每张图片。OL代表小圆点的集合，里面的每个li代表一个小圆点。

简单的设置一下css的样式

 <style>
        * {
            padding: 0;
            margin: 0;
        }

        ul,
        li {
            list-style: none;
        }

        a {
            text-decoration: none;
            color: black;
        }

        .swiper-wraper {
            position: relative;
            width: 400px;
            height: 200px;
            margin-top: 100px;
            margin-left: 500px;
        }

        .swiper-wraper .swiper {
            position: relative;
            width: 100%;
            height: 100%;
            border: 4px solid gray;
            overflow: hidden;
        }

        .swiper-wraper .swiper ul {
            position: absolute;
            top: 0;
            left: -400px;
            display: flex;
            width: 2800px;
        }

        .swiper-wraper .swiper ul li {
            width: 400px;
            height: 200px;
            text-align: center;
            line-height: 200px;
        }

        /* 导航 */
        .swiper-wraper .swiper .prev {
            width: 30px;
            height: 35px;
            line-height: 60x;
            background-color: cadetblue;
            position: absolute;
            top: 70%;
            left: 0;
            transform: translateY(-50px);
            font-size: 18px;
            text-align: center;
        }

        .swiper-wraper .swiper .next {
            width: 30px;
            height: 35px;
            line-height: 60x;
            background-color: cadetblue;
            position: absolute;
            top: 70%;
            right: 0;
            transform: translateY(-50px);
            font-size: 18px;
            text-align: center;
        }

        /* 指示器 */
        .swiper-wraper .swiper ol {
            position: absolute;
            left: 50%;
            bottom: 20px;
            transform: translateX(-50%);
            width: 100px;
            display: flex;
            justify-content: space-between;
        }

        .swiper-wraper .swiper ol li {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: white;
        }

        .swiper-wraper .swiper ol li :hover {
            cursor: pointer;
        }

        .swiper-wraper .swiper ol .active {
            background-color: chocolate;
        }
    </style>

会得到这样的一个样式:

 

 现在我们来写js为其加上动态效果。

<script>
        let swiperWraper = document.querySelector('.swiper-wraper')//获取外层大容器
        let ulEle = document.querySelector('ul')//获取UL大框框
        let nextEle = document.querySelector('.next')//获取下一个按钮
        let prevEle = document.querySelector('.prev')//获取上一个按钮
        let swiperWidth = window.getComputedStyle(swiperWraper).width //获取外层大容器的宽度400px
        swiperWidth = parseInt(swiperWidth)//解析400px返回整数400
        let count = ulEle.children.length//元素个数
        let isMove = false//默认未运动，true运动中
        let olLis = document.querySelectorAll('ol>li')
        let index = 0


        /*
			  滑动效果
			    联想: 拖拽效果
			*/
			function setSwiperTouch() {
				swiperWraper.onmousedown = function (e) {
					e = e || window.event
					let initX = e.offsetX
					swiperWraper.onmousemove = function (e) {
						e = e || window.event
						let x = e.offsetX
						// 向右
						if (x - initX > 0) {
							setPrev()
						} else {
							setNext()
						}
					}
					document.onmouseup = () => (swiperWraper.onmousemove = null) // 注销移动事件
				}
			}
			setSwiperTouch()



        /*
          指示器
             联想: 选项卡
                      思路:  循环给每个选项绑定事件
                               清除所有选项卡选中效果
                               给当前元素设置选中效果
        */
        function setPointer() {
            for (let i = 0; i < olLis.length; i++) {
                olLis[i].addEventListener('click', function () {
                    if (isMove == false) {
                        let index_olli = i - index//索引号号值
                        index = i//同步指示器
                        move(ulEle, -swiperWidth * index_olli)
                        setCurrentActive(i)
                    }
                })
            }
        }
        setPointer()
        //清除所有的指示器选中效果
        function clear() {
            for (let i = 0; i < olLis.length; i++) {
                // olLis[i].className=''
                olLis[i].classList.remove('active')
            }
        }
        //    设置当前指示器效果
        function setCurrentActive(_index) {
            clear()
            olLis[_index].classList.add('active')
        }


        // 绑定导航事件
        function bindNavigator() {
            nextEle.addEventListener('click', () => setNext())
            prevEle.addEventListener('click', function () {
                setPrev()
            })
        }

        // 下一页
        function setNext() {
            if (isMove == false) {
                if (++index == count - 2) {
                    index = 0
                }
                setCurrentActive(index)
                move(ulEle, -swiperWidth)
            }
        }

        // 上一页
        function setPrev() {
            if (!isMove) { //?
                if (--index < 0) {
                    index = count - 3
                }
                setCurrentActive(index)
                move(ul, swiperWidth)

            }
        }

        bindNavigator()

            // 自动轮播,用定时器
            function autoPlay() {
                setInterval(() => {
                    move(ulEle, -swiperWidth)
                }, 2000)
            }
            // autoPlay()
            /*
                运动函数
                ele 运动元素
                offset 是运动总距离,偏移量  正向右，负向左
              */
            function move(ele, offset) {
                isMove = true//开始运动？
                let _width = Math.abs(offset) //运动宽度？
                let time = 1000 // 总时间
                let rate = 50 // 速度
                let distance = (offset * rate) / time // 每次移动距离

                //     //初始化当前位置
                ele.style.left = window.getComputedStyle(ele).left
                let init = parseInt(ele.style.left)
                //     //计算目标位置
                let goal = init + offset // 目标位置  400

                const timer = setInterval(function () {
                    if (parseInt(ele.style.left) == goal || Math.abs(Math.abs(goal) - Math.abs(parseInt(ele.style.left))) < Math.abs(distance)) {
                        ele.style.left = goal + 'px' // 如果当前位置与目标位置的距离小于移动的距离，直接到达目标位置
                        clearInterval(timer)

                        //             // 核心代码，当元素停止运动时，判断是否运动到最后元素，如果是则初始化元素,7个元素 重复了2个，400*5=2000.到2000的时候则初始化
                        if (parseInt(ele.style.left) == -(count - 2) * _width) {
                            //                 //向右判断
                            ele.style.left = 0 + 'px'
                        } else if (parseInt(ele.style.left) == 0) {
                            ele.style.left = -(count - 2) * _width + 'px'
                        }
                        isMove = false//停止运动
                    } else {
                        ele.style.left = parseInt(ele.style.left) + distance + 'px'
                    }
                }, rate)
            }

    </script>

最后运行代码，这个简单的轮播图就做好了。