Jquery 实现轮播图

Posted 2020-07-07 taoquns 博客园

jq 轮播图 

function banner_show(){
    var left_btn = $("#banner_tag_left");  　　　　 //获取左侧单击按钮
    var right_btn = $("#banner_tag_right");　　　　 //获取右侧点击按钮
    var Owidth = $("#banner ul li").width();　　　　//获取单个图片宽度
    var Oindex = $("#banner ul li"); 　　　　　　　　//获取需要轮播的图片个数
    var banner_w = $("#banner").width();　　　　 　　//获取总宽度
     var index = 0; //定义当前的轮播图的位数
    $(left_btn).bind("click",function(){
        index++;
        if( index>(Oindex.length-1)){ 　　　　　　　 //当位于最后一张图片时，位数重置
            index = 0;
        }
        $("#banner").animate({ 　　　　　　　　　　　//JQ动画方法
            left:-Owidth*index+"px",  　　　　　　　//position定位,left 的值为负的 宽度乘以位数（width * index ） 
        },300)
    });
    $(right_btn).bind("click",function(){
        index--;
        if( index<0){
            index=Oindex.length-1;　　　　　　　　//当位于第一张图时，位数变为最后一位
        }
        $("#banner").animate({
            left:-Owidth*index+"px",            //position定位。left 的值为负的 宽度乘以位数（width * index ）

},300) }); }