suchen

Heim >Web-Frontend >js-Tutorial >Beispiel für ein nahtloses JQuery-Anzeigenkarussell

Beispiel für ein nahtloses JQuery-Anzeigenkarussell

高洛峰
高洛峰Original
2017-01-07 13:01:511354Durchsuche

Das Beispiel in diesem Artikel zeigt den nahtlosen Rotationseffekt von JQuery-Anzeigen als Referenz. Der spezifische Inhalt ist wie folgt:

Sie müssen fünf Bilder hinzufügen und selbst auf die JQuery-Bibliothek verweisen

Beispiel für vertikale Rotation: 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery广告无缝轮播代码演示</title>
 
<style type="text/css">
 li{
  list-style:none;
 }
 .mains{
  width:700px;
  margin:0 auto;
 }
 .mains .title{
  font-size:25px;
  padding:10px 0 5px 50px;
 }
 .g1{
  width:380px; 
  height:180px; 
 }
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
 <div class="mains">
  <div class="title">jquery广告无缝轮播代码演示</div>
  <div class="g1" style="overflow: hidden;">
   <ul id="ulID" style="position: relative; height: 1800px; width: 380px; top: 0px;">
    <li style="width: 380px; height: 180px; float: left;">
     <img src="img/1.jpg" style="width: 380px; height: 180px;"></li>
    <li style="width: 380px; height: 180px; float: left;">
     <img src="img/2.jpg" style="width: 380px; height: 180px;"></li>
    <li style="width: 380px; height: 180px; float: left;">
     <img src="img/3.jpg" style="width: 380px; height: 180px;"></li>
    <li style="width: 380px; height: 180px; float: left;">
     <img src="img/4.jpg" style="width: 380px; height: 180px;"></li>
    <li style="width: 380px; height: 180px; float: left;">
     <img src="img/5.jpg" style="width: 380px; height: 180px;"></li>
 
    <li style="width: 380px; height: 180px; float: left;">
     <img src="img/1.jpg" style="width: 380px; height: 180px;"></li>
    <li style="width: 380px; height: 180px; float: left;">
     <img src="img/2.jpg" style="width: 380px; height: 180px;"></li>
    <li style="width: 380px; height: 180px; float: left;">
     <img src="img/3.jpg" style="width: 380px; height: 180px;"></li>
    <li style="width: 380px; height: 180px; float: left;">
     <img src="img/4.jpg" style="width: 380px; height: 180px;"></li>
    <li style="width: 380px; height: 180px; float: left;">
     <img src="img/5.jpg" style="width: 380px; height: 180px;"></li>
   </ul>
  </div>
 </div>
 <script type="text/javascript">
  var PlaceTop = parseInt($("#ulID").css("top"));
  var int;
  function moveUL(){
   var ulID = $("#ulID");
   PlaceTop = --PlaceTop;
   if(PlaceTop == -900)
   {
    PlaceTop = 0; 
   }
   ulID.css("top",PlaceTop);
   if(PlaceTop < -900){
    alert("Eror!");
    clearInterval(int);
   }
  }
  int=setInterval("moveUL()",10);
  $(".g1").hover(function(){
   clearInterval(int);
  },function(){
   int=setInterval("moveUL()",10);
  });
 </script>
</body>
</html>

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er zum Lernen aller beiträgt. Ich hoffe auch, dass jeder die PHP-Chinesisch-Website unterstützt.

Weitere Artikel zu JQuery Ad Seamless Carousel-Beispielen finden Sie auf der chinesischen PHP-Website!


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：jQuery Validate-Überprüfung, ein konkretes Beispiel für im Steuerelement geschriebene ÜberprüfungsregelnNächster Artikel：jQuery Validate-Überprüfung, ein konkretes Beispiel für im Steuerelement geschriebene Überprüfungsregeln

In Verbindung stehende Artikel

Mehr sehen