【HTML5】轮播图的实现方式一

实现思路：

采用老式放映机的原理，将轮播图的图片放在类似放映机的胶卷上，然后根据需求左右拉动胶卷从而播放胶卷上的图片。下列代码中的无序列表ul则相当与胶卷一样。

1.页面整体布局

复制代码

<div class="banner">
        <div class="banner_wraper">
            <ul class="banner_wraper_list">
                <li class="banner_wraper_list_item"><a href="###"><img src="./images/banner_pic_01.jpg"></a></li>
                <li class="banner_wraper_list_item"><a href="###"><img src="./images/banner_pic_02.jpg"></a></li>
                <li class="banner_wraper_list_item"><a href="###"><img src="./images/banner_pic_03.jpg"></a></li>
            </ul>
            <button class="banner_wraper_left_btn h_btn iconfont icon-left"></button>
            <button class="banner_wraper_right_btn h_btn iconfont icon-right"></button>
            <div class="banner_wraper_btn_box">
                <span>1</span><span class="active">2</span><span>3</span>
            </div>
        </div>
    </div>

2.css样式

复制代码

.banner{
    height: 300px;
    position: relative;
    overflow: hidden;
}
.banner_wraper{
    width: 1920px;
    height: 300px;
    position: absolute;
    left: 50%;
    margin-left: -960px;
    overflow: hidden;
    border: 2px solid red;
}
.banner_wraper_list{
    height: 300px;
    width: 5780px; /*临时宽度*/
    position: absolute;
    left: 0;
    transition: 0.3s;
    border: 1px solid blue;
}
.banner_wraper_list_item{
    float: left;
}
.banner_wraper_left_btn {
 left: 400px;
}
/* 这里两个按钮相同样式可以合并一下 */
.banner_wraper_right_btn { 
    right: 400px;}
.h_btn{
    position: absolute;
    top: 50%;
    margin-top: -20px;
    width: 40px;
    height: 40px;
    border: none;
    color: white;
    font-size: 30px;
    background-color:rgba(0,0,0,0.8); 
}
.banner_wraper_btn_box{
    position: absolute;
    left: 50%;
    margin-left: -75px;
    bottom: 10px;
    width: 150px;
    height: 10px;
    display: flex;
}
.banner_wraper_btn_box span {
   flex: 1;
   cursor: pointer;
   text-indent: -99999px;
   background-color:#09c762 ;
}
.banner_wraper_btn_box .active{
    background-color: white;
}

3.js部分

复制代码

window.onload = function(){
    //轮播图
    carousel()
}
function carousel(){
 //第一步： 获取所有要用到的标签
    let Banner= document.querySelector('.banner');
    let BannerWraperList = document.querySelector('.banner_wraper_list');
    let BannerWraperListItem = document.querySelectorAll('.banner_wraper_list_item');
    let BannerWraperLeftBtn = document.querySelector('.banner_wraper_left_btn');
    let BannerWraperRightBtn = document.querySelector('.banner_wraper_right_btn');
    let BannerWraperBtnBoxSpan = document.querySelectorAll('.banner_wraper_btn_box span');
    let index = 0;
    // 第二步： 给按钮添加事件
    for (let i = 0; i < BannerWraperBtnBoxSpan.length; i++) {
        BannerWraperBtnBoxSpan[i].onclick = function () {
            index = i;
            move();
        }
    }
    function move() {
        // 先将所有按钮class清空
        for (let j = 0; j < BannerWraperBtnBoxSpan.length; j++) {
            BannerWraperBtnBoxSpan[j].className = "";
        }
        // 在给当前点击的按钮加active
        BannerWraperBtnBoxSpan[index].className = "active";
        // 计算BannerWraperList的left
        BannerWraperList.style.left = - index * 1920 + "px";
    }
    // 第三步： 实现轮播图自动播放
    let timer="";
    timer = setInterval(autoPlay, 3000);
    function autoPlay(){
        index++;
        if(index>= BannerWraperBtnBoxSpan.length){
            index =0;
        }
        move();
    } 
    // 第四步：实现鼠标悬停--停止播放   鼠标离开--自动播放
    Banner.onmouseover= function(){
        clearInterval(timer);
    }
    Banner.onmouseout= function(){
       timer = setInterval(autoPlay, 3000);
    }
    // 第五步： 实现点击左右按钮，滚动轮播图
    BannerWraperRightBtn.onclick = function(){
        autoPlay();
    }
    BannerWraperLeftBtn.onclick = function(){
        index--;
        if(index<0){
            index = BannerWraperBtnBoxSpan.length-1;
        }
        move();
    }
}