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

HTML部分：

<div class="slider">

                        <ul>

                            <li>

                                <a href="#">

                                    <img src="img/大图1.jpg" />

                                </a>

                                <p>AAAAAAAAAAAAAAAAAAAAAAAAAAAA</p>

                            </li>

                            <li>

                                <a href="#">

                                    <img src="img/大图2.jpg" />

                                </a>

                                <p>BBBBBBBBBBBBBBBBBBBBBBBBBBBBB</p>

                            </li>

                            <li>

                                <a href="#">

                                    <img src="img/大图1.jpg" />

                                </a>

                                <p>CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</p>

                            </li>

                            <li>

                                <a href="#">

                                    <img src="img/大图2.jpg" />

                                </a>

                                <p>DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</p>

                            </li>

                        </ul>

                        <!--按钮布局-->

                        <div class="btn">

                            <span class="active">1</span>

                            <span>2</span>

                            <span>3</span>

                            <span>4</span>

                        </div>

 </div>

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);

})

//--------轮播----------

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