JS implementiert problemlos Karussellbilder-js-Tutorial-php.cn

JS implementiert problemlos Karussellbilder

php中世界最好的语言

Freigeben： 2018-04-18 17:10:21

Original

2482 Leute haben es durchsucht

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>

Nach dem Login kopieren

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!