jquery圖片輪播，點選左右按鈕輪播，可控制是否自動播放，是否迴圈輪播（自寫）
阿新 • • 發佈：2019-02-17
<!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);
});