suchen

Heim  >  Artikel  >  Web-Frontend  >  jquery implementiert geplante automatische Karussell-Spezialeffekte_jquery

jquery implementiert geplante automatische Karussell-Spezialeffekte_jquery

WBOY
WBOYOriginal
2016-05-16 15:26:361956Durchsuche

Dieses Karussellbild wurde basierend auf dem vorherigen Artikel geschrieben jQuery manueller Klick, um Bildkarusselleffekte zu erzielen , das heißt, was dieses Mal gezeigt wird, ist ein manuelles Programm für den Klickkarusselleffekt und Ich empfehle Freunden, die kontinuierlich lernen möchten, meine vorherigen Artikel zu lesen und dann diesen Artikel zu lesen~~~~

Werfen wir einen Blick auf den endgültigen geplanten automatischen Karusselleffekt und den manuellen Klick-Karusselleffekt:

Der Grund, warum die obige Anzeigeanimation schneller ist, liegt darin, dass meine Screenshot-Software die grüne Version ist, die kostenlos ist ~~~ Sie wissen, sie bleibt hängen. Der tatsächliche Effekt ist langsamer als diese Geschwindigkeit und immer noch gleichmäßig. und kann kommerziell verwendet werden. Die obige Anzeigeanimation kann daher nur als Referenz für den fertigen Effekt verwendet werden.
1. Hauptprogramm

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>轮播图①（手动点击轮播）</title>
  <link type="text/css" rel="stylesheet" href="css/layout.css" />
 </head>
 <body>
  <div class="slideShow">
   <!--图片布局开始-->
   <ul>
    <li><a href="#"><img src="img/picture01.jpg" /></a></li>
    <li><a href="#"><img src="img/picture02.jpg" /></a></li>
    <li><a href="#"><img src="img/picture03.jpg" /></a></li>
    <li><a href="#"><img src="img/picture04.jpg" /></a></li>
   </ul>
   <!--图片布局结束-->
   
   <!--按钮布局开始-->
   <div class="showNav">
    <span class="active">1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
   </div>
   <!--按钮布局结束-->
  </div>
  <script src="js/jquery-1.11.3.js"></script>
  <script src="js/layout.js"></script>
 </body>
</html>

Nun, das Hauptprogramm oben unterscheidet sich nicht vom vorherigen Artikel und es wurden keine Änderungen vorgenommen. Wenn Sie interessiert sind, können Sie sich den ersten Artikel ansehen. Der Schwerpunkt meines Aufsatzes wird dieses Mal liegen im Jquery-Programm
2. CSS-Stil

*{
 margin: 0;
 padding: 0;
}
ul{
 list-style: none;
}
.slideShow{
 width: 346px;
 height: 210px;  /*其实就是图片的高度*/
 border: 1px #eeeeee solid;
 margin: 100px auto;
 position: relative;
 overflow: hidden; /*此处需要将溢出框架的图片部分隐藏*/
}
.slideShow ul{
 width: 2000px;
 position: relative;  /*此处需注意relative : 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置，如果没有这个属性，图片将不可左右移动*/
}
.slideShow ul li{
 float: left;  /*让四张图片左浮动，形成并排的横着布局，方便点击按钮时的左移动*/
 width: 346px;
}
.slideShow .showNav{  /*用绝对定位给数字按钮进行布局*/
 position: absolute;
 right: 10px;
 bottom: 5px;
 text-align:center;
 font-size: 12px; 
 line-height: 20px;
}
.slideShow .showNav span{
 cursor: pointer;
 display: block;
 float: left;
 width: 20px;
 height: 20px;
 background: #ff5a28;
 margin-left: 2px;
 color: #fff;
}
.slideShow .showNav .active{
 background: #b63e1a;
}

3. jQuery-Programm
Lassen Sie uns zunächst über das Prinzip der geplanten automatischen Rotation sprechen:
1. Zuerst müssen Sie einen Timer starten. Gehen Sie davon aus, dass die Timerzeit auf 2000 ms eingestellt ist, d. h. der 2S-Timer führt einen Vorgang aus
2. Der vom Timer alle 2 Sekunden ausgeführte Vorgang besteht darin, das Klicken auf die Zifferntasten nacheinander zu simulieren, d. h. das Klickereignis auszulösen, um das Bild nach links zu verschieben
Schauen wir uns zunächst den jQueryCode 1 an, um den allgemeinen Effekt zu erzielen: 

 var timer=null; //定时器返回值，主要用于关闭定时器
  var iNow=0;  //iNow为正在展示的图片索引值，当用户打开网页时首先显示第一张图，即索引值为0
  timer=setInterval(function(){  //打开定时器
   iNow++;       //让图片的索引值次序加1，这样就可以实现顺序轮播图片
   showNumber.eq(iNow).trigger("click"); //模拟触发数字按钮的click事件
  },2000); //2000为轮播的时间
Das obige Programm kann den Karusselleffekt von Bildern alle 2 Sekunden erzielen, aber das Karussell stoppt, wenn es das letzte Bild erreicht, da es nicht bestimmt, ob iNow das letzte Bild erreicht hat, daher ist der folgende

Code Zwei : 

var timer=null; //定时器返回值，主要用于关闭定时器
  var iNow=0;  //iNow为正在展示的图片索引值，当用户打开网页时首先显示第一张图，即索引值为0
  timer=setInterval(function(){  //打开定时器
   iNow++;       //让图片的索引值次序加1，这样就可以实现顺序轮播图片
   if(iNow>showNumber.length-1){ //当到达最后一张图的时候，让iNow赋值为第一张图的索引值，轮播效果跳转到第一张图重新开始
    iNow=0;
   }
   showNumber.eq(iNow).trigger("click"); //模拟触发数字按钮的click
  },2000); //2000为轮播的时间
Das vollständige Codeprogramm des jQuery-Programms lautet also wie folgt: 


$(document).ready(function(){
 var slideShow=$(".slideShow"),  //获取最外层框架的名称
  ul=slideShow.find("ul"),  
  showNumber=slideShow.find(".showNav span"),//获取按钮
  oneWidth=slideShow.find("ul li").eq(0).width(); //获取每个图片的宽度
  var timer=null; //定时器返回值，主要用于关闭定时器
  var iNow=0;  //iNow为正在展示的图片索引值，当用户打开网页时首先显示第一张图，即索引值为0
  
  showNumber.on("click",function(){   //为每个按钮绑定一个点击事件  
   $(this).addClass("active").siblings().removeClass("active"); //按钮点击时为这个按钮添加高亮状态，并且将其他按钮高亮状态去掉
   var index=$(this).index(); //获取哪个按钮被点击，也就是找到被点击按钮的索引值
   ul.animate({
    "left":-oneWidth*iNow, //注意此处用到left属性，所以ul的样式里面需要设置position: relative; 让ul左移N个图片大小的宽度，N根据被点击的按钮索引值index确定
   })
  });
  
  timer=setInterval(function(){  //打开定时器
   iNow++;       //让图片的索引值次序加1，这样就可以实现顺序轮播图片
   if(iNow>showNumber.length-1){ //当到达最后一张图的时候，让iNow赋值为第一张图的索引值，轮播效果跳转到第一张图重新开始
    iNow=0;
   }
   showNumber.eq(iNow).trigger("click"); //模拟触发数字按钮的click
  },2000); //2000为轮播的时间
})
Die obigen Kommentare sind sehr detailliert, hauptsächlich für Freunde, die lernen möchten. Tatsächlich kommentiere ich jedoch nicht so ausführlich, wenn ich Programme schreibe Sie sehen Folgendes: Das jQuery-Programm ist fertig, was ein großer Fehler ist, da der automatische Karusselleffekt korrekt ist, aber beim manuellen Klicken ein Fehler auftritt. Ich habe speziell eine GIF-Animation erstellt, um den Fehlereffekt anzuzeigen:


Wenn Sie den oben genannten Effekt sehen, werden Sie plötzlich feststellen, dass beim automatischen Drehen der Bilder, selbst wenn Sie auf die Schaltfläche klicken, nur ein Echo angezeigt wird und Sie zu der Schaltfläche springen, auf die Sie geklickt haben, diese sich jedoch nach dem bloßen Drücken immer noch dreht Die Reihenfolge, unabhängig von der Karussellreihenfolge, sollten Sie nach dem Klicken auf die Schaltfläche

Was den Grund betrifft

Dies liegt daran, dass der Indexwert beim manuellen Klicken nicht dem Bildindex iNow des Timers zugewiesen ist, sodass iNow den Indexwert der Schaltfläche, auf die Sie geklickt haben, nicht speichern kann. Das heißt, es weiß nicht, auf welche Schaltfläche Sie geklickt haben der Grund, dann das Folgende Es muss geändert werden.

Die endgültige Version des jQuery-Programms nach der Änderung ist: 


$(document).ready(function(){
 var slideShow=$(".slideShow"),  //获取最外层框架的名称
  ul=slideShow.find("ul"),  
  showNumber=slideShow.find(".showNav span"),//获取按钮
  oneWidth=slideShow.find("ul li").eq(0).width(); //获取每个图片的宽度
  var timer=null; //定时器返回值，主要用于关闭定时器
  var iNow=0;  //iNow为正在展示的图片索引值，当用户打开网页时首先显示第一张图，即索引值为0
  
  showNumber.on("click",function(){   //为每个按钮绑定一个点击事件  
   $(this).addClass("active").siblings().removeClass("active"); //按钮点击时为这个按钮添加高亮状态，并且将其他按钮高亮状态去掉
   var index=$(this).index(); //获取哪个按钮被点击，也就是找到被点击按钮的索引值
   iNow=index;
   ul.animate({
    "left":-oneWidth*iNow, //注意此处用到left属性，所以ul的样式里面需要设置position: relative; 让ul左移N个图片大小的宽度，N根据被点击的按钮索引值iNOWx确定
   })
  });
  
  timer=setInterval(function(){  //打开定时器
   iNow++;       //让图片的索引值次序加1，这样就可以实现顺序轮播图片
   if(iNow>showNumber.length-1){ //当到达最后一张图的时候，让iNow赋值为第一张图的索引值，轮播效果跳转到第一张图重新开始
    iNow=0;
   }
   showNumber.eq(iNow).trigger("click"); //模拟触发数字按钮的click
  },2000); //2000为轮播的时间
})
Das Obige ist der gesamte Inhalt dieses Artikels. Das nächste Mal werde ich Ihnen den Code mitteilen, der die Drehung des Bildes stoppt, wenn die Maus über dem Karussellbild steht, und die Drehung fortsetzt, nachdem die Maus entfernt wurde Ich werde nicht weggehen.

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：AngularJS implementiert die manuelle Formularüberprüfung und die automatische Formularüberprüfung_AngularJSNächster Artikel：AngularJS implementiert die manuelle Formularüberprüfung und die automatische Formularüberprüfung_AngularJS

In Verbindung stehende Artikel

Mehr sehen