问题描述
- 用JS实现图片轮播的问题,谢谢了
-
我又来问问题了,(自学JS没人请教也是尴尬,好像找个师傅啊),下面是问题 谢谢了
这是图片轮播代码,麻烦大家,在浏览器打开看下,这样能说清楚问题<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin:0; padding:0;} li{list-style:none; background:#f60; float:left; margin-right:10px; border-radius:8px; padding:2px 6px; cursor:pointer; text-align:center;} ul{width:140px; position:absolute; bottom:20px; right:20px;} .main{width:720px; height:450px; margin:0 auto; position:relative; left:0; top:100px; border:5px green solid;} .abc{width:720px; height:106px; margin:auto; margin-top:120px; background:#ccc; text-align:center;} .abc img{margin-right:10px; width:144px; height:90px; margin-top:8px;} </style> </head> <body> <div class="main"> <img src="1.jpg" id="tp"/> <ul> <li id="dianji1" onmousemove="showA(1)">1</li> <li id="dianji2" onmousemove="showA(2)">2</li> <li id="dianji3" onmousemove="showA(3)">3</li> <li id="dianji4" onmousemove="showA(4)">4</li> </ul> </div> <div class="abc"> <img src="1.jpg" id="pic1" onmousemove="showB(1)"/> <img src="2.jpg" id="pic2" onmousemove="showB(2)"/> <img src="3.jpg" id="pic3" onmousemove="showB(3)"/> <img src="4.jpg" id="pic4" onmousemove="showB(4)"/> </div> <script type="text/javascript"> var gh=1; var mc=1; var tup=['http://a1.qpic.cn/psb?/V11aE2wE1DtywZ/I93pSorEWp54MpVhMNDEuPoY6sWU2y4sel7zcxygX0U!/b/dAMAAAAAAAAA&bo=0ALCAdACwgEBCS4!&rf=viewer_4', 'http://a2.qpic.cn/psb?/V11aE2wE1DtywZ/gYhbpYS80HxerKihb7FP8Xz6oBPopJd4Dv.Or6VNIJM!/b/dFgAAAAAAAAA&bo=0ALCAdACwgEBACc!&rf=viewer_4', 'http://a2.qpic.cn/psb?/V11aE2wE1DtywZ/kC2U6ySDDMDiJi7Dmk5TtdH7S609Ny4mhTFEO96rNjg!/b/dGQAAAAAAAAA&bo=0ALCAdACwgEBACc!&rf=viewer_4', 'http://a1.qpic.cn/psb?/V11aE2wE1DtywZ/vC9QsPEduvx6GCOIpq80bXh0t3oUAIzT2smAfm*lrwY!/b/dB4AAAAAAAAA&bo=0ALCAdACwgEBACc!&rf=viewer_4']; document.getElementById('dianji1').style.backgroundColor='black'; document.getElementById('dianji1').style.color='white'; document.getElementById('pic1').style.border='3px #f60 solid'; function showA(a){ var dianjigh=document.getElementById('dianji'+gh); var dianjia=document.getElementById('dianji'+a); dianjigh.style.backgroundColor='#f60'; dianjigh.style.color='black'; document.getElementById('pic'+gh).style.border='none'; dianjia.style.backgroundColor='black'; dianjia.style.color='white'; document.getElementById('tp').src=tup[a-1]; document.getElementById('pic'+a).style.border='3px #f60 solid'; gh=a; } function showB(c){ var dianjimc=document.getElementById('dianji'+mc); var dianjic=document.getElementById('dianji'+c); dianjimc.style.backgroundColor='#f60'; dianjimc.style.color='black'; document.getElementById('pic'+mc).style.border='none'; dianjic.style.backgroundColor='black'; dianjic.style.color='white'; document.getElementById('tp').src=tup[c-1]; document.getElementById('pic'+c).style.border='3px #f60 solid'; mc=c; } </script> </body> </html>鼠标放在 1,2,3,4上后,上面对应的图片切图,下面的小图片带边框
鼠标放在下面的小图片上,上面的大图也会切图
(只设置了onmousemove并没onmouseout)
那么问题来了
假如你鼠标放在2那,下面对应的第二个图会出现边框,然后你把鼠标移到下面第三个图上,结果下面第三个图也出现边框了,一下两个边框
同理鼠标一开始放在下面第二个图上,然后上面对应的数字2背景变黑,这个时候,鼠标移到上面数字3上面.同时3的背景色也变黑了 ,
怎么解决这个问题呢,加上onmouseout可以吗
怎样才能让第一个函数工作的时候清除第二个函数带来的效果,第二个函数工作的时候清除第一个函数带来的效果?
真心求教////
解决方案
一个函数就好了吧，搞那么麻烦，mouseover的时候同时清空其他选项样式
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
background: #f60;
float: left;
margin-right: 10px;
border-radius: 8px;
padding: 2px 6px;
cursor: pointer;
text-align: center;
}
ul {
width: 140px;
position: absolute;
bottom: 20px;
right: 20px;
}
.main {
width: 720px;
height: 450px;
margin: 0 auto;
position: relative;
left: 0;
top: 100px;
border: 5px green solid;
}
.abc {
width: 720px;
height: 106px;
margin: auto;
margin-top: 120px;
background: #ccc;
text-align: center;
}
.abc img {
margin-right: 10px;
width: 144px;
height: 90px;
margin-top: 8px;
}
</style>
</head>
<body>
<div class="main">
<img src="1.jpg" id="tp" />
<ul>
<li id="dianji1" onmousemove="showA(1)">1</li>
<li id="dianji2" onmousemove="showA(2)">2</li>
<li id="dianji3" onmousemove="showA(3)">3</li>
<li id="dianji4" onmousemove="showA(4)">4</li>
</ul>
</div>
<div class="abc">
<img src="1.jpg" id="pic1" onmousemove="showA(1)" />
<img src="2.jpg" id="pic2" onmousemove="showA(2)" />
<img src="3.jpg" id="pic3" onmousemove="showA(3)" />
<img src="4.jpg" id="pic4" onmousemove="showA(4)" />
</div>
<script type="text/javascript">
var now=1;
var tup = ['http://a1.qpic.cn/psb?/V11aE2wE1DtywZ/I93pSorEWp54MpVhMNDEuPoY6sWU2y4sel7zcxygX0U!/b/dAMAAAAAAAAA&bo=0ALCAdACwgEBCS4!&rf=viewer_4',
'http://a2.qpic.cn/psb?/V11aE2wE1DtywZ/gYhbpYS80HxerKihb7FP8Xz6oBPopJd4Dv.Or6VNIJM!/b/dFgAAAAAAAAA&bo=0ALCAdACwgEBACc!&rf=viewer_4',
'http://a2.qpic.cn/psb?/V11aE2wE1DtywZ/kC2U6ySDDMDiJi7Dmk5TtdH7S609Ny4mhTFEO96rNjg!/b/dGQAAAAAAAAA&bo=0ALCAdACwgEBACc!&rf=viewer_4',
'http://a1.qpic.cn/psb?/V11aE2wE1DtywZ/vC9QsPEduvx6GCOIpq80bXh0t3oUAIzT2smAfm*lrwY!/b/dB4AAAAAAAAA&bo=0ALCAdACwgEBACc!&rf=viewer_4'];
function showA(a) {
if (a == now) return;
o = document.getElementById('dianji' + now); o.style.backgroundColor = '#f60'; o.style.color = 'black';
o = document.getElementById('pic' + now); o.style.border = 'none';
o = document.getElementById('dianji' + a); o.style.backgroundColor = 'black'; o.style.color = 'white';
o = document.getElementById('pic' + a); o.style.border = '3px #f60 solid';
document.getElementById('tp').src = tup[a - 1];
now = a;
}
showA(1);//直接重函数设置默认焦点图片就好，不需要另外写代码
</script>
</body>
</html>
解决方案二：
最简单是，获取当前选中节点的父节点，如何遍历你的四个节点全部置为none，再给当前获取到的节点为block。
通过冒泡方法来完成。冒泡是比较基础的了，如果不会，建议先去看看javascript的基础。
解决方案三：
removeClass
解决方案四：
可以用jQuery操作你的js,现在对原生js都不记得多少了。
参考:http://www.runoob.com/jquery/jquery-tutorial.html
解决方案五：
<head>?
<title>pic player</title>?
<script type="text/javascript" src="http://img.jb51.net/jslib/jquery/jquery-1.2.6.js"></script>?......
答案就在这里：js实现图片轮播
时间： 2024-09-08 11:45:47