So implementieren Sie ein Karussell in Javascript

So implementieren Sie das Karussell in JavaScript: 1. Erstellen Sie die HTML-Basiscodedatei. 2. Initialisieren Sie das Zurücksetzen. 3. Verwenden Sie die Methode „function animate(obj, json, fn) {...}“. der Karusselleffekt.

Die Betriebsumgebung dieses Artikels: Windows 7-System, JavaScript-Version 1.8.5, DELL G3-Computer.

Wie implementiert JavaScript ein Karussell?

Der spezifische Code für JavaScript zum Implementieren eines Karussellbildes dient als Referenz. Der spezifische Inhalt lautet wie folgt:

HTML-Code-Snippet

Fügen Sie das Bild selbst hinzu, oder Verwenden Sie Ihr eigenes hochgeladenes Foto, scrollen Sie nach unten, um den

<div class="wrap" id="wrap">
 <div class="slide" id="slide">
 <ul>
  <li><a href="#" ><img src="images/slidepic1.jpg" alt=""/></a></li>
  <li><a href="#" ><img src="images/slidepic2.jpg" alt=""/></a></li>
  <li><a href="#" ><img src="images/slidepic3.jpg" alt=""/></a></li>
  <li><a href="#" ><img src="images/slidepic4.jpg" alt=""/></a></li>
  <li><a href="#" ><img src="images/slidepic5.jpg" alt=""/></a></li>
 </ul>
 <div class="arrow" id="arrow">
  <a href="javascript:;" class="prev" id="arrLeft"></a>
  <a href="javascript:;" class="next" id="arrRight"></a>
 </div>
 </div>
</div>

css-Codeausschnitt zu sehen:

Initialisierung zurückgesetzt

blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul {
 margin: 0;
 padding: 0
}
 
body, button, input, select, textarea {
 font: 12px/1.5 "Microsoft YaHei", "微软雅黑", SimSun, "宋体", sans-serif;
 color: #666;
}
 
ol, ul {
 list-style: none;
}
 
a {
 text-decoration: none;
}
 
fieldset, img {
 border: 0;
 vertical-align: top;
}
 
a, input, button, select, textarea {
 outline: none;
}
 
a, button {
 cursor: pointer;
}
 
.wrap {
 width: 1200px;
 margin: 100px auto;
}
 
.slide {
 height: 500px;
 position: relative;
}
 
.slide li {
 position: absolute;
 left: 200px;
 top: 0;
}
 
.slide li img {
 width: 100%;
}
 
.arrow {
 opacity: 0;
 position: absolute;
 top: 50%;
 z-index: 1000;
 width: 100%;
}
 
.prev, .next {
 width: 76px;
 height: 112px;
 position: absolute;
 z-index: 99;
}
 
.prev {
 left: 0;
 background: url(../images/prev.png) no-repeat;
}
 
.next {
 right: 0;
 background-image: url(../images/next.png);
}

js-Codeausschnitt:

Dies ist der gekapselte JS-Code, Sie können ihn direkt zitieren

function animate(obj, json, fn) {
 clearInterval(obj.timer);
 obj.timer = setInterval(function () {
  var flag = true;
  for (var k in json) {
  if (k === "opacity") {
   var leader = getStyle(obj, k) * 100;
   var target = json[k] * 100;
   var step = (target - leader) / 10;
   step = step > 0 ? Math.ceil(step) : Math.floor(step);
   leader = leader + step;
   obj.style[k] = leader / 100;
  } else if (k === "zIndex") {
   obj.style.zIndex = json[k];
  } else {
   var leader = parseInt(getStyle(obj, k)) || 0;
   var target = json[k];
   var step = (target - leader) / 10;
   step = step > 0 ? Math.ceil(step) : Math.floor(step);
   leader = leader + step;
   obj.style[k] = leader + "px";
  }
  if (leader != target) {
   flag = false;
  }
  }
  if (flag) {
  clearInterval(obj.timer);
  if (fn) {
   fn();
  }
  }
 }, 15);
 }
 function getStyle(obj, attr) {
 if (window.getComputedStyle) {
  return window.getComputedStyle(obj, null)[attr];
 } else {
  return obj.currentStyle[attr];
 }
 }

onload definieren Funktion, jedes Objekt abrufen, das Mauspassereignis festlegen, die Maus, die durch das Karussellbild läuft, zeigt nach und nach den Pfeil an und verschwindet, wenn die Maus es verlässt, und legt dann die Bildposition fest (weist dem Objekt einen Wert zu)

window.onload = function () {
 //alert("外部的JS");
 //找人
 var wrap = document.getElementById("wrap");
 var arrow = document.getElementById("arrow");
 var arrLeft = document.getElementById("arrLeft");
 var arrRight = document.getElementById("arrRight");
 var slide = document.getElementById("slide");
 var ul = slide.children[0];
 var lis = ul.children;//所有图片
 //1.鼠标经过轮播图 让箭头渐渐地显示 鼠标离开渐渐消失
 wrap.onmouseover = function () {
 animate(arrow, {"opacity": 1});
 };
 wrap.onmouseout = function () {
 animate(arrow, {"opacity": 0});
 };
 //2.设置图片位置
 
 var config = [
 {
  "width": 400,
  "top": 20,
  "left": 50,
  "opacity": 0.2,
  "zIndex": 2
 },//0
 {
  "width": 600,
  "top": 70,
  "left": 0,
  "opacity": 0.8,
  "zIndex": 3
 },//1
 {
  "width": 800,
  "top": 100,
  "left": 200,
  "opacity": 1,
  "zIndex": 4
 },//2
 {
  width: 600,
  top: 70,
  left: 600,
  opacity: 0.8,
  zIndex: 3
 },//3
 {
  "width": 400,
  "top": 20,
  "left": 750,
  "opacity": 0.2,
  "zIndex": 2
 }//4
 ];//其实就是一个配置单 规定了每张图片的大小位置层级透明度
 
 //获取页面上所有的li 让他们从当前的位置 以动画的效果到指定的位置
 function assign() {
 for (var i = 0; i < lis.length; i++) {
  animate(lis[i], config[i], function () {
  flag = true;//动画执行完成后重新打开阀门
  });
 }
 }
 
 assign();
 //3.点击箭头旋转
 //点击右箭头
 arrRight.onclick = function () {
 if (flag) {
  flag = false;//关闭阀门
  //把开始的元素放到最后
  config.push(config.shift());
  assign();
 }
 };
 //点击左箭头
 arrLeft.onclick = function () {
 if (flag) {
  flag = false;
  //把最后的元素放到开始
  config.unshift(config.pop());
  assign();
 }
 
 };
 //4.添加节流阀
 var flag = true;//表示阀门是打开的
 
};

Ich habe gerade erst angefangen, in die Front-End-Branche einzusteigen. Ich hoffe, Sie können mir helfen. Wenn Sie Kommentare haben, hinterlassen Sie mir bitte eine Nachricht. Ihre Unterstützung ist meine größte Motivation.

Empfohlenes Studium: „Javascript Basics Tutorial“

Das obige ist der detaillierte Inhalt vonSo implementieren Sie ein Karussell in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!