用H5+jQuery实现图片轮播的手写代码

HTML部分：

                        

                            
• 
                                  
                                      
                                  
                                  

  AAAAAAAAAAAAAAAAAAAAAAAAAAAA

  
                              

                            
• 
                                  
                                      
                                  
                                  

  BBBBBBBBBBBBBBBBBBBBBBBBBBBBB

  
                              

                            
• 
                                  
                                      
                                  
                                  

  CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC

  
                              

                            
• 
                                  
                                      
                                  
                                  

  DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD

  
                              

                        

                        
                        

                            1
                            2
                            3
                            4
                        

 

CSS部分：( 这里CSS我是用less写的，里面的rem的换算方式是：1rem=16px )

.slider {
            width: 710/16rem;
            height: 400/16rem;
            border: solid 1/16rem #eee;
            position: relative;
            overflow: hidden;
            ul {
                width: 3500/16rem;     // 这里说明一下，此处的宽度 一定大于 图片数量*每张图片的宽度
                list-style: none;
                position: relative;
                li {
                    width: 710/16rem;
                    float: left;
                    a {
                        display: inline-block;
                        width: 710/16rem;
                        height: 400/16rem;
                        margin: 0;
                        padding: 0;
                    }
                    p {
                        display: block;
                        width: 710/16rem;
                        height: 30/16rem;
                        font-size: 18/16rem;
                        text-align: center;
                        font-family: "微软雅黑";
                        background-color: black;
                        color: white;
                        margin-top: -30/16rem;
                    }
                }
            }
            .btn {
                position: absolute;
                right: 10px;
                bottom: 5px;
                text-align: center;
                font-size: 15/16rem;
                line-height: 26/16rem;
                span {
                    cursor: pointer;
                    display: block;
                    float: left;
                    width: 28px;
                    height: 28px;
                    background: #0C79B1;
                    margin-left: 3/16rem;
                    color: #fff;
                }
                .active {
                    background: #b63e1a;
                }
            }
        }

jQuery部分：

//--------轮播--------
$(document).ready(function(){
    var slider=$(".slider"),
    ul=slider.find("ul"),
    showNumber=slider.find(".btn span"),
    oneWidth=slider.find("ul li").eq(0).width();
    var timer=null;
    var iNow=0;//正在展示的图片索引值
    
    showNumber.on("click",function(){
        $(this).addClass("active").siblings().removeClass("active");
        var index=$(this).index();
        iNow=index;
        ul.animate({
            "left":-oneWidth*iNow,
        })
    });
    
    timer=setInterval(function(){
        iNow++;
        if(iNow>showNumber.length-1){
            iNow=0;
        }
        showNumber.eq(iNow).trigger("click");
    },2000);
})
//--------轮播----------

没截图，如果哪里有不懂得 可以私我~~~