如何让一段图片切换的代码在一个网页当中使用多次呢？我下面那段代码使用一次可以，一旦使用多次就会出现问题

我的网页中有很多动态广告，当我把这段图片切换代码复制多次是，切换效果就出现问题了，如何才能解决这一问题啊！那位高手改下代码<html>
<head>
<title></title>
<script type="text/javascript" src="common/jquery-1.2.6.min.js"></script>   
<style type="text/css">#playBg{margin-top:150px;
        z-index:1;
        filter:alpha(opacity=70);
        opacity:0.7;
        width:700px;
        position:absolute;
        height:30px;
       /* background:#000;*/
        }
        
#playText 
{
 margin-top:150px;
 z-index:2;
 padding-left:10px;
 font-size:14px;
 font-weight:bold;
 width:340px;
 color:#fff;
 line-height:30px; 
 overflow:hidden;
 position:absolute;
 cursor:pointer;
 }
#playNum{margin:155px 5px 0 500px;
         z-index:3;
         width:145px; 
         text-align:right;
         position:absolute;
         height:25px;
         }
#playNum a{margin:0 2px;
           width:20px;
           height:20px;
           font-size:14px; 
           font-weight:bold;
           line-height:20px;
           cursor:pointer;
           color:#000;
           padding:0 5px;
           background:#D7D6D7;
           text-align:center;
           }
#playShow  img{ border:none;}
#playShow li
{
 list-style:none;
 }
</style>
</head>
<body>
<ul>
       <li id="playBg"></li>
        <li id="playText"></li>
       <li id="playNum" style="display:none;"><a>1</a><a>2</a><a>3</a><a>4</a><a>5</a><a>6</a></li>
        <li id="playShow">
            <a href="#" target="_blank"><img src="images/01.jpg" alt="" style="display:block;"></a> 
            <a href="#" target="_blank"><img src="images/02.jpg" alt="" style="display:none"></a> 
            <a href="#" target="_blank"><img src="images/03.jpg" alt="" style="display:none"></a> 
            <a href="#" target="_blank"><img src="images/04.jpg" alt="" style="display:none"></a> 
            <a href="#" target="_blank"><img src="images/05.jpg" alt="" style="display:none"></a> 
            <a href="#" target="_blank"><img src="images/03.jpg" alt="" style="display:none"></a>
        </li>
    </ul>
<script type="text/javascript">
var t = n = 0, count = $("#playShow a").size();
$(function(){
$("#playShow a:not(:first-child)").hide();
$("#playText").html($("#playShow a:first-child").find("img").attr('alt'));
$("#playNum a:first").css({"background":"#FFD116",'color':'#A8471C'});
$("#playText").click(function(){window.open($("#playShow a:first-child").attr('href'), "_blank")});
$("#playNum a").click(function() {
   var i = $(this).text() - 1;
   n = i;
   if (i >= count) return;
   $("#playText").html($("#playShow a").eq(i).find("img").attr('alt'));
   $("#playText").unbind().click(function(){window.open($("#playShow a").eq(i).attr('href'), "_blank")})
   $("#playShow a").filter(":visible").hide().parent().children().eq(i).fadeIn(1200);
   $(this).css({"background":"#FFD116",'color':'#A8471C'}).siblings().css({"background":"#D7D6D7",'color':'#000'});
});
t = setInterval("showAuto()", 5000);
$("#play").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 5000);});
})
function showAuto()
{
n = n >= (count - 1) ? 0 : ++n;
$("#playNum a").eq(n).trigger('click');
}
</script>
<body>
</html>

解决方案 »

  1.   

    你一段代码赋值多次会有js代码冲突的，包括css的id名称和js也有冲突，你看看都改成唯一的了吗
      

  2.   


    我的目的就是重复使用这段图片切换代码，都是调用那段js代码，但我不知道怎么改啊
    <ul>
      <li id="playBg"></li>
      <li id="playText"></li>
      <li id="playNum" style="display:none;"><a>1</a><a>2</a><a>3</a><a>4</a><a>5</a><a>6</a></li>
      <li id="playShow">
      <a href="#" target="_blank"><img src="images/01.jpg" alt="" style="display:block;"></a>  
      <a href="#" target="_blank"><img src="images/02.jpg" alt="" style="display:none"></a>  
      <a href="#" target="_blank"><img src="images/03.jpg" alt="" style="display:none"></a>  
      <a href="#" target="_blank"><img src="images/04.jpg" alt="" style="display:none"></a>  
      <a href="#" target="_blank"><img src="images/05.jpg" alt="" style="display:none"></a>  
      <a href="#" target="_blank"><img src="images/03.jpg" alt="" style="display:none"></a>
      </li>
      </ul>
      

  3.   

    你要多次使用应该把这段代码写成一个函数,放在js文件里面,在每一个要用的页面应用这个js文件
    而不应该把代码复制到每个页面...这样既不利于修改,也容易出错
    引用js文件的方法
    <script type="javascript" src="js/commom.js"></script>///src就是js文件的相对路径
      

  4.   


    后来我就是把那段代码放到一个js文件里了，可是还会报错，我现在遇到的问题是，var t = n = 0, count = $("#playShow a").size(); 这几个全局变量不知道如何来处理，如果我页面中有多个切换效果，这几个变量如何来区分呢？？
      

  5.   

    可能js会冲突。你干脆建一个js文件，把主要的代码放在js文件里，引用，就可以在多个页面用了