轮播图

作者: ai搞搞 | 来源:发表于2017-06-01 11:30 被阅读0次

    ```

    1.

    $(function () {

    var index = 0;

    var timer = null;

    $('.continer').mouseover(function () {

    $('.control').css('display','block');

    clearInterval(timer);

    }).mouseout(function () {

    $('.control').css('display','none');

    timer = setInterval(scroll,1000);

    });

    timer = setInterval(scroll,1000);

    function scroll() {

    index++;

    if(index>4) {

    index = 0;

    }

    scrollImgAndRound(index);

    }

    $('.round>li').mouseover(function () {

    scrollImgAndRound($(this).index());

    index = $(this).index();

    });

    $('#controlLeft').click(function () {

    index--;

    if (index<0){

    index = 4;

    }

    scrollImgAndRound(index);

    });

    $('#controlRight').click(function () {

    index++;

    if(index>4){

    index = 0;

    }

    scrollImgAndRound(index);

    });

    function scrollImgAndRound(index) {

    $('.scrollImage>li').eq(index).css('display','block').siblings().css('display','none');

    $('.round>li').eq(index).css('background','#222').siblings().css('background','#878787');

    }

    });

    2,

    $(function(){

    $('.visualCon>ol>li').each(function(i,ele){

    $(ele).click(function(){

    $(ele).show().css('background-color','#000').siblings().css('background-color','#ccc');

    $('.visualCon>ul>li').eq($(this).index()).show().stop().animate({'left':0},300);

    $('.visualCon>ul>li').eq($(this).index()).prevAll().each(function(i,ele){

    $(ele).stop().animate({'left':'-'+(i+1)*100+'%'},300);

    });

    $('.visualCon>ul>li').eq($(this).index()).nextAll().each(function(i,ele){

    $(ele).stop().animate({'left':(i+1)*100+'%'},300);

    });

    });

    });

    });

    ```

    相关文章

      网友评论

          本文标题:轮播图

          本文链接:https://www.haomeiwen.com/subject/tfnsfxtx.html