前端实例：轮播图效果

    利用HTML、CSS和JavaScript实现轮播图效果。

一、轮播图原理：

    通过给窗口设置position属性和overflow属性，使得超出窗口范围的部分被隐藏，表面可见范围只包含窗口，但实际上其内部空间很大；调整胶卷相对于窗口的位置，使得整个胶卷向左移动；调用JS中的定时器，实现轮播效果。

    流程图如下：

二、实现自动切换效果

1、HTML搭建基础框架

    分为图片展示窗口和上下页切换按键两部分

• li >

2、CSS设置样式

        *{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 800px;
            height: 500px;
            margin: 100px auto;
           
            position: relative;
            /* 超出窗口范围隐藏 */
            overflow: hidden;
        }
        .container .imgbox{
            width: 2400px;
            height: 100%;
            /* 让三个元素横着布局 */
            display: flex;
            position: absolute;
            left: 0px;   
        }
        .container .imgbox li{
            list-style: none;
            width: 800px;
        }
        .container .imgbox li img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .container .button{
            position:absolute;
            width: 750px;
            height: 50px;
            /* 加了absolu定位,相当于抛弃了自己原本的位置.如果想居中，使用margin:auto;不行 */
            margin: 225px 25px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .container .button li{
            list-style: none;
            width: 50px;
            height: 50px;
            background: rgba(255,255,255,0.5);
            text-align: center;
            line-height: 50px;
            border-radius: 25px;
            cursor: pointer;
        }

3、通过JS调用定时器

var imgbox = document.querySelector("ul")
console.log(imgbox)
// 核心语句
imgbox.style.left = "0px"
// 轮播图的核心方法
var  change = function(){
    var position = parseInt(imgbox.style.left) - 800
    console.log(position)
    if(position  
三、实现上下页切换效果
 
var left_button = document.querySelector(".left")
var right_button = document.querySelector(".right")
// 上一页切换
left_button.onclick = function(){
    var position = parseInt(imgbox.style.left) + 800
    if(position > 0){
        position = -1600
    }
    imgbox.style.left = position + "px"
}
// 下一页切换
right_button.onclick = change
 
    仔细观察，二和三的效果实现当中有许多重复代码，为逻辑清晰，我们可以进行合并处理。
 
var  change = function(offset){
    var position = parseInt(imgbox.style.left) + offset
    if(position  0){
        position = -1600
    }
    imgbox.style.left = position + "px"
}
// 上一页切换
left_button.onclick = function(){
    change(800)
}
// 下一页切换
right_button.onclick = function(){
    change(-800)
}
// 自动切换
// timer定时器标志变量
var timer = setInterval(right_button.onclick,3000)
 
四、避免自动手动切换冲突
 
    如果进行手动切换时，恰巧遇上自动切换，就会出现闪一下不流畅的现象。
 
    为避免手动自动冲突，可绑定事件：当鼠标放在切换按键上时，停止自动轮播；当鼠标拿开时，开启自动轮播。
 
// 避免手动自动冲突
left_button.onmouseenter = function(){
    clearInterval(timer)
}
right_button.onmouseenter = function(){
    clearInterval(timer)
}
left_button.onmouseleave = function(){
    timer = setInterval(right_button.onclick,3000)
}
right_button.onmouseleave = function(){
    timer = setInterval(right_button.onclick,3000)
}
 
五、实现点击页面切换页面效果
 
var page_item = document.querySelectorAll(".page li")
var oldpage = 1
// 切换页码改变样式
var highlight = function(){
    if (oldpage > 3) {
        oldpage = 1
    } 
    else if (oldpage  
六、过渡效果
 
1、通过transition属性添加过渡效果
 
    基本代码：transition: all ease 0.5s ;  
 
    在CSS中指定transition属性，通常放在

元素的样式定义中。当JavaScript代码改变left属性时，浏览器会自动应用这个过渡效果。

    注意：如果

的父元素不是body，并且希望
相对于其父元素定位，那么确保父元素有position: relative;（或其他定位值）。

  但如果从图片3继续点击下一页，则会出现向左返回到图片1的现象。为轮播图效果更加美观流畅，可使用下一种方法来实现。

2、通过“分步走”思想添加过渡效果

      当走到图片3（即定位是0）时，立马调定位切换到-2400（真实的图片3）



    同理， 当走到图片1（即定位是-3200）时，立马调定位切换到-800（真实的图片3）

imgbox.style.left = "-800px"
var change = function(offset){
    // 目标位置
    var position = parseInt(imgbox.style.left) + offset
    // 分步走(递归思想)
    var step = offset / 100
    var timer1 = setInterval(function(){
        // 括号的作用：做数学运算而不是字符串拼接
        imgbox.style.left = (parseInt(imgbox.style.left) + step) + "px"
        // 当分步走的位置与目标位置一致时，停止
        if(parseInt(imgbox.style.left) == position){
            // 定时器停止
            clearInterval(timer1)
        }
        // 当定位是0的时候，立马调定位切换到-2400（真实的图片三）
        if(parseInt(imgbox.style.left) == 0){
            imgbox.style.left = "-2400px"
        }
        // 当定位是-3200的时候，立马调定位切换到-800（真实的图片一）
        if(parseInt(imgbox.style.left) == -3200){
            imgbox.style.left = "-800px"
        }
    },10)
}

七、防止连续点击

    当点击按键的速度过快时，会导致轮播图效果停不下来，这是因为很多个定时器在同时进行。因此，为防止连续点击，我们可以在实现上下页切换效果的基础上，通过借助一个标志flag，增加一个判断条件来进行。当flag=0时，轮播图效果可进行正常；当flag=1时，反之。

// 上一页切换
left_button.onclick = function() {
    if(flag == 0){
        change(800)
        //页码变化
        oldpage--
        highlight()
        flag = 1
        setTimeout(function(){
            flag = 0
        },2000)
    }
    
}
// 下一页切换
right_button.onclick = function(){
    if(flag == 0){
        change(-800)
  
        //页码变化
        oldpage++
        highlight()
        flag = 1
        setTimeout(function(){
            flag = 0
        },1800)
    }
}