轮播图-好代码-(jq)

来源:互联网 发布:2008年nba总决赛数据 编辑:程序博客网 时间:2024/06/05 03:36
$(function(){    var aPage = $('#main .page a');        //分页按钮    var aImg = $('#main .box img');        //图像集合    var iSize = aImg.size();        //图像个数    var index = 0;      //切换索引    var t;    $('#btnLeft').click(function(){        //左边按钮点击        index--;        if(index<0){            index=iSize-1        }        change(index)    })    $('#btnRight').click(function(){    //右边按钮点击        index++;        if(index>iSize-1){            index=0        }        change(index)    })    //分页按钮点击    aPage.click(function(){        index = $(this).index();        change(index)    });    //切换过程    function change(index){        aPage.removeClass('active');        aPage.eq(index).addClass('active');        aImg.stop();        //隐藏除了当前元素的所有        aImg.eq(index).siblings().animate({            opacity:0        },1000)        //显示当前图像        aImg.eq(index).animate({            opacity:1        },1000)    }    function autoshow() {        index=index+1;        if(index<=iSize-1){           change(index);        }else{            index=0;            change(index);        }    }    int=setInterval(autoshow,3000);    function clearInt() {        $('#btnLeft,#btnRight,.page a').mouseover(function() {            clearInterval(int);        })    }    function setInt() {        $('#btnLeft,#btnRight,.page a').mouseout(function() {            int=setInterval(autoshow,3000);        })    }    clearInt();    setInt();})

链接:http://www.5icool.org/demo/2013/a00990/

0 0
原创粉丝点击