用JS实现图片轮播的问题,-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

用JS实现图片轮播的问题,

2016-03-12 15:48:24 2503 1

我又来问问题了,(自学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可以吗
怎样才能让第一个函数工作的时候清除第二个函数带来的效果,第二个函数工作的时候清除第一个函数带来的效果?
真心求教////

取消 提交回答
全部回答(1)
  • 被纵养的懒猫
    2019-10-15 15:49:53

    function setFocus(i){ for(var n=1;n<4;n++){ document.getElementById("focusPic"+n).style.display=(i==n)?"block":"none"; } _tn=(i%3)+1; }

    答案来源于网络

    0 0
相关问答

1

回答

关于JS对象的一个问题?报错

2020-06-20 19:26:11 315浏览量 回答数 1

1

回答

js怎样定义一个字符串类型的json对象?报错

2020-06-15 19:27:18 365浏览量 回答数 1

1

回答

js 有没什么方法能判断对象是否存在某个属性(obj.h1.h2.h3)?报错

2020-06-08 17:10:51 297浏览量 回答数 1

1

回答

关于JS对象的一个问题:报错

2020-06-09 11:34:06 333浏览量 回答数 1

1

回答

js改变储存的dom对象:报错

2020-06-06 16:35:04 289浏览量 回答数 1

1

回答

请教一个插入框架引入js,修改对象的问题报错 

2020-06-03 09:33:33 304浏览量 回答数 1

1

回答

js 怎么删除一个对象的属性

2020-05-28 13:27:10 730浏览量 回答数 1

1

回答

使用jQuery将JS对象转换为数组

2020-01-15 09:59:37 251浏览量 回答数 1

1

回答

用jQuery作为JS对象从选项中添加选项的最佳方法是什么?

2020-01-08 17:00:43 310浏览量 回答数 1

1

回答

JavaScript 怎么删除一个对象的样式中的某个属性?

2016-06-12 15:40:51 2455浏览量 回答数 1
2709
文章
6591
问答
问答排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载