轮播图-简单易懂

一些JS基础、CSS基础、HTML基础即可！！！！！！

功能介绍：

1、每隔四秒切换一张图片（效果为：左滑切换）；

2、点击左右箭头可手动切换图片；

3、每显示一张图片时，对应的小圆点突出显示。

思路：

1、利用长图进行平移实现切换效果；

2、我们通过修改长图这个div元素的不同状态的class属性值进而改变元素的样式

3、实现连贯流畅的效果：

 

从上图可以看出我们，红色方框为我们正常显示的区域

为了让小伙伴理解的更加透彻

我暂且还未将长图的父级元素的overflow属性的属性值设为：hidden;

（上面说到的属性不必担心，将代码复制即可用！）

 那么，想要长图拥有连贯的切换效果，我们需要在最后加上一张和第一张图相同的图片

原理：

当我们切换到图四时，我们需要下一张连贯播放为图一

但是，毕竟是长图，无法像环形圈那样连续旋转！

我们只得先让图四切换到图五来代替切换图一的效果

我们只需要再切换到图五后，立马跳转到图一，从而得到连贯的闭环切换效果！

CSS部分：其中红色CSS为定义的长图的五种class属性值，也就是我们想要的五种状态！

<style type="text/css">
        *{
            margin: 0 auto;
        }
        #bigdiv{
            margin-top:100px;
            width:500px;
            height: 350px;
            position: relative;
            overflow: hidden;
        }
        #centerdiv{
            width:2500px;
            height: inherit;
            position: absolute;
        }
        .xioadiv{
            width:500px;
            height: inherit;
            float: left;
            text-align: center;
            line-height: 310px;
        }
        .centerdiv{
            left:0;
            transition:left 0.3s;
        }
        
        .centerdiv00{
            left:0;
        }
        .centerdiv01{
            left:-500px;
        }
        .centerdiv02{
            left:-1000px;
        }
        .centerdiv03{
            left:-1500px;
        }
        .centerdiv04{
            left:-2000px;
        }
        .leftOrRight{
            width:50px;
            heigth:50px;
            position:relative;
            z-index: 2;
            top: 180px;
            transition:opacity 0.1s;
            opacity: 0.5;
        }
        .leftOrRight:hover{opacity: 1;
        }
        .buttomdiv{
            width:100px;
            htigth:90px;
            background-color: red;
            float: left;
            margin-top:80px;
        }
        .radiusdiv{
            width:100px;
            height: 14px;
            position: absolute;
            left: 190px;
            top: 320px;
        }
        .xiaoradius{
            width:10px;
            height: 10px;
            border: solid 2px white;
            border-radius: 50%;
            float: left;
            margin-left: 10px;
            opacity: 0.5;
            background-color: white;
        }
        .imgs{
            width:inherit;
            height: inherit;
        }
    </style>

HTML的body部分：

<div id="bigdiv">
        <img id="leftmove" src="img/left.png" style="left:5px;" class="leftOrRight"/>
        <img id="rightmove" src="img/right.png"  style="left:390px;" class="leftOrRight"/>
        
        <div id="centerdiv" class="centerdiv">
            <div id="xiaodiv01" class="xioadiv" style="background-color: blue;">
                <img src="img/111.png" class="imgs"/>
            </div>
            <div id="xiaodiv02" class="xioadiv" style="background-color: red;">
                <img src="img/112.png"  class="imgs"/>
            </div>
            <div id="xiaodiv03" class="xioadiv" style="background-color: green;">
                <img src="img/113.png"  class="imgs"/>
            </div>
            <div id="xiaodiv04" class="xioadiv" style="background-color:cadetblue;">
                <img src="img/114.png"  class="imgs"/>
            </div>
            <div id="xiaodiv05" class="xioadiv" style="background-color: blue;">
                <img src="img/111.png"  class="imgs"/>
            </div>
        </div>
        
        <div class="radiusdiv">
            <div id="1" class="xiaoradius"></div>
            <div id="2" class="xiaoradius"></div>
            <div id="3" class="xiaoradius"></div>
            <div id="4" class="xiaoradius"></div>
        </div>
        
    </div>

javascript部分：

<script type="text/javascript">
        var centerDiv = document.getElementById("centerdiv");//获取id为：centerdiv的元素，也就是我们自己定义的长条div
        var locationNum = 0;//定义初始的状态值为：0
        var radiusArr = document.getElementsByClassName("xiaoradius");//获取四个小圆点元素
        
        
        
        torF();//一开始先调用一下torF()函数，确保第一个小圆点突出显示
        //定义一个小圆点随图片切换而对应突出显示的函数  ↓
        function torF (){
            for(var i = 0 ; i < radiusArr.length ; i++){
                radiusArr[i].style.opacity = 0.5;
            }
            radiusArr[locationNum].style.opacity = 1;
        }
        
        
        //此部分为定时切换图片的JS代码
        var moveOk = setInterval(changeDiv,4000);//每隔4秒（4000毫秒）运行一次切换状态的函数
        //切换状态的函数
        function changeDiv(){
             if(locationNum == -1){
                centerDiv.style.transition = "left 0.3s";
                centerDiv.className = "centerdiv00";
                locationNum++;
                torF();
            }else if(locationNum == 0 ){
                centerDiv.style.transition = "left 0.3s";
                centerDiv.className = "centerdiv01";
                locationNum++;
                torF();
            }
            else if(locationNum == 1 ){
                centerDiv.style.transition = "left 0.3s";
                centerDiv.className = "centerdiv02";
                locationNum++;
                torF();
            }
            else if(locationNum == 2 ){
                centerDiv.style.transition = "left 0.3s";
                centerDiv.className = "centerdiv03";
                locationNum++;
                torF();
            }else{
                centerDiv.style.transition = "left 0.3s";
                centerDiv.className = "centerdiv04";
                setTimeout(returnFirst,400);
                locationNum = 0 ;
                torF();
            }
        };
        //状态5跳转到状态1
        function returnFirst(){
            centerDiv.style.transition = "left 0s";
            centerDiv.className = "centerdiv00";
            
        }
        
        
        
        //下面为左右箭头单击事件的JS代码
        var leftmove =document.getElementById("leftmove");//获取左箭头按钮元素
        var rightmove =document.getElementById("rightmove");//获取右箭头按钮元素
        //给右箭头绑定单击事件
        rightmove.onclick = function(){
            changeDiv();
        };
        //给左箭头绑定单机事件
        leftmove.onclick = function(){
            if(locationNum == 0 ){
                centerDiv.style.transition = "left 0s";
                centerDiv.className = "centerdiv04";
                setTimeout(lastdiv,1);
            }else{
                locationNum -=2;
                changeDiv();
            }
        };
        function lastdiv (){
            centerDiv.style.transition = "left 0.3s";
                centerDiv.className = "centerdiv03";
                locationNum = 3;
                torF();
        }

//James·ZZZ：感觉不错的小伙伴记得关注以下哟！舒畅也行
    </script>

素材：

   ​​                 ​​​​​​​