使用js调用两次冲突...我也知道是ID不能重复但是不懂怎么改..

http://css-tricks.com/creating-a-slick-auto-playing-featured-content-slider/用的jquery如上..用他只能实现在一个页面里面放一个幻灯片的效果..但是在一个页面想调用两次这个就不会了...
现在是需要用,但是我几乎不会JS和JQUERY实在是不会改啊求助求助...我也知道是id不能重复可..

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

我贴点代码吧..<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Featured Content Slider</title>

<link rel="stylesheet" type="text/css" href="slider.css" /> <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/jquery-easing-1.3.pack.js"></script>
<script type="text/javascript" src="js/jquery-easing-compatibility.1.2.pack.js"></script>
<script type="text/javascript" src="js/coda-slider.1.1.1.pack.js"></script>

<script type="text/javascript">

var theInt = null;
var $crosslink, $navthumb;
var curclicked = 0, curclicked2 = 0;

theInterval = function(cur){
clearInterval(theInt);

if( typeof cur != 'undefined' )
curclicked = cur;

$crosslink.removeClass("active-thumb");
$navthumb.eq(curclicked).parent().addClass("active-thumb");
$(".stripNav ul li a").eq(curclicked).trigger('click');
theInt = setInterval(function(){
$crosslink.removeClass("active-thumb");
$navthumb.eq(curclicked).parent().addClass("active-thumb");
$(".stripNav ul li a").eq(curclicked).trigger('click');
curclicked++;
if( 5 == curclicked )
curclicked = 0;

}, 3000);
};

$(function(){

$("#main-photo-slider").codaSlider();
$("#main-photo-slider2").codaSlider();
$navthumb = $(".nav-thumb");
$crosslink = $(".cross-link");

$navthumb
.click(function() {
var $this = $(this);
theInterval($this.parent().attr('href').slice(1) - 1);
return false;
});

theInterval();
});

</script>
</head><body>

<div>
<div class="slider-wrap">
<div id="main-photo-slider" class="csw">
<div class="panelContainer">
<div class="panel" title="Panel 1">
<img src="images/tempphoto-1.jpg" alt="temp" height="150" width="200"/>
<div class="photo-meta-data">
<span>图片描述: <a href="#">气候系统模式室</a></span>
</div>
</div>

<div class="panel" title="Panel 2">
<img src="images/tempphoto-1.jpg" alt="temp" height="150" width="200"/>
<div class="photo-meta-data">
<span>图片描述: <a href="#">气候系统模式室</a></span>
</div>
</div>

<div class="panel" title="Panel 3">
<img src="images/tempphoto-1.jpg" alt="temp" height="150" width="200"/>
<div class="photo-meta-data">
<span>图片描述: <a href="#">气候系统模式室</a></span>
</div>
</div> <div class="panel" title="Panel 4">
<img src="images/tempphoto-1.jpg" alt="temp" height="150" width="200"/>
<div class="photo-meta-data">
<span>图片描述: <a href="#">气候系统模式室</a></span>
</div>
</div> <div class="panel" title="Panel 5">
<img src="images/tempphoto-1.jpg" alt="temp" height="150" width="200"/>
<div class="photo-meta-data">
<span>图片描述: <a href="#">气候系统模式室</a></span>
</div>
</div>

</div>
</div> <div id="movers-row">
<ul>
<li><a href="#1" class="cross-link active-thumb"><img src="images/slider_1.bmp" class="nav-thumb" alt="temp-thumb" /></a></li>
<li><a href="#2" class="cross-link"><img src="images/slider_1.bmp" class="nav-thumb" alt="temp-thumb" /></a></li>
<li><a href="#3" class="cross-link"><img src="images/slider_1.bmp" class="nav-thumb" alt="temp-thumb" /></a></li>
<li><a href="#4" class="cross-link"><img src="images/slider_1.bmp" class="nav-thumb" alt="temp-thumb" /></a></li>
<li><a href="#5" class="cross-link"><img src="images/slider_1.bmp" class="nav-thumb" alt="temp-thumb" /></a></li>
<ul>
</div>
</div>
</div>
<div>
<div class="slider-wrap">
<div id="main-photo-slider2" class="csw">
<div class="panelContainer">
<div class="panel" title="Panel 1">
<img src="images/tempphoto-1.jpg" alt="temp" height="150" width="200"/>
<div class="photo-meta-data">
<span>图片描述: <a href="#">气候系统模式室</a></span>
</div>
</div>

<div class="panel" title="Panel 2">
<img src="images/tempphoto-1.jpg" alt="temp" height="150" width="200"/>
<div class="photo-meta-data">
<span>图片描述: <a href="#">气候系统模式室</a></span>
</div>
</div>

<div class="panel" title="Panel 3">
<img src="images/tempphoto-1.jpg" alt="temp" height="150" width="200"/>
<div class="photo-meta-data">
<span>图片描述: <a href="#">气候系统模式室</a></span>
</div>
</div> <div class="panel" title="Panel 4">
<img src="images/tempphoto-1.jpg" alt="temp" height="150" width="200"/>
<div class="photo-meta-data">
<span>图片描述: <a href="#">气候系统模式室</a></span>
</div>
</div> <div class="panel" title="Panel 5">
<img src="images/tempphoto-1.jpg" alt="temp" height="150" width="200"/>
<div class="photo-meta-data">
<span>图片描述: <a href="#">气候系统模式室</a></span>
</div>
</div>

</div>
</div> <div id="movers-row">
<ul>
<li><a href="#1" class="cross-link active-thumb"><img src="images/slider_1.bmp" class="nav-thumb" alt="temp-thumb" /></a></li>
<li><a href="#2" class="cross-link"><img src="images/slider_1.bmp" class="nav-thumb" alt="temp-thumb" /></a></li>
<li><a href="#3" class="cross-link"><img src="images/slider_1.bmp" class="nav-thumb" alt="temp-thumb" /></a></li>
<li><a href="#4" class="cross-link"><img src="images/slider_1.bmp" class="nav-thumb" alt="temp-thumb" /></a></li>
<li><a href="#5" class="cross-link"><img src="images/slider_1.bmp" class="nav-thumb" alt="temp-thumb" /></a></li>
<ul>
</div>
</div>
</div></body></html>
自己尝试修改过失败...试过把所有的变量后面都加个2..包括CSS和JS代码..
* { margin: 0; padding: 0; }.slider-wrap { margin:5px 5px 5px 5px; width: 210px; border: 1px solid black; background: url(images/bg.png) top center;}

.stripViewer .panelContainer .panel ul { text-align: left; margin: 0 15px 0 30px; }
.stripViewer { position: relative; overflow: hidden; width: 210px; height: 160px; }
.stripViewer .panelContainer { position: relative; left: 0; top: 0; }
.stripViewer .panelContainer .panel { float: left; height: 100%; position: relative; width: 419px; }
.stripNavL, .stripNavR, .stripNav { display: none; }
.nav-thumb { border: 1px solid black; margin-right: 5px; }#movers-row { margin: 0 0 0 0; }
#movers-row li { float: left; list-style-type:none;}.photo-meta-data { background: url(images/transpBlack.png);  height: 30px; width:200px; margin-top: -30px; position: relative; z-index: 9999; color: white; }
.photo-meta-data span { font-size: 13px; }
.photo-meta-data a, a:visited { color: #729dff; text-decoration: none; }
.photo-meta-data a:hover, a:active { color: white; }.cross-link { display: block;  margin-top: -14px; position: relative; padding-top: 15px; z-index: 9999; }
.active-thumb { background: transparent url(images/icon-uparrowsmallwhite.png) top center no-repeat; }/************************************/
.slider-wrap2 { margin:5px 5px 5px 5px; width: 210px; border: 1px solid black; background: url(images/bg.png) top center;}

.stripViewer2 .panelContainer2 .panel2 ul { text-align: left; margin: 0 15px 0 30px; }
.stripViewer2 { position: relative; overflow: hidden; width: 210px; height: 160px; }
.stripViewer2 .panelContainer2 { position: relative; left: 0; top: 0; }
.stripViewer2 .panelContainer2 .panel { float: left; height: 100%; position: relative; width: 419px; }
.stripNavL2, .stripNavR2, .stripNav2 { display: none; }
.nav-thumb2 { border: 1px solid black; margin-right: 5px; }#movers-row2 { margin: 0 0 0 0; }
#movers-row2 li { float: left; list-style-type:none;}.photo-meta-data2 { background: url(images/transpBlack.png);  height: 30px; width:200px; margin-top: -30px; position: relative; z-index: 9999; color: white; }
.photo-meta-data2 span { font-size: 13px; }
.photo-meta-data2 a, a:visited { color: #729dff; text-decoration: none; }
.photo-meta-data2 a:hover, a:active { color: white; }.cross-link2 { display: block;  margin-top: -14px; position: relative; padding-top: 15px; z-index: 9999; }
.active-thumb2 { background: transparent url(images/icon-uparrowsmallwhite.png) top center no-repeat; }
你js 方法没封装成对象，
最简单的方法，把所有js 代码复制一份，把所有方法，变量名称都改一下！
<script type="text/javascript">

function imgView(n)
{        this.theInt = null;
        this.$crosslink;this.$navthumb;
        this.curclicked = 0;this.curclicked2 = 0;
        var obj=this;
        this.N=n;
        this.theInterval = function(cur){
            clearInterval(obj.theInt);

            if( typeof cur != 'undefined' )
                obj.curclicked = cur;

            obj.$crosslink.removeClass("active-thumb");
            obj.$navthumb.eq(obj.curclicked).parent().addClass("active-thumb");
                $(obj.N).eq(obj.curclicked).trigger('click');
            obj.theInt = setInterval(function(){
                obj.$crosslink.removeClass("active-thumb");
                obj.$navthumb.eq(curclicked).parent().addClass("active-thumb");
                $(obj.N).eq(obj.curclicked).trigger('click');
                obj.curclicked++;
                if( 5 == obj.curclicked )
                    obj.curclicked = 0;

            }, 3000);
        };
}


        $(function(){

            $("#main-photo-slider").codaSlider();
            $("#main-photo-slider2").codaSlider();

           var imgView1= new imgView(".stripNav ul li a");
            imgView1.$navthumb = $(".nav-thumb");
            imgView1.$crosslink = $(".cross-link");
            imgView1.$navthumb
            .click(function() {
                var $this = $(this);
                imgView1.theInterval($this.parent().attr('href').slice(1) - 1);
                return false;
            });

            imgView1.theInterval();
var imgView2= new imgView(".stripNav1 ul li a");
            imgView2.$navthumb = $(".nav-thumb1");
            imgView2.$crosslink = $(".cross-link1");
            imgView2.$navthumb
            .click(function() {
                var $this = $(this);
                imgView2.theInterval($this.parent().attr('href').slice(1) - 1);
                return false;
            });

            imgView2.theInterval();
        });


    </script>
没测试过的代码，大概就这意思，楼主测试一下。类名改来匹配