区块轮播

• 大家好

---

区块轮播

首页的三个区块轮播；不局限与图片轮播

---

dom

  <ul class="button">
        <li ><a class="current"  href="#">第一屏</a></li>
        <li><a href="#">第二屏</a></li>
        <li><a href="#">第三屏</a></li>
    </ul>
    <div class="wrap">
        <ul class="content">
            <li id="li1" style="background-color: bisque;">我是第一屏</li>
            <li id="li2" style="background-color: chocolate;">我是第二屏</li>
            <li id="li3" style="background-color: cadetblue;">我是第三屏</li>
        </ul>
    </div>

css样式

   *{
            padding:0;
            margin:0;
        }
        img{
            border:none;
        }
        h1,h2,h3,h4,h5,h6{
            font-weight:normal;
        }
        ol,dl,dd,dt,ul,li{
            list-style:none;
        }
        .clear{
            clear:both;
        }
        body{
            font-family: "微软雅黑";
            color: #666;
        }
        .wrap {
            width: 900px;
            overflow: hidden;
        }
        .wrap ul{
            width: 3000px;
        }
        .wrap ul li{
            font-size: 40px;
            line-height: 300px;
            text-align: center;
            color: white;
            width: 900px;
            float: left;
            height: 300px;
        }
        .button {
            width: 900px;
            height: 100px;
        }
        .button li{
            float: left;
            width: 300px;
            line-height: 100px;
            text-align: center;
        }
        .button li a{
            color: #000000;
        }
        .button li .current{
            color: red;
        }

js代码

 var number = 1;
        var indicator = '.button';//指示那一部分显示的指示容器
        var elementWrap = '.content';//切换区块的容器
        var b = 4000;//每帧停留时间
        var c = 500;//切换所需时间

        var a = $(indicator).children('li').length;
        var liWidth = $(elementWrap).children('li').css('width');
        liWidth = parseInt(liWidth);

        $(document).ready(function(){
            yScroll (indicator,elementWrap);
            timer = setInterval("autoScroll(indicator,elementWrap)",b) ;
        });



//        自动播放函数
        function autoScroll(indicator,elementWrap){
            if(number == a){
                number = 0;
                $(indicator).children('li').children('a').removeClass('current');
                $(indicator).children('li').eq(number).children('a').addClass('current');
                $(elementWrap).animate({marginLeft:-liWidth*number+'px'},c);
                number=number+1;
            }else{
                $(indicator).children('li').children('a').removeClass('current');
                $(indicator).children('li').eq(number).children('a').addClass('current');
                $(elementWrap).animate({
                    marginLeft:-liWidth*number+'px'
                },c);
                number=number+1;
            }
        }

//       手动播放函数
        function yScroll(indicator,elementWrap){
            $(indicator).children('li').click(function(){
                clearInterval(timer);
                var bSerial = $(this).index();
                number = bSerial
                autoScroll(indicator,elementWrap)
                timer = setInterval("autoScroll(indicator,elementWrap)",b) ;
            })
        };