jQuery onglet droit focus image carrousel effets spéciaux code Sharing

jQuery onglet droit focus image carrousel effets spéciaux code Sharing_jquery

WBOY

Libérer： 2016-05-16 15:40:48

original

1408 Les gens l'ont consulté

L'exemple de cet article décrit le code des effets spéciaux du carrousel d'images de focus de l'onglet droit de jQuery. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :
Le code source des effets spéciaux d'animation de carrousel d'images de focus de l'onglet droit implémentés par jQuery est un nouveau et charmant code de carrousel d'images de focus qui prend en charge le carrousel automatique et le clic manuel.
Rendu de l'opération : ----------------Effet de vue-Téléchargement du code source--- ---- ---------------

Conseils : Si le navigateur ne fonctionne pas correctement, vous pouvez essayer de changer de mode de navigation.
Le code d'effet spécial du carrousel d'images de focus de l'onglet droit jQuery partagé avec vous est le suivant

<!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>

Copier après la connexion

Ce qui précède est le code du carrousel d'images de focus de l'onglet droit jQuery partagé avec vous.