轮播图Android 轮播图是什么样子的

一些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>

素材：