在頁面的指定位置實現的圖片自動的左右輪流切換展示效果，當點擊圖片左下的標籤(或中間的小圓點)切換到對應的圖片。接下來透過本文跟大家分享用jQuery實作圓點圖片輪播效果實例程式碼，需要的朋友參考下，希望能幫助大家。
圖片輪播效果:
在頁面的指定位置實現的圖片自動的左右輪流切換展示,效果為無縫連接;
點擊圖片左下的標籤(或中間的小圓點)切換到對應的圖片;
點擊圖片的左右切換標籤;
整體思路:
----------------- -------------------------------------------------- -------------
自動輪播: 將一個用來放置圖片素材的與顯示框同高度的大p放入顯示框,將圖片素材放入大的p中,透過jquery的animate()方法改變大p相對於顯示框絕對位置的left值及變化時間實現圖片的滑動;使用setInterval()方法設定定時器,達到自動播放效果;無縫連續播放的重點在於,第一張圖片與最後一張圖片要相同,這樣播放完最後一張圖片後將大p框的left設定為初始值,再將與圖片索引相同的變數設定為1(第二張),這樣就能達到無縫連續滑動效果;
------------------------------- -------------------------------------------------
點擊標籤切換到對應圖片: 對點擊切換圖片的li標籤新增滑鼠點擊事件,若存在定時器的先清除,使用$(this).Index()取得目前點擊圖片的序號(索引) ,將大p的left值設定為目前圖片位置的值,同時別忘了將當前li標籤設定深顏色的明顯效果,其他li標籤設定初始效果;在事件中設定倒數計時,當滑鼠點擊後一段時間不進行其他動作,則恢復自動播放的計時器;
-------------------------------- ------------------------------------------------
點擊向左向右標籤切換到上/下一張圖片: 此標籤使用標籤達到效果更好(防止連續點擊時產生選取頁面變藍的現象),先取得點擊時圖片的編號,此時不能使用$(this).Index(),因為此時this指代的對象為左右切換標籤,而不是圖片對象,還記得上面那個與圖片索引相同的變量嗎?我們需要一開始就設定它為全域變數(我將它起名為rcd),它的值相當於是和圖片,li標籤一起綁定的,在還沒有點擊向左向右標籤時,圖片是在輪播的,rcd變數中存當前圖片的序號,因此,儘管用不了this,我們可以用rcd+1/-1找到向右滑/向左劃的圖片編號,有了編號,就可以知道大p需要運動到的位置,和設定左下方的標籤顯示狀態了.當rcd-1==-1時,將p的位置設定為最後一張圖片顯示的位置,然後將rcd設定為倒數第二張圖片對應的編號;當rcd+1比最後一張還多一時,將p的位置設定為第一張圖片顯示的位置,將rcd設定為第二張圖片對應的編號即可.
#-- -------------------------------------------------- ----------------------------
程式碼實作如下：
#
<script src="jquery.min.js" type="text/javascript" charset="utf-8"></script> //引入jquery (css代码未贴)
<script type="text/javascript">
$(function(){
var rcd=0; //代表图片和li标签编号的全局变量
// 滑动函数
function slide(){
rcd++;
if(rcd==4){ //右滑倒最后一张时,将图片设定为第一张的位置,即将滑动的图片设定为第二张(rcd=1)
$('#sld').css({'left':'0'});
rcd=1;
};
var dis = rcd*(-1210)+'px'; //这里的1210是每张图片的宽度,rcd和dis的关系就是编号和p left值的关系
$('#sld').stop().animate({'left':dis},1000) //设定left
if (rcd==3) { //当切换到最后一张时(一共4张图片),将左下方的标签样式也改成与第一张一样的
$('#fix ul li').eq(0).css({'opacity': '0.6'}).siblings('li').css({'opacity': '0.2'})
}else{
$('#fix ul li').eq(rcd).css({'opacity': '0.6'}).siblings('li').css({'opacity': '0.2'}) //不是最后一张那么就正常执行
}
}
// 设定定时器,开始轮播
var timer = setInterval(slide,2000);
var st; //声明倒计时函数变量名
// 绑定li鼠标点击事件
$('#fix ul li').click(function(){
clearInterval(timer); //清除定时器(同下一行)
clearTimeout(st);
var rcd = $(this).index(); //获得点击的li的编号
var dis =rcd*(-1210)+'px'; //获得该编号对应的p的left值
$('#sld').stop().animate({'left':dis},500) //开始运动
$('#fix ul li').eq(rcd).css({'opacity': '0.6'}).siblings('li').css({'opacity': '0.2'}) //设置当前li样式,其他li变为初始值
st = setTimeout(function(){ //设置定时器,若3秒内没有鼠标点击操作,就重新设置轮播定时器
timer = setInterval(slide,2000);
},3000)
});
// 左图标点击事件
$('#fix .lt').click(function(){
clearInterval(timer);
clearTimeout(st);
rcd--; //点击前的编号-1
if(rcd==-1){ //如果rcd减后值为-1,那么将p的left设置为最后一张图显示的值,并将rcd设置为倒数第二张的编号
$('#sld').css({'left':'-3630px'});
rcd=2;
};
var dis = rcd*(-1210)+'px';
$('#sld').stop().animate({'left':dis},1000) //运动
if (rcd==3) { //与前面相同
$('#fix ul li').eq(0).css({'opacity': '0.6'}).siblings('li').css({'opacity': '0.2'})
}else{
$('#fix ul li').eq(rcd).css({'opacity': '0.6'}).siblings('li').css({'opacity': '0.2'})
}
st = setTimeout(function(){
timer = setInterval(slide,2000);
},3000)
})
// 右图标点击事件
$('#fix .rt').click(function(){
clearInterval(timer);
clearTimeout(st);
slide(); //右图标点击一次与滑动函数一致
st = setTimeout(function(){
timer = setInterval(slide,2000);
},3000)
})
// 给#fix p加鼠标移入事件
$('#fix').mouseenter(function(){
$('#fix a').css({'display':'block'}); //鼠标移入时,向左向右图标显示
})
// 给#fix p加鼠标移出事件
$('#fix').mouseleave(function(){
$('#fix a').css({'display':'none'}); //鼠标移出时,向左向右图标隐藏
})
})
</script>
</head>
<body>
<p id="fix">
<p id="sld">
<img src="轮播图/ph1.png"/ alt="jQuery實作圓點圖片輪播實例分享" >
<img src="轮播图/ph2.jpg"/ alt="jQuery實作圓點圖片輪播實例分享" >
<img src="轮播图/ph3.jpg"/ alt="jQuery實作圓點圖片輪播實例分享" >
<img src="轮播图/ph1.png"/ alt="jQuery實作圓點圖片輪播實例分享" >
</p>
<ul>
<li style="opacity: 0.6;">iPhone6</li>
<li>Mate9</li>
<li>vivo X9</li>
</ul>
<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" class="lt"><img src="轮播图/left.png"/ alt="jQuery實作圓點圖片輪播實例分享" ></a> //阻止浏览器的默认跳转
<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" class="rt"><img src="轮播图/right.png"/ alt="jQuery實作圓點圖片輪播實例分享" ></a>
</p>
</body>登入後複製
大家學會了嗎？趕快動手嘗試。
相關推薦：
Bootstrap圖片輪播效果實作方法
使用JS實作圖片輪播的實例
使用JQuery實作圖片輪播效果
#
以上是jQuery實作圓點圖片輪播實例分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！
