jQuery, rechte Registerkarte, Fokusbild, Karussell, Spezialeffektcode, Sharing

jQuery, rechte Registerkarte, Fokusbild, Karussell, Spezialeffektcode, Sharing_jquery

WBOY

Freigeben： 2016-05-16 15:40:48

Original

1367 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt den jQuery-Spezialeffektcode für das rechte Tab-Fokusbildkarussell. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Der Quellcode für die von jQuery implementierten Spezialeffekte für die Fokusbildkarussellanimation auf der rechten Registerkarte ist ein frischer und schöner Fokusbildkarussellcode, der automatisches Karussell und manuelles Klicken unterstützt.
Vorgangsrendering: ------------Effekt anzeigen-Quellcode-Download--- ---- ---------------

Tipps: Wenn der Browser nicht richtig funktioniert, können Sie versuchen, den Browsermodus zu wechseln.
Der mit Ihnen geteilte jQuery-Spezialeffektcode für das rechte Tab-Fokusbildkarussell lautet wie folgt

<!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 &#63; 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://www.jb51.net/" target="_blank">脚本之家</a></p>
</div>
</body>
</html>

Nach dem Login kopieren

Das Obige ist der mit Ihnen geteilte jQuery-Code für das rechte Tab-Fokusbildkarussell. Ich hoffe, er gefällt Ihnen.