使用JavaScript 实现最简单最基本的轮播图样式

一、效果展示

主要通过，设置点击事件，定时器，if判断,排他思想来实现，简单的轮播图效果，是非常普通的轮播样式。

二、H5的布局

可以使用自己的图片，需要注意路径，不注意路径会出现错误，呈现不出所需要的效果。

可以使用自己的图片，需要注意路径，不注意路径会出现错误，呈现不出所需要的效果。

可以使用自己的图片，需要注意路径，不注意路径会出现错误，呈现不出所需要的效果。

        <div class="banner">
            <ul class="imgList">
                <li><img src="1.png"/></li>
                <li><img src="2.jpg"/></li>
                <li><img src="3.jpg"/></li>
                <li><img src="4.jpg"/></li>
                
            </ul>
            <div class="circle">
            </div>
        </div>

三、CSS的布局

第一步

第一个盒子的布局

        *{
                padding: 0px;
                margin: 0px;
            }
            .banner{
                 width: 600px;
                 margin: auto;
                 border: 10px solid green;
                 height: 350px;
                 position: relative;
                overflow: hidden;
                position: relative;
            }

第二个盒子

主要注意两个盒子之间的定位，还有浮动

            .imgList img{
                width: 600px;
                height: 350px;
            }
            .imgList{
                /* 绝对定位 */
                 position: absolute;
            }
            .imgList li{
                float:left;
                margin-right: 20px;
                 list-style: none;
            

第二步

给图片下的小圆点进行布局，需要注意，定位，浮动，在这里可以设置一个hover，来为JS实现排他思想做布局，这样所呈现的效果就是，可以明确的显示出我点击了那个小圆点，有很直观的效果。

    .circle{position: absolute;bottom: 15px;left:50%;transform: translateX(-50%);}
    .circle a{
                 width: 15px;
                 height: 15px;
                 background: green;
                 display: block;
                 border-radius: 50%;
                 opacity: .8;
                 float: left;
                 margin-right: 10px;
            }
            .circle a.hover{
                background: black;
                 opacity: .7;
            }

​

第三步

给图片实现，滑动效果，要给left设置一个初始值，这样就会减少不会移动的BUG，需要注意一下的小小细节。

    ul {

    transition-duration: 0.3s;
    left: 0px; 
    
     }

四、JS的布局

第一步

基本的获取元素

            // 确定ul的宽度 动态的创建小圆点
            var imgList = document.querySelector('.imgList');
            var circle = document.querySelector('.circle');
            var flag = true;
    
            //给ui标签设置宽度
             imgList.style.width =imgList.children.length*620+'px';
             
             //下面动态创建a标签
             for (var i = 0; i < imgList.children.length; i++) {
                 var aNode = document.createElement('a');
                
            //我们在这里创建index属性来记录索引值
                aNode.setAttribute('index',i);
                circle.appendChild(aNode);
             }

第二步

使用点击事件，可以通过小圆点来切换图片，还有排他思想，来呈现更加直观的点击效果

      circle.addEventListener('click',function(e){
                var cirCle = e.target.getAttribute('index');
                if(e.target.nodeName=='A'){
                        imgList.style.left = cirCle*-620+'px';
                for(j=0;j<circle.children.length;j++){
                    circle.children[j].className='';
                }this.children[cirCle].className='hover';
            }
            }) 

第三步

通过，定义新的值，设置一个定时器，在里面使用if判断来实现自动点击小圆点，从而实现自动播放的效果，主要注意其中i值的变化，来进行判断，输出，不然会出现混乱现象，需要多加注意。

有大致的逻辑后，在通过值来实现自动点击的效果的定时器，实现最简单的轮播，也可以使用滑动动画实现，本人觉得这种实现方式比较简单，所以使用此方法。

            var i = 1;
                setInterval(function(){
                 if(i<=3){
                    circle.children[i].click();
                    i++;
                 }else{
                    i=0;
                    circle.children[0].click();
                    i++;
                 }
                },2000)

五、源码评论区自取

在评论区留下自己的QQ邮箱，看到会立马发送。还有很多可以优化和添加各种实用的效果，我会在以后的时间，发表更加完善的轮播图，更具有使用性。也可以关注博主互相分享经验，非常欢迎大佬指导。（本人小白，可能不是很完善，会在今后补齐）