简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Rumah
Artikel
Soal Jawab
Kursus
Topik
Muat turun
Permainan
Kamus
kemas kini terkini

Rumah  >  Artikel  >  hujung hadapan web  >  js mengawal berbilang imej tatal kiri dan kanan menukar kesan kod kemahiran perkongsian_javascript

js mengawal berbilang imej tatal kiri dan kanan menukar kesan kod kemahiran perkongsian_javascript

WBOY
WBOYasal
2016-05-16 15:42:351467semak imbas

Contoh dalam artikel ini menerangkan kesan js mengawal pensuisan tatal kiri dan kanan berbilang imej. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:
Ini ialah alat js tulen yang merealisasikan tatal kiri dan kanan imej yang lancar dengan mengklik butang kiri dan kanan Tatal lalai adalah tatal kiri dan kanan dalam kumpulan 5. Anda boleh mengubah suai parameter js secara manual untuk menukar bilangan slaid.
Paparan operasi: -------------------Lihat kesan-------------------

Petua: Jika penyemak imbas tidak berfungsi dengan betul, anda boleh cuba menukar mod penyemakan imbas.
Kod js yang dikongsi dengan anda untuk mengawal kesan pensuisan tatal kiri dan kanan berbilang imej adalah seperti berikut 

<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>

Di atas ialah kod js untuk mengawal kesan pensuisan tatal kiri dan kanan bagi berbilang imej yang dikongsi dengan anda.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Jenis data asas JavaScript, jenis nilai dan jenis rujukan_kemahiran javascriptArtikel seterusnya：Jenis data asas JavaScript, jenis nilai dan jenis rujukan_kemahiran javascript

Artikel berkaitan

Lihat lagi