jQuery realisiert den klassischen Schiebetüreffekt des automatischen Umschaltens von playing

jQuery realisiert den klassischen Schiebetüreffekt des automatischen Umschaltens von playing_jquery

WBOY

Freigeben： 2016-05-16 15:39:51

Original

1956 Leute haben es durchsucht

Dieser Artikel beschreibt das Beispiel von jQuery, das den klassischen Schiebetüreffekt des automatischen Umschaltens der Wiedergabe realisiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Dies ist ein Schiebetürcode. Vom Aussehen her scheint er sich nicht von den Schiebetüren zu unterscheiden, die Sie normalerweise sehen Schalten Sie die [Play]-Schiebetür automatisch um. Der Inhalt ähnelt den täglichen Nachrichten, die nach der Anmeldung bei Tencent QQ angezeigt werden. Wenn Sie ihn verschönern, wird er noch perfekter.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/jquery-auto-cha-tab-style-codes/

Der spezifische Code 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" />
<script type="text/javascript" src="jquery1.3.2.js"></script>
<title>autoTab,自动切换播放的滑动门</title>
</head>
<style>
*{ margin:0; padding:0;}
ul{ list-style:none}
body{ font-size:12px}
#tabMenus{ width:400px; margin:100px auto 0 auto;overflow:hidden; border:#ccc solid 1px; border-bottom:none;}
#tabMenus li{ float:left; width:100px; height:25px; line-height:25px; background:#ccc; text-align:center}
#tabMenus li a{ display:block; height:100%; color:#000000; text-decoration:none}
#tabMenus li.current{background:#fff}
#tabMenus li.usual{background:#ccc;}
#tabCons{ clear:both;width:400px; margin:0 auto; overflow:hidden; border:#ccc solid 1px; border-top:none}
#tabCons .con{ float:left; padding:10px; width:380px; display:none}
</style>
<script>
$(document).ready(function(){
 var j=0;
 $("#tabMenus li:first").addClass("current");
 $("#tabCons div:first").show();
 $("#tabMenus li").each(function(i){
 $(this).click(function(){
    $(this).addClass("current").siblings().removeClass();
    $("#tabCons > div").hide();
    $("#tabCons div:eq(" + i + ")").show();
  })
 })
 var t=setInterval(function(){
   $("#tabMenus li:eq("+j+")").trigger("click");
   if(j<3){
    j++;
   }else{
    j=0;
   }
 },1000)
})
</script>
<body>
<ul id="tabMenus">
<li><a href="#">1111</a></li>
<li><a href="#">2222</a></li>
<li><a href="#">3333</a></li>
<li><a href="#">4444</a></li>
</ul>
<div id="tabCons">
<div class="con">1111</div>
<div class="con">2222</div>
<div class="con">3333</div>
<div class="con">4444</div>
</div>
</body>
</html>

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.