jQuery右側選項卡焦點圖片輪播特效代碼分享

更新時間：2022年02月23日 12:31:46 投稿：lijiao

這篇文章主要介紹了jQuery右側選項卡焦點圖片輪播特效，一段清新可愛的焦點圖輪播代碼，有需要的小伙伴可以參考下

本文實例講述了jQuery右側選項卡焦點圖片輪播特效代碼。分享給大家供大家參考。具體如下：

jQuery實現(xiàn)的右側選項卡焦點圖片輪播動畫特效源碼，是一段清新可愛的焦點圖輪播代碼，支持自動輪播與手動點擊。

運行效果圖：

----------------------查看效果-源碼下載----------------------

小提示：瀏覽器中如果不能正常運行，可以嘗試切換瀏覽模式。
為大家分享的jQuery右側選項卡焦點圖片輪播特效代碼如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery右側選項卡焦點圖片輪播代碼</title>
</head>
<body>

<link rel="stylesheet" type="text/css" href="css/style.css"/>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
 var oFocus=$('#focus'),
 oRight=oFocus.find('.right'),
 oLeft=oFocus.find('.left'),
 aRLi=oRight.find('li'),
 aLLi=oLeft.find('li'),
 index=0,
 timer = null;
 aRLi.click(function(){
 index=$(this).index()
 $(this).addClass('active').siblings().removeClass();
 aLLi.eq(index).addClass('active').siblings().removeClass();
 aLLi.eq(index).stop().animate({'opacity':1},300).siblings().stop().animate({'opacity':0},300);
 stopFoucs();
 })
 oLeft.mouseenter(function(){
 stopFoucs();
 }).mouseleave(function(){ 
 startFocus();
 });
 timer = setInterval(function(){
 startFocus();
 },5000);
 function startFocus(){
 index++;
 index = index > aRLi.size()-1 ? 0 :index;

 aLLi.eq(index).addClass('active').siblings().removeClass();
 aLLi.eq(index).stop().animate({'opacity':1},300).siblings().stop().animate({'opacity':0},300);
 aRLi.eq(index).addClass('active').siblings().removeClass();
 }
 function stopFoucs(){
 clearInterval(timer);
 }
})
</script>

<div class="focus" id="focus">
 <div class="left">
 <ul>
 <li class="active" style="opacity:1; filter:alpha(opacity=100);"><p>圖一</p><img src="images/1.jpg"/></li>
 <li><p>圖二</p><img src="images/2.jpg"/></li>
 <li><p>圖三</p><img src="images/3.jpg"/></li>
 <li><p>圖四</p><img src="images/4.jpg"/></li>
 </ul>
 </div>
 <div class="right">
 <ul>
 <li class="active"><i class="i1"></i>圖一</li>
 <li><i class="i2"></i>圖二</li>
 <li><i class="i3"></i>圖三</li>
 <li><i class="i4"></i>圖四</li>
 </ul>
 </div>
</div> 
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>適用瀏覽器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
<p>來源：<a href="http://chabaoo.cn/" target="_blank">腳本之家</a></p>
</div>
</body>
</html>

更多精彩內容大家還可以參考《jQuery焦點圖特效匯總》進行學習，希望大家喜歡。

以上就是為大家分享的jQuery右側選項卡焦點圖片輪播代碼，希望大家可以喜歡。

您可能感興趣的文章: