<!html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<style>
body {padding:0; margin:0;}
.style-banner img{ margin:0 auto;}
.banner-box{ width:100%; height:560px; /*background:url(../images/banner-bgtu.jpg) no-repeat top center;*/}
.banner{ height:310px; position:relative; overflow:hidden;}
.banner .ban-ul1 {padding:0;}
.banner li{ float:left; width:100%; list-style:none; }
.banner li img {width:100%; height:361px;}
.banner .bnr{ display:inline-block; width:67px; height:121px; line-height:121px; text-align:center; background-color:#000; color:#fff; font-size:36px; font-family:"宋體"; opacity:0.3; position:absolute; top:220px; left:311px;}
.banner .bnr-right{ left:1120px;}
.banner .ban-box {position:absolute; left:50%; bottom:0px; width:360px; height:30px; margin-left:-150px; transition:1s;}
.banner .ban-oli {position:absolute; bottom:15px; left:60px; margin-left:-35px; }
.banner .ban-ol1 li{ width:70px; height:10px; margin:0 5px; background-color:rgba(47,152,238,0.6);}
</style>
</head>
<body>
<div class="banner">
<ul class="ban-ul1">
<li><a href="JavaScript:;"><img src="https://img.uj5u.com/2020/09/12/54791120422011.jpg"></a></li>
<li><a href="JavaScript:;"><img src="https://img.uj5u.com/2020/09/12/54791120422012.jpg"></a></li>
<li><a href="JavaScript:;"><img src="https://img.uj5u.com/2020/09/12/54791120422013.jpg"></a></li>
</ul>
<div class="ban-box">
<ol class="ban-ol1">
<li class="current"></li>
<li></li>
<li></li>
</ol>
<div class="clear"></div>
</div>
</div>
<script>
var btn = document.getElementsByClassName('ban-ol1')[0].children;
var img = document.getElementsByClassName('ban-ul1');
//console.log(btn)
for (var i = 0; i < btn.length; i++){
//console.log(i)
btn[i].index = i;
//console.log(i)
btn[i].onclick = function () {
var index = this.index;
//console.log(index)
img.style.left = "-" + index * 100 + "%";
}
}
</script>
</body>
</html>
uj5u.com熱心網友回復：
var img = document.getElementsByClassName('ban-ul1'); 這個獲取的是偽陣列 img.style.left = "-" + index * 100 + "%"; 陣列有style物件嗎 肯定沒uj5u.com熱心網友回復：
var oimg = Array.prototype.slice.call(img);
console.log(typeof(oimg))
for (var i = 0; i < btn.length; i++){
btn[i].index = i;
btn[i].onclick = function () {
var index = this.index;
oimg.style.left = "-" + index * 100 + "%";
}
}
我改了img資料型別，object為什么報錯？
uj5u.com熱心網友回復：
var img = document.querySelector('.ban-ul1')或者var img = document.getElementsByClassName('ban-ul1')[0]轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/10600.html
標籤：JavaScript