js steuert mehrere Bilder, scrollt nach links und rechts, wechselt den Effektcode und teilt Javascript-Kenntnisse-js-Tutorial-php.cn

Das Beispiel in diesem Artikel beschreibt die Wirkung von js, das den Wechsel nach links und rechts beim Scrollen mehrerer Bilder steuert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Dies ist ein reines JS-Tool, das durch Klicken auf die linke und rechte Schaltfläche ein automatisches, sanftes Scrollen von Bildern nach links und rechts ermöglicht. Standardmäßig erfolgt das Scrollen nach links und rechts in Gruppen von 5. Sie können die JS-Parameter manuell ändern, um die Anzahl der Folien zu ändern.
Vorgangsrendering: -------------------Effekt anzeigen---------------------------------

Tipps: Wenn der Browser nicht richtig funktioniert, können Sie versuchen, den Browsermodus zu wechseln.
Der mit Ihnen geteilte js-Code zur Steuerung des Links- und Rechts-Scroll-Umschalteffekts mehrerer Bilder lautet wie folgt

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js控制多图左右滚动切换效果</title>
<link href="css/jiaobenzhijia.css" type="text/css" rel="stylesheet" />
<script type="text/javascript">
window.onload = function () {
 var oBtnLeft = document.getElementById("goleft");
 var oBtnRight = document.getElementById("goright");
 var oDiv = document.getElementById("indexmaindiv");
 var oDiv1 = document.getElementById("maindiv1");
 var oUl = oDiv.getElementsByTagName("ul")[0];
 var aLi = oUl.getElementsByTagName("li");
 var now = -5 * (aLi[0].offsetWidth + 13);
 oUl.style.width = aLi.length * (aLi[0].offsetWidth + 13) + 'px';
 oBtnRight.onclick = function () {
 var n = Math.floor((aLi.length * (aLi[0].offsetWidth + 13) + oUl.offsetLeft) / aLi[0].offsetWidth);

 if (n <= 5) {
 move(oUl, 'left', 0);
 }
 else {
 move(oUl, 'left', oUl.offsetLeft + now);
 }
 }
 oBtnLeft.onclick = function () {
 var now1 = -Math.floor((aLi.length / 5)) * 5 * (aLi[0].offsetWidth + 13);

 if (oUl.offsetLeft >= 0) {
 move(oUl, 'left', now1);
 }
 else {
 move(oUl, 'left', oUl.offsetLeft - now);
 }
 }
 var timer = setInterval(oBtnRight.onclick, 5000);
 oDiv.onmouseover = function () {
 clearInterval(timer);
 }
 oDiv.onmouseout = function () {
 timer = setInterval(oBtnRight.onclick, 5000);
 }

};

function getStyle(obj, name) {
 if (obj.currentStyle) {
 return obj.currentStyle[name];
 }
 else {
 return getComputedStyle(obj, false)[name];
 }
}

function move(obj, attr, iTarget) {
 clearInterval(obj.timer)
 obj.timer = setInterval(function () {
 var cur = 0;
 if (attr == 'opacity') {
 cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
 }
 else {
 cur = parseInt(getStyle(obj, attr));
 }
 var speed = (iTarget - cur) / 6;
 speed = speed > 0 &#63; Math.ceil(speed) : Math.floor(speed);
 if (iTarget == cur) {
 clearInterval(obj.timer);
 }
 else if (attr == 'opacity') {
 obj.style.filter = 'alpha(opacity:' + (cur + speed) + ')';
 obj.style.opacity = (cur + speed) / 100;
 }
 else {
 obj.style[attr] = cur + speed + 'px';
 }
 }, 30);
} 
</script>
</head>
<body style="background:#CCC;">

<div class="indexmaindiv" id="indexmaindiv">
 <div class="indexmaindiv1 clearfix" >
 <div class="stylesgoleft" id="goleft"></div>
 <div class="maindiv1 " id="maindiv1">
 <ul id="count1">
 <li>
 <div class="playerdetail">
 <div class="detailimg"><img src="images/1.jpg" /></div>
 <div class="teanames">乐静老师1</div>
 <div class="teadetail">获得新加坡南阳理工学院计算机学士学位擅长营销学培训</div>
 <a class="checkdetail" href="http://www.jb51.net"></a>
 </div>
 </li>
 <li>
 <div class="playerdetail">
 <div class="detailimg"><img src="images/2.jpg" /></div>
 <div class="teanames">乐静老师2</div>
 <div class="teadetail">获得新加坡南阳理工学院计算机学士学位擅长营销学培训</div>
 <a class="checkdetail" href="http://www.jb51.net"></a>
 </div>
 </li>
 <li>
 <div class="playerdetail">
 <div class="detailimg"><img src="images/3.jpg" /></div>
 <div class="teanames">乐静老师3</div>
 <div class="teadetail">获得新加坡南阳理工学院计算机学士学位擅长营销学培训</div>
 <a class="checkdetail" href="http://www.jb51.net"></a>
 </div>
 </li>
 <li>
 <div class="playerdetail">
 <div class="detailimg"><img src="images/4.jpg" /></div>
 <div class="teanames">乐静老师4</div>
 <div class="teadetail">获得新加坡南阳理工学院计算机学士学位擅长营销学培训</div>
 <a class="checkdetail" href="http://www.jb51.net"></a>
 </div>
 </li>
 <li>
 <div class="playerdetail">
 <div class="detailimg"><img src="images/5.jpg" /></div>
 <div class="teanames">乐静老师5</div>
 <div class="teadetail">获得新加坡南阳理工学院计算机学士学位擅长营销学培训</div>
 <a class="checkdetail" href="http://www.jb51.net"></a>
 </div>
 </li>
 <li>
 <div class="playerdetail">
 <div class="detailimg"><img src="images/6.jpg" /></div>
 <div class="teanames">乐静老师6</div>
 <div class="teadetail">获得新加坡南阳理工学院计算机学士学位擅长营销学培训</div>
 <a class="checkdetail" href="http://www.jb51.net"></a>
 </div>
 </li>
 <li>
 <div class="playerdetail">
 <div class="detailimg"><img src="images/7.jpg" /></div>
 <div class="teanames">乐静老师7</div>
 <div class="teadetail">获得新加坡南阳理工学院计算机学士学位擅长营销学培训</div>
 <a class="checkdetail" href="http://www.jb51.net"></a>
 </div>
 </li>
 <li>
 <div class="playerdetail">
 <div class="detailimg"><img src="images/8.jpg" /></div>
 <div class="teanames">乐静老师8</div>
 <div class="teadetail">获得新加坡南阳理工学院计算机学士学位擅长营销学培训</div>
 <a class="checkdetail" href="http://www.jb51.net"></a>
 </div>
 </li>
 <li>
 <div class="playerdetail">
 <div class="detailimg"><img src="images/1.jpg" /></div>
 <div class="teanames">乐静老师9</div>
 <div class="teadetail">获得新加坡南阳理工学院计算机学士学位擅长营销学培训</div>
 <a class="checkdetail" href="http://www.jb51.net"></a>
 </div>
 </li>
 <li>
 <div class="playerdetail">
 <div class="detailimg"><img src="images/2.jpg" /></div>
 <div class="teanames">乐静老师10</div>
 <div class="teadetail">获得新加坡南阳理工学院计算机学士学位擅长营销学培训</div>
 <a class="checkdetail" href="http://www.jb51.net"></a>
 </div>
 </li>
 <li>
 <div class="playerdetail">
 <div class="detailimg"><img src="images/3.jpg" /></div>
 <div class="teanames">乐静老师11</div>
 <div class="teadetail">获得新加坡南阳理工学院计算机学士学位擅长营销学培训</div>
 <a class="checkdetail" href="http://www.jb51.net"></a>
 </div>
 </li>
 <li>
 <div class="playerdetail">
 <div class="detailimg"><img src="images/4.jpg" /></div>
 <div class="teanames">乐静老师12</div>
 <div class="teadetail">获得新加坡南阳理工学院计算机学士学位擅长营销学培训</div>
 <a class="checkdetail" href="http://www.jb51.net"></a>
 </div>
 </li>
 <li>
 <div class="playerdetail">
 <div class="detailimg"><img src="images/5.jpg" /></div>
 <div class="teanames">乐静老师13</div>
 <div class="teadetail">获得新加坡南阳理工学院计算机学士学位擅长营销学培训</div>
 <a class="checkdetail" href="http://www.jb51.net"></a>
 </div>
 </li>
 <li>
 <div class="playerdetail">
 <div class="detailimg"><img src="images/6.jpg" /></div>
 <div class="teanames">乐静老师14</div>
 <div class="teadetail">获得新加坡南阳理工学院计算机学士学位擅长营销学培训</div>
 <a class="checkdetail" href="http://www.jb51.net"></a>
 </div>
 </li>
 <li>
 <div class="playerdetail">
 <div class="detailimg"><img src="images/7.jpg" /></div>
 <div class="teanames">乐静老师15</div>
 <div class="teadetail">获得新加坡南阳理工学院计算机学士学位擅长营销学培训</div>
 <a class="checkdetail" href="http://www.jb51.net"></a>
 </div>
 </li>
 </ul>
 </div>
 <div class="stylesgoright" id="goright"></div>
 </div>
</div>
</body>
</html>

Nach dem Login kopieren

Das Obige ist der JS-Code zur Steuerung des Links- und Rechts-Scroll-Umschalteffekts mehrerer mit Ihnen geteilter Bilder. Ich hoffe, er gefällt Ihnen.