为啥我的点击不会动，求解
MrFly0
2016-10-25 21:59
<style type="text/css">
*{ padding:0px; margin:0;list-style: none;}
#content{ width: 500px; height: 300px; position:relative; margin: 0 auto;border: 1px solid #FF4500;}
#imgList{position: absolute; height: 300px; width: 10000px;background-color: #FF4533;}
#imgList img{ float: left; width:500px; height: 300px;}
#point{ position: absolute;height:30px;width: 150px; margin-left: -75px; text-align: center; left: 50%; bottom: 10px; }
#point li{float:left; width:20px; height:20px;margin-right:5px; border-radius:10px; background-color:#FF4500;line-height: 20px; text-align: center;}
#btnL,#btnR{ cursor:pointer;position: absolute; top: 50%;margin-top: -25px; height: 50px; width: 30px; background-color:rgba(0,0,0,0.5); text-align: center;line-height: 50px; color: #fff;}
#btnR{ right:20px;}
#btnL{left: 20px;}
</style>
<script type="text/javascript">
window.onload= function(){
var oImgList =document.getElementById('imgList');
var oPoints =document.getElementById('point');
var oBtnL =document.getElementById('btnL');
var oBtnR =document.getElementById('btnR');
oBtnL.onclick =function(){
oImgList.style.left = parseInt(oImgList.style.left) - 500 +'px';
console.log(parseInt(oImgList.style.left));
}
}
</script>
<body>
<div id="content">
<div id="imgList">
<img src="img/1.jpg"/>
<img src="img/2.jpg"/>
<img src="img/3.jpg"/>
<img src="img/4.jpg"/>
<img src="img/5.jpg"/>
</div>
<ul id="point">
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<a id="btnL"><</a>
<a id="btnR">></a>
</div>
</body>
2回答
-
- 凡芒至尊
- 2016-11-16 23:22:44
???小白同问
-
- MrFly0
- 2016-10-25 22:08:25
原来是忘记设置行间样式了；
焦点图轮播特效
65232 学习 · 611 问题
相似问题