Superbe carrousel d'images jQuery effect

Superbe carrousel d'images jQuery effect_jquery

WBOY

Libérer： 2016-05-16 15:05:09

original

1534 Les gens l'ont consulté

L'exemple de cet article partage avec vous l'effet carrousel d'images jQuery, qui est très personnalisé. Le contenu spécifique est le suivant

Affichage des produits d'achat : carrousel d'images, l'effet est le suivant :

Explication des idées :

De temps en temps, réalisez une commutation automatique des images et un effet de sélection d'onglets

Deux domaines :

La zone du conteneur la plus à l'extérieur, comme indiqué dans le rectangle filaire rouge dans l'image ci-dessus

　Zone d'onglets

Deux événements :

　 Survol de la souris ou survol de la souris

La souris quitte mouseleave

/**大屏广告滚动样式**/
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>jQuery个性化图片轮播效果</title>
 <link rel="stylesheet" href="styles/main.css" type="text/css" />
 <script src="js/jquery-2.2.3.min.js" type="text/javascript"></script>
 <script src="js/imagesScroll.js" type="text/javascript"></script>
</head>
<body>
 <!-- 大屏广告 start -->
 <div id="jnImageroll">
  <a href="#nogo" id="JS_imgWrap">
   <img src="images/ads/1.jpg" alt="Superbe carrousel dimages jQuery effect_jquery"/>
   <img src="images/ads/2.jpg" alt="新款上线"/>
   <img src="images/ads/3.jpg" alt="愤怒小鸟特卖"/>
   <img src="images/ads/4.jpg" alt="男鞋促销第一波"/>
   <img src="images/ads/5.jpg" alt="春季新品发布"/>
  </a>
  <div>
   <a href="###1"><em>Superbe carrousel dimages jQuery effect_jquery</em><em>全场119元起</em></a>
   <a href="###2"><em>新款上线</em><em>全场357元起</em></a>
   <a href="###3"><em>愤怒小鸟特卖</em><em>全场89元</em></a>
   <a href="###4"><em>男鞋促销第一波</em><em>全场3.1折起</em></a>
   <a href="###5" class="last"><em>春季新品发布</em><em>全场4.1折起</em></a>
  </div>
 </div>
 <!-- 大屏广告 end -->
</body>
</html>

Copier après la connexion

#jnImageroll{
 width:550px; 
 height:321px;
 overflow: hidden;
 position: relative;
}
#jnImageroll img{
 position: absolute; 
 left: 0; 
 top: 0;
}
#jnImageroll div{
 position: absolute;
 left: 0; 
 bottom: 0;
}

#jnImageroll div a{
 width: 79px;
 background: #444444;
 float: left;
 display: inline-block;
 margin-right: 1px;
 text-align: center;
 padding: 5px 15px;
 text-decoration: none;
 color: #FFFFFF;
 font: 14px/1.5 tahoma,arial;
}
#jnImageroll div a em{
 display: block;/*将行内元素变成块级元素*/
 height: 19px;
 overflow: hidden;
}
#jnImageroll a.chos {
 background: #37A7D7;
 color: #FFFFFF;
}

Copier après la connexion

/* 首页大屏广告效果 */
$(function(){
 var $imgrolls = $("#jnImageroll div a");//选项卡区域
 $imgrolls.css("opacity","0.7"); //设置选项卡透明度
 var len = $imgrolls.length;
 var index = 0;
 var adTimer = null;
 //选项卡的鼠标悬浮、离开调用函数
 $imgrolls.mouseover(function(){
  index = $imgrolls.index(this);
  showImg(index);
 }).eq(0).mouseover(); 
 
 //滑入 停止动画，滑出开始动画.
 $('#jnImageroll').hover(function(){
   if(adTimer){ 
    clearInterval(adTimer);
   }
   },function(){
   adTimer = setInterval(function(){
    showImg(index);
    index++;
    if(index==len){index=0;}
   } , 5000);
 }).trigger("mouseleave");
})
//显示不同的幻灯片
function showImg(index){
 var $rollobj = $("#jnImageroll");
 var $rolllist = $rollobj.find("div a");
 var newhref = $rolllist.eq(index).attr("href");
 $("#JS_imgWrap").attr("href",newhref)
    .find("img").eq(index).stop(true,true).fadeIn().siblings().fadeOut();
 $rolllist.removeClass("chos").css("opacity","0.7")
    .eq(index).addClass("chos").css("opacity","1"); 
}

Copier après la connexion

Ce qui précède est un effet carrousel d'images jQuery très personnalisé. J'espère qu'il vous plaira.