Heim >Web-Frontend >js-Tutorial >JS implementiert problemlos Karussellbilder

JS implementiert problemlos Karussellbilder

php中世界最好的语言Original: 2018-04-18 17:10:212527Durchsuche

Dieses Mal werde ich Ihnen JS zur einfachen Implementierung von Karussellbildern vorstellen. Was sind die Vorsichtsmaßnahmen für die einfache Implementierung von JS zur Implementierung von Karussellbildern?

Dinge:

1. Erstens muss es einen Container zum Speichern von Bildern geben, der auf die Breite und Höhe eines einzelnen Bildes eingestellt ist, und überlauf: ausgeblendet, um sicherzustellen, dass jeweils nur ein Bild angezeigt werden kann
2. Es gibt Eine Liste von Bildern im Container zur Positionierung. Beim Positionieren befinden sich die Bilder im Float-Modus. Wenn die Bilder gedreht werden, führt eine Änderung des Linkswerts der Liste dazu, dass sich die angezeigten Bilder ändern.
3. Das Bildkarussell verwendet einen Timer, sodass die Bilder in einer Schleife angezeigt werden.
4. Löschen Sie den Timer und das Bild stoppt das Karussell, wenn die Maus entfernt wird. Setzen Sie das Karussell fort, wenn es entfernt wird
5. Es gibt eine Reihe kleiner Punkte auf dem Bild, die dem aktuell angezeigten Bild entsprechen, und Sie können darauf klicken, um das entsprechende Bild anzuzeigen
6. Das Bild kann nach links und rechts verschoben werden, indem Sie auf „Anzeigen“

klicken Code:

<!DOCTYPE html>
<htmllang="en">
<head>
 <metacharset="UTF-8">
 <title>轮播图</title>
 <styletype="text/css">
  .container{
   margin:0 auto;
   width:600px;
   height:400px;
   position: relative;
   overflow: hidden;
   border:4px solid gray;
   box-shadow: 3px 3px 5px gray;
   border-radius:10px;
  }
  .list{
   width:4200px;
   height:400px;
   position: absolute;
   top:0px;
  }
  img{
   float:left;
   width:600px;
   height:400px;
  }
  .dots{
   position: absolute;
   left:40%;
   bottom:30px;
   list-style: none;
  }
  .dots li{
   float:left;
   width:8px;
   height:8px;
   border-radius: 50%;
   background: gray;
   margin-left:5px
  }
  .dots .active{
   background: white;
  }
  .pre,.next{
   position: absolute;
   top:40%;
   font-size:40px;
   color:white;
   text-align:center;
   background: rgba(128,128,128,0.5);
   /* display:none;*/
  }
  .pre{
   left:30px;
  }
  .next{
   right:30px;
  }
 </style>
</head>
<body>
 <pclass="container">
  <pclass="list"style=" left:-600px;">
   <imgsrc="img/5.jpg">
   <imgsrc="img/1.jpg">
   <imgsrc="img/2.jpg">
   <imgsrc="img/3.jpg">
   <imgsrc="img/4.jpg">
   <imgsrc="img/5.jpg">
   <imgsrc="img/1.jpg">
  </p>
  <ulclass="dots">
   <liindex=1class="active dot"></li>
   <liindex=2class="dot"></li>
   <liindex=3class="dot"></li>
   <liindex=4class="dot"></li>
   <liindex=5class="dot"></li>
  </ul>
  <pclass="pre"><</p>
  <pclass="next">></p>
 </p>
<scripttype="text/javascript">
 var index=1,timer;
 function init(){
  eventBind();
  autoPlay();
 }
 init();
 function autoPlay(){
   timer =setInterval(function () {
   animation(-600);
   dotIndex(true);
  },1000)
 }
 function stopAutoPlay() {
  clearInterval(timer);
 }
 function dotIndex(add){
  if(add){
   index++;
  }
  else{
   index--;
  }
  if(index>5){
   index = 1;
  }
  if(index<1){
   index=5;
  }
  dotActive();
 }
 function dotActive() {
  vardots=document.getElementsByClassName("dot");
  varlen=dots.length;
  for(vari=0;i<len ;i++){
   dots[i].className="dot";
  }
 
  for(vari=0;i<len;i++){
   /*此处可以不用parseInt，当不用全等时*/
   if(index === parseInt(dots[i].getAttribute("index"))){
    dots[i].className="dot active";
   }
  }
 }
 function eventBind(){
  /*点的点击事件*/
  vardots=document.getElementsByClassName("dot");
  varlen=dots.length;
  for(vari=0;i<len;i++){
   (function(j){
    dots[j].onclick=function(e){
     varind=parseInt(dots[j].getAttribute("index"));
     animation((index - ind)*(-600));/*显示点击的图片*/
     index= ind;
     dotActive();
    }
   })(i)
  }
  /*容器的hover事件*/
  varcon=document.getElementsByClassName("container")[0];
  /*鼠标移动到容器上时，停止制动滑动，离开时继续滚动*/
  con.onmouseover=function(e) {
   stopAutoPlay();
  }
  con.onmouseout=function(e){
   autoPlay();
  }
  /*箭头事件的绑定*/
   varpre=document.getElementsByClassName("pre")[0];
   varnext=document.getElementsByClassName("next")[0];
   pre.onclick=function(e) {
    dotIndex(false);
    animation(600);
   }
  next.onclick=function(e) {
   dotIndex(true);
   animation(-600);
  }
 }
 function animation(offset){
  varlists=document.getElementsByClassName("list")[0];
  varleft=parseInt(lists.style.left.slice(0,lists.style.left.indexOf("p"))) + offset;
  if(left<-3000){
   lists.style.left="-600px";
  }
  else if(left>-600){
   lists.style.left = "-3000px";
  }
  else{
   lists.style.left = left+"px";
  }
 }
</script>
</body>
</html>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

js reguläre Schnellspeichermethode

So fügen Sie Vue0.1-Code zu Vue2.0 hinzu für verwenden

JS implementiert Schachbrettabdeckung

Das obige ist der detaillierte Inhalt vonJS implementiert problemlos Karussellbilder. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen 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：So fügen Sie Vue0.1-Code zur Verwendung zu Vue2.0 hinzuNächster Artikel：So fügen Sie Vue0.1-Code zur Verwendung zu Vue2.0 hinzu

In Verbindung stehende Artikel

Mehr sehen