Heim > Artikel > Web-Frontend > Toller jQuery-Bildkarussell-Effekt_jquery

Toller jQuery-Bildkarussell-Effekt_jquery

WBOYOriginal: 2016-05-16 15:05:091458Durchsuche

Das Beispiel in diesem Artikel zeigt Ihnen den jQuery-Bildkarusselleffekt, der sehr personalisiert ist. Der spezifische Inhalt ist wie folgt

Shopping-Produktanzeige: Bildkarussell, der Effekt ist wie folgt:

Ideenerklärung:

Erkennen Sie von Zeit zu Zeit den automatischen Wechsel von Bildern und den Tab-Auswahleffekt

Zwei Bereiche:

Der äußerste Containerbereich, wie im roten Drahtgitterrechteck im Bild oben gezeigt

　Tab-Bereich

Zwei Veranstaltungen:

　 Mouseover oder Mouseover

Die Maus verlässt 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="Toller jQuery-Bildkarussell-Effekt_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>Toller jQuery-Bildkarussell-Effekt_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>

#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;
}

/* 首页大屏广告效果 */
$(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"); 
}

Das Obige ist ein sehr personalisierter jQuery-Bildkarusselleffekt. Ich hoffe, er gefällt Ihnen.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Erläuterung des jQuery-Formulars „validate+artdialog+jquery“ zur Implementierung von Popup-FormularideenNächster Artikel：Detaillierte Erläuterung des jQuery-Formulars „validate+artdialog+jquery“ zur Implementierung von Popup-Formularideen

In Verbindung stehende Artikel

Mehr sehen