2 zaxlctjs zaxlctjs 于 2015.07.14 12:03 提问

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

5个回答

showbo
showbo   Ds   Rxr 2015.07.14 17:38
已采纳

一个函数就好了吧,搞那么麻烦,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>
zhanzhenguang
zhanzhenguang   2015.07.14 13:35

最简单是,获取当前选中节点的父节点,如何遍历你的四个节点全部置为none,再给当前获取到的节点为block。
通过冒泡方法来完成。冒泡是比较基础的了,如果不会,建议先去看看javascript的基础。

u013829202
u013829202   Rxr 2015.07.14 13:41

removeClass

dcxy0
dcxy0   Ds   Rxr 2015.07.14 14:59

可以用jQuery操作你的js,现在对原生js都不记得多少了。

参考:http://www.runoob.com/jquery/jquery-tutorial.html

CSDNXIAOC
CSDNXIAOC   2015.07.16 15:27

<head> 
<title>pic player</title> 
<script type="text/javascript" src="http://img.jb51.net/jslib/jquery/jquery-1.2.6.js&quot;&gt;&lt;/script> ......
答案就在这里:js实现图片轮播
----------------------你好,人类,我是来自CSDN星球的问答机器人小C,以上是依据我对问题的理解给出的答案,如果解决了你的问题,望采纳。

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
数据结构实验1— 线性表、链表的实现
实现顺序表各种基本操作 实验要求 程序代码 运行结果 实现单链表各种基本操作 实验要求 程序代码 运行结果 约瑟夫环问题 实验要求 问题描述 基本要求 测试数据 程序代码 运行结果 实现顺序表各种基本操作 实验要求 编写程序实现顺序表的各种基本运算,并在此基础上设计一个主程序完成如下功能: (1)初始化顺序表L; (2)依次在L尾部插入元素-1,21,13...
求助各位高手,帮忙做下,谢谢了
由计算机“想”一个四位数,请人猜出这个四位数是多少。人输入四位数字后,计算机首先判断这四位数字有几位是猜对了,并且在对的数字中又有几位位置也是对的,将结果显示出来,给人以提示,请人再猜,直到人猜出计算机所想的四位数是多少时为止。 
如何使用js实现图片轮播
要说起js的轮播功能,已经是有很多成熟的方法,在这里,这个算法确实好: 看看下面的代码实现吧: 爱你,我的星星 window.onload = function(){ var images = document.getElementsByTagName('img'); var pos = 0; var len
解开诺记手机密码下赶快来
急用谢谢了,急用谢谢了,急用谢谢了,急用谢谢了,急用谢谢了,急用谢谢了,急用谢谢了,急用谢谢了,急用谢谢了,急用谢谢了,急用谢谢了,急用谢谢了,急用谢谢了,急用谢谢了,急用谢谢了,急用谢谢了,急用谢谢了,
JavaScript定时器--图片轮播
效果: http://115.159.53.185/test/jsimagescroll/js: move() 利用定时器实现移动 //要让哪一个元素运动 //元素运动方向 //从哪里运动到哪里 //时间//调用: //move(document.getElementById("demo"), 'left', '300px', '100px', 2000);function move(ele,
JS实现页面图片轮播滚动效果
JS实现页面图片轮播滚动效果 JS实现页面图片轮播滚动效果 JS实现页面图片轮播滚动效果 JS实现页面图片轮播滚动效果 JS实现页面图片轮播滚动效果
用原生js实现图片轮播器
轮播器是指图片的循环播放:主要涉及的知识点有:DOM操作,定时器,事件绑定等;如下图:总共有5张图片进行轮播,代码如下:html部分:&amp;lt;div id=&quot;container&quot;&amp;gt; &amp;lt;div id=&quot;list&quot; style=&quot;left:-1200px;&quot;&amp;gt;        //left=-1200px表示此刻正在显示第一张图片 ...
浅谈JS实现图片轮播的各种坑
首先在文章之前,我要好好地吐槽一下当下很多人的学习方法。就拿我们实验室的人来说吧。不少人自称是搞前端的,随随便便让他们写个slider,都能用JQuery很快实现。他们意识里的前端就以为是精通JQuery,精通Bootstrap。当然,你如果是真的“精通”了,那么你也很厉害。但是如果你没有研究过JQuery和Bootstrap的源码的话。千万不要在我面前说精通。我会很鄙视你的。可是呢,如果让这些人
java 进制转换,二进制 十进制 十六进制 正数 负数的进制等等!
<br />2进制CPU使用,8进制很少见,10进制适合人类使用,16进制适合编译器和底层程序员使用,希望对你有所帮助! 以下文章是自己从别的地方复制粘贴过来, 总结了一下。 虽然看着有点乱, 但是想学 ,就能看懂。 若是有什么问题 , 可直接在下方给我留言!!!<br />public class Sun1 {<br />public static void main(String[] args) {<br />    System.out.println(Integer.toHexString(20))
html+css+js简单实现图片轮播效果
&amp;lt;html&amp;gt;&amp;lt;head&amp;gt;&amp;lt;style type=&quot;text/css&quot;&amp;gt;*{background-color:green;}#lunbo{ width:600px; height:600px;position:relative;left:100px;top:50px;} //定义轮播图片所显示的位置ul{width:100%; height:100%; posit...