关于前端html、js 的问题！为什么我写的幻灯片js没反应不能切换？
<!doctypehtml><html><head><metacharset="utf-8"><title>幻灯片</title></head><style>#banne...
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>幻灯片</title>
</head>
<style>
#banner-wpar{
width:520px;
height:280px;
border:1px solid blue;
overflow:hidden;
margin:0 auto;
position:relative;
}
.conter-width{
width:5000px;
position:relative;
left:0;
}
.banner-nav-left{
position:absolute;
top:120px;
left:0;
}
.banner-nav-rig{
position:absolute;
top:120px;
left:496px;
}
#banner-wpar ul{
position:absolute;
top:210px;
left:200px;
float:left;
}
#banner-wpar ul li{
float:left;
margin:17px;
}
</style>
<body>
<div id="banner-wpar">
<div class="conter-width">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img class="banner-nav-left" src="left.png">
<img class="banner-nav-rig" src="rig.png">
<ul >
<a href=""><li></li></a >
<a><li></li></a >
<a><li></li></a >
</ul>
</div>
</div>
<script>
var conter_width = document.getElementsByClassName('conter-width')[0];
var banner_nav_left = document.getElementsByClassName('banner-nav-left')[0];
var banner_nav_rig = document.getElementsByClassName('banner-nav-rig')[0];
var oimg = conter_width.getElementsByTagName('img')[0];
var oimgw = oimg.clientWidth;
banner_nav_left.onclick = function (){
conter_width.style.left = -oimgw+'px'
}
</script>
</body>
</html> 展开
<html>
<head>
<meta charset="utf-8">
<title>幻灯片</title>
</head>
<style>
#banner-wpar{
width:520px;
height:280px;
border:1px solid blue;
overflow:hidden;
margin:0 auto;
position:relative;
}
.conter-width{
width:5000px;
position:relative;
left:0;
}
.banner-nav-left{
position:absolute;
top:120px;
left:0;
}
.banner-nav-rig{
position:absolute;
top:120px;
left:496px;
}
#banner-wpar ul{
position:absolute;
top:210px;
left:200px;
float:left;
}
#banner-wpar ul li{
float:left;
margin:17px;
}
</style>
<body>
<div id="banner-wpar">
<div class="conter-width">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img class="banner-nav-left" src="left.png">
<img class="banner-nav-rig" src="rig.png">
<ul >
<a href=""><li></li></a >
<a><li></li></a >
<a><li></li></a >
</ul>
</div>
</div>
<script>
var conter_width = document.getElementsByClassName('conter-width')[0];
var banner_nav_left = document.getElementsByClassName('banner-nav-left')[0];
var banner_nav_rig = document.getElementsByClassName('banner-nav-rig')[0];
var oimg = conter_width.getElementsByTagName('img')[0];
var oimgw = oimg.clientWidth;
banner_nav_left.onclick = function (){
conter_width.style.left = -oimgw+'px'
}
</script>
</body>
</html> 展开
1个回答
展开全部
banner_nav_left.addEventListener('click',a);
function a(){
conter_width.style.left = -oimgw+'px'
} 对于点击事件修改为这样子，但是楼楼要知道一件事情，那就是这个方法不如img标签DOM操作的Element.setAttribute('src','图片地址')好用，并且有些时候CSS不能够很完美的兼容
更多追问追答
追问
我把banner_nav_left.onclick = function (){
conter_width.style.left = -oimgw+'px'
}修改为
banner_nav_left.addEventListener('click',a);function a(){ conter_width.style.left = -oimgw+'px'}
还是没反应啊 能教教我吗？
追答
我的有反应，这个就是最终的结果，如果实在不信直接只使用一张图片换图片的时候直接切换就可以了
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
