轮播图---左右切换无长滚动效果轮播图-中级难度版

最新推荐文章于 2024-08-07 20:58:21 发布

孤独的小色狼

最新推荐文章于 2024-08-07 20:58:21 发布

阅读量251

点赞数

本文链接：https://blog.csdn.net/qq_36864205/article/details/88409489

版权

轮播图---左右切换无长滚动效果轮播图-中级难度版

左右切换无长滚动轮播图
思路：首先设有全局变量position（确定当前图片是第几张），arr数组：存放图片地址，方向：direction，

及lis小圆点数组，prev，记录小圆点的前一个， moveBool是否进入运动函数等
1、点击事件：点击左边的leftBn，设置direction="right"，position--，在这要确定position不能超出数组长度范围，

超出要重新赋值，点击小圆点把小圆点的当前是lis数组中的第几个赋值给position，然后图片生成
2、图片生成：图片根据当前direction值以及position来确定插入当前图片的前面和后面，如果direction=”right“，

插在当前图片的前面，并把装图片的盒子宽度乘以2倍，设置控制图片运动的moveBool为true，
3、图片运动：根据当前direction值运动，如果值为right，则让装图片的盒子的left值为offset.left+40,即向右运动，

当运动完成后设置相关属性停止进入运动函数并设置其他相关属性
4、自动运动：设置控制自动运动的变量，初值为0，每次进入定时器++，当等于一定值时，给direction赋值，position++，

生成图片，当点击事件发生时，则给这个变量的值设成负值，让其时间更久才能再次生成图片。
5、关于小圆点及其它琐碎事情。每次清空之前prev的属性设置，然后给prev设置当前的li所在的position，再重新设置背景属性。

易错点：插入图片位置，给装图片的大盒子定位及运动。及图片生成和图片运动这一块。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>中级轮播图重构</title>
    <style>
        *{margin: 0;  padding: 0;  }
        #carousel,#imgCon img{width: 1200px;  height: 400px;  }
        #carousel {position: relative;  margin: auto;  overflow: hidden;  }
        #imgCon{width: 1200px;  height: 400px;  position: absolute;  left: 0;  font-size: 0;  }
        #leftBn,#rightBn {position: absolute;  top:170px;  cursor: pointer;  }
        #leftBn{left: 20px;}
        #rightBn {right: 20px;  }
        ul{position: absolute;  bottom: 20px;  list-style: none;  margin: auto;  }
        li {width: 20px;  height: 20px;  border: 1px solid red;  border-radius: 10px; 
         float: left;  margin-left: 8px;  cursor: pointer;  }
    </style>
    <script src="../universalMethod.js"></script>
</head>
<body>
<div id="carousel">
    <div id="imgCon">
        <img src="img/a.jpeg">
    </div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <img src="img/left.png" id="leftBn">
    <img src="img/right.png" id="rightBn">
</div>
<script>
    var imgCon,leftBn,rightBn,ul,lis,prev
    var arr=["img/a.jpeg","img/b.jpeg","img/c.jpeg","img/d.jpeg","img/e.jpeg"]
    var position=0
    var direction
    var autoNum=0
    var moveBool=false
    const WIDTH=1200
    const HEIGHT=400
    init()
    function init(){
        imgCon=document.getElementById("imgCon")
        leftBn=document.getElementById("leftBn")
        rightBn=document.getElementById("rightBn")
        ul=document.getElementsByTagName("ul")[0]
        leftBn.addEventListener("click",clickHandler)
        rightBn.addEventListener("click",clickHandler)
        lis=ul.children
        for(var i=0;i<lis.length;i++){
            lis[i].index=i
            lis[i].addEventListener("click",liClickHandler)
        }
        ul.style.left=(WIDTH-ul.clientWidth)/2+"px"
        liBG()
        setInterval(animation,16)

    }
    function createImg(){
        var data1=new Date()
        var img=Method.createElem("img",null,{
            width:WIDTH+"px",
            height:HEIGHT+"px"
        })
        img.src=arr[position]
        imgCon.style.width=WIDTH*2+"px"
        if(direction==="left"){
            imgCon.appendChild(img)
        }
        if(direction==="right"){
            imgCon.insertBefore(img,imgCon.lastElementChild)
            imgCon.style.left=-WIDTH+"px"
        }
        var data2=new Date()
        moveBool=true
        console.log(data2-data1)
        liBG()
    }
    function moveImg(){
        if(!moveBool) return
        if(direction==="left"){
            if(imgCon.offsetLeft<=-WIDTH){
                imgCon.style.left=0+"px"
                imgCon.firstElementChild.remove()
                imgCon.style.width=WIDTH+"px"
                moveBool=false
                return
            }
            imgCon.style.left=(imgCon.offsetLeft-40)+"px"
        }
        if(direction==="right"){
            if(imgCon.offsetLeft>=0){
                imgCon.lastElementChild.remove()
                imgCon.style.width=WIDTH+"px"
                moveBool=false
                return
            }
            imgCon.style.left=(imgCon.offsetLeft+40)+"px"
        }
    }
    function animation(){
        moveImg()
        autoMove()

    }
    function autoMove(){
        autoNum++
        if(autoNum===240){
            autoNum=0
            position++
            if(position>arr.length-1) position=0
            direction="left"
            createImg()
        }
    }
    function clickHandler(){
        if(moveBool) return
        autoNum=-120
        if(this===leftBn){
            position--
            if(position<0) position=arr.length-1
            direction="right"
            createImg()
            return
        }
        position++
        if(position>arr.length-1) position = 0
        direction="left"
        createImg()
    }
    function liClickHandler(){
        if(moveBool) return
        autoNum=-120
        if(this.index>position) direction="left"
        if(this.index<position) direction="right"
        position=this.index
        createImg()

    }
    function liBG(){
        if(prev){
            prev.style.background="rgba(255,0,0,0)"
        }
        prev=lis[position]
        prev.style.background="rgba(255,0,0,0.5)"
    }
</script>
</body>
</html>