js轮播图

1.先把标签写好

<div class="wrap">
    <div class="wrapDiv">
        <img class="photo" src="1.png">
        <img class="photo" src="2.png">
        <img class="photo" src="3.png">
    </div>
    <div class="tabs" id="photoTabs">
        <a class="tab" href="javascript:;"></a>
        <a class="tab" href="javascript:;"></a>
        <a class="tab" href="javascript:;"></a>
    </div>
</div>

2.写样式

.wrap {
            width: 1000px;
            height: 200px;
            position: relative;
            overflow: hidden;
        }
        .wrap .wrapDiv{
            width:100%;
        }
        .wrap .photo{
            display: block;
            width: inherit;
            position: absolute;
            top: 0;
            left: 0;
        }

        .wrap .tabs {
            width: 100%;
            position: absolute;
            bottom: 20px;
            text-align: center;
        }

        .wrap .tab {
            display: inline-block;
            width: 8px;
            height: 8px;
            background: #f5f5f5;
            border-radius: 50%;
            margin: 0 3px;
        }

        .wrap .tab.current {
            background: #f00;
        }

3.最后加上js

function roll() {
            var i = 0,
                timer,
                $photo = $(".wrapDiv .photo");
            //设置滚动banner的效果 begin
            $(".wrap .wrapDiv .photo").eq(0).show().siblings().hide();
            rollBannerOprate();
            $(".wrap .tabs .tab").hover(function() {
                i = $(this).index();
                clearInterval(timer);
                rollBannerStart();
            }, function() {
                rollBannerOprate();
            });

             //设置滚动banner的显示
             function rollBannerStart() {
                 $photo.eq(i).fadeIn(500).siblings().fadeOut(500);
                 $(".tabs .tab").eq(i).addClass("current").siblings().removeClass("current");
             }
             //设置滚动banner的时间控制
             function rollBannerOprate() {
                 timer = setInterval(function() {
                     i++;
                     if(i == $photo.length) {
                         i = 0;
                     }
                     rollBannerStart();
                 }, 5000);
             }
    }
    roll();

完成啦！