程式師世界 >> 編程語言 >> 更多編程語言 >> 編程綜合問答 >> javascript-用JS實現圖片輪播的問題,謝謝了

javascript-用JS實現圖片輪播的問題,謝謝了

編輯：編程綜合問答

用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>