jquery图片轮播，点击左右按钮轮播，可控制是否自动播放，是否循环轮播（自写）

来源：互联网发布：wear it out 编辑：程序博客网时间：2024/05/15 06:00

图片轮播，可以点击左右按钮轮播，可以自动轮播，可控制是否循环轮播，可控制是否中间图片选中样式


<!DOCTYPE html><html lang="zh-CN"><head>    <meta charset="UTF-8">    <title>轮播</title>    <script type="text/javascript" src="jquery-1.9.1.min.js"></script><style type="text/css">    html,body,ul,li{margin:0; padding:0;}    ul,li{ list-style:none;}    .con1{ width:661px; height: 225px; overflow: hidden;overflow: hidden; float: left;    }    ul li{ height: 200px;        width:200px; padding:0 10px; text-align:center; float:left; margin-bottom: 30px;    }    ul li img{        width:150px; height: 150px; line-height: 200px;        border-radius: 135px;    }     ul li.active img{         border: 3px solid red;    }    .contaier{          width:753px;         height: 210px;         margin:200px auto;     }    .left{        width:40px;        height:25px;        line-height: 25px;        padding-left: 3px;        float: left;        border: 1px solid gray;         background-color:darkseagreen;        color: #fff;         margin-top:59px;        cursor: pointer;    }    .right{        width:40px;        height:25px;        line-height: 25px;        padding-left: 3px;        float: left;        border: 1px solid gray;        background-color:darkseagreen;        color: #fff;        margin-top:59px;        cursor: pointer;    }</style></head><body><div class="contaier"><div class="left">左边</div><div class="con1">    <ul>        <li><img src="garden01.jpg"></li>        <li><img src="garden02.jpg"></li>        <li><img src="garden03.jpg"></li>        <li><img src="garden04.jpg"></li>        <li><img src="garden05.jpg"></li>        <li><img src="garden06.jpg"></li>        <li><img src="garden06.jpg"></li>        <li><img src="garden06.jpg"></li>    </ul></div><div class="right">右边</div></div><script type="text/javascript" src="ScrollImg.js"></script><script type="text/javascript">    ScrollImg(".con1 ul",".con1 ul li",3,-220,1,1);</script></body></html>

ScrollImg.js：

/*图片轮播，可以控制是否循环，轮播显示个数*/var scroll_t=0; function ScrollImg(tag_ul,tag_name,num,scroll_width,iscircle,isactive) {     this.tag_ul=tag_ul;//要轮播的ul     this.tag_name=tag_name;//轮播的ul li     this.scroll_num=num;//轮播前默认显示个数     this.scroll_width=scroll_width;//轮播时的宽度变化     this.scroll_width_01=scroll_width;//轮播默认宽度，这个宽度是li的宽度加上边距     this.iscircle=iscircle;//是否循环轮播 true：是  false:否     this.scroll_start_index=0;//开始索引     this.scroll_end_index=this.scroll_num-1;//结束索引     this.scroll_cur_index=1;//当前索引     this.isactive=isactive;     if(this.isactive==1)     {         $(tag_name).eq(1).addClass("active").siblings().removeClass("active");     } }function Scroll_show(scroll_c_cat) {    var len=$(this.tag_name).length;    if(scroll_c_cat==1||scroll_c_cat==2)    {        if (scroll_c_cat == 2) {//左边            if (this.scroll_start_index == 0) {                Scroll_IsEnd(true,2);//滚动结束执行按钮突出显示                return false;            }            else {                this.scroll_start_index--;                this.scroll_end_index--;            }        }        else if (scroll_c_cat == 1)//右边        {            if(this.scroll_end_index==len-1)            {                Scroll_IsEnd(true,1);//滚动结束执行按钮突出显示                return false;            }            else            {                this.scroll_start_index++;                this.scroll_end_index++;            }        }        this.scroll_cur_index=this.scroll_start_index+1;        $(this.tag_ul).animate({'margin-left': this.scroll_width * scroll_start_index}, 500);        if(this.isactive==1) {            $(this.tag_name).eq(this.scroll_cur_index).addClass("active").siblings().removeClass("active");        }    }    else if(scroll_c_cat==0)//自动播放    {        if(this.iscircle==1)        {            this.scroll_start_index++;            this.scroll_end_index++;            this.scroll_cur_index++;        }        else {            this.scroll_start_index--;            this.scroll_end_index--;            this.scroll_cur_index--;        }        if(this.scroll_cur_index==parseInt(len)-this.scroll_num+2)        {            this.scroll_cur_index=1;            this.scroll_scroll_width=0;            this.scroll_start_index=0;            this.scroll_end_index=this.scroll_num-1;        }        else        {            this.scroll_width=scroll_width_01;        }        $(this.tag_ul).animate({ 'margin-left': this.scroll_width* this.scroll_start_index },500);        if( this.isactive==1) {            $(this.tag_name).eq(this.scroll_cur_index).addClass("active").siblings().removeClass("active");        }    }}scroll_t=window.setInterval("Scroll_show(0)",3000);//左右滚动到头执行 function Scroll_IsEnd(isend,drect) {     if(isend)     {         if(drect==1)         {             /*alert("右边已经到头了");*/             $(".left").css("background-color","green");         }         else if(drect==2)         {            /* alert("左边已经到头了");*/             $(".right").css("background-color","red");         }     } }$(".left").click(function () {    window.clearInterval(scroll_t);    Scroll_show(2);});$(".right").click(function () {    window.clearInterval(scroll_t);    Scroll_show(1);});$(".left").mouseleave(function () {    window.clearInterval(scroll_t);    scroll_t=window.setInterval("Scroll_show(0)",3000);});$(".right").mouseleave(function () {    window.clearInterval(scroll_t);    scroll_t=window.setInterval("Scroll_show(0)",3000);});

0 0