banner翻页轮播（左右翻页，下标点击）

css样式：

<style>
.banner {
            position: relative;
            overflow: hidden;
            width: 1200px;
            height: 390px;
            margin: auto;
        }

            .banner img {
                display: none;
                transition: all 600ms 0s;
            }

            .banner .block {
                display: block;
            }

        .bannerBtn {
            width: 100%;
            position: absolute;
            height: 30px;
            bottom: 20px;
        }

        .bannerIndex {
            height: 100%;
        }

            .bannerIndex li {
                margin: auto;
                float: left;
                width: 12px;
                height: 12px;
                margin: 2px 6px 2px 6px;
                background: rgba(0,0,0,.5);
                border-radius: 50%;
                cursor: pointer;
            }

                .bannerIndex li.indexGray {
                    background: rgba(255,255,255,.5);
                }

        .banner .bannerLeft, .bannerRight {
            font-weight: bold;
            font-family: "隶书";
            width: 50px;
            height: 50px;
            line-height: 50px;
            position: absolute;
            top: 170px;
            font-size: 30px;
            text-align: center;
            cursor: pointer;
            background: rgba(0,0,0,.3);
            border-radius: 25px;
            color: white;
            transition: all 600ms 0s;
            /*文本不可操作*/
            /*-webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;*/
            user-select: none;
        }

            .banner .bannerLeft:hover, .bannerRight:hover {
                background: rgba(255,255,255,.5);
                color: black;
                transform: scale(1.3);
                transition: all 600ms 0s;
            }

        .banner .bannerLeft {
            left: 30px;
            padding-right: 1px;
            padding-bottom: 1px;
        }

        .banner .bannerRight {
            right: 30px;
        }
</style>

HTML布局：

<div class="banner">
	            <div class="img">
	                <img class="block" src="/ContentFile/Images/banner01.png" />
	                <img src="/ContentFile/Images/banner02.png" />
	                <img src="/ContentFile/Images/banner03.png" />
	            </div>
	            <div class="bannerBtn">
	                <ul class="bannerIndex">
	                </ul>
	            </div>
	            <p class="bannerLeft">&lt;</p>
	            <p class="bannerRight">&gt;</p>
	        </div>

jQuery代码：

<script>
        $(function () {
            var index = 0;
            var banner = $('.banner .img img');
            var newLi = $('<li></li>');
            for (var i = 0; i < banner.length; i++) {
                var theLi = newLi.clone();
                $('.bannerIndex').append(theLi);
            }
            //图片下标显示
            $('.bannerIndex li:eq(0)').addClass('indexGray');
            $('.bannerIndex').css({ 'width': banner.length * 24, 'margin': 'auto' });

            //banner轮播动画
            setInterval(function () {
                $('.banner .img img').eq(index).fadeOut(300);
                $('.banner .bannerIndex li.indexGray').removeClass('indexGray');
                index++;
                if (index >= banner.length) index = 0;
                $('.banner .img img').eq(index).fadeIn(300);
                $('.banner .bannerIndex li').eq(index).addClass('indexGray');

            }, 3000);

            //banner页的切换效果
            function switchover() {
                $('.banner .img img').not($('.banner .img img').eq(index)).css("display", "none");
                $('.banner .bannerIndex li.indexGray').removeClass('indexGray');
                $('.banner .img img').eq(index).fadeIn();
                $('.banner .bannerIndex li').eq(index).addClass('indexGray');
            }

            $('.bannerIndex li').click(function () {
                index = $(this).index();
                switchover();
            })

            //点击banner左翻页按钮
            $('.bannerLeft').click(function () {
                index = index - 1;
                if (index < 0) {
                    index = banner.length - 1;
                }
                switchover();
            })
            //点击banner右翻页按钮
            $('.bannerRight').click(function () {
                index++;
                if (index >= banner.length) index = 0;
                switchover();
            })

            //点击图片下标切换图片
            $('.mainContent .left li').mousemove(function () {
                $('.firstCont .left li.show').removeClass('show');
                $(this).addClass('show');

                $('.firstCont .right').not($('.firstCont .right').eq($(this).index())).css("display", "none");
                $('.firstCont .right').eq($(this).index()).fadeIn(500);

            })
 </script>