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

aimsam 2010-12-03 11:00:47
http://css-tricks.com/creating-a-slick-auto-playing-featured-content-slider/

用的jquery如上..

用他只能实现在一个页面里面放一个幻灯片的效果..但是在一个页面想调用两次这个就不会了...
现在是需要用,但是我几乎不会JS和JQUERY实在是不会改啊求助求助...我也知道是id不能重复可..
...全文
240 5 打赏 收藏 转发到动态 举报
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
hch126163 2010-12-03
  • 打赏
  • 举报
 回复
<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>


没测试过的代码，大概就这意思，楼主测试一下。类名改来匹配
hch126163 2010-12-03
  • 打赏
  • 举报
 回复
你js 方法没封装成对象，
最简单的方法，把所有js 代码复制一份，把所有方法，变量名称都改一下！
aimsam 2010-12-03
  • 打赏
  • 举报
 回复 
*	{ 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; }
aimsam 2010-12-03
  • 打赏
  • 举报
 回复
自己尝试修改过失败...试过把所有的变量后面都加个2..包括CSS和JS代码..
aimsam 2010-12-03
  • 打赏
  • 举报
 回复
我贴点代码吧..

<!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>
区块链实战视频课程（4）：用Web3.js开发以太坊客户端
本教程用JavaScript语言调用Web3.js的API编写以太坊客户端，主要内容如下：web3.js安装与环境搭建、连接私有链、使用JavaScript发布智能合约、BigNumber、单位转换、十六进制与Ascii互转、字符串生成与hash编码、...
Handlebars的基本用法 Handlebars.js使用介绍 http://handlebarsjs.com/ Handlebars.js 模板引擎 javascript/jque...
Handlebars的基本用法 使用Handlebars，你可以轻松创建语义化模板，Mustache模板和Handlebars是兼容的，所以你可以将Mustache导入Handlebars以使用 Handlebars 强大的功能。 开始 Handlebars模板看起来和HTML一样，只是嵌入了 handlebars 表达式 <divclass="ent...
从基本使用到原理来一次Vue.js的全面复盘
只有那些从不仰望星空的人,才不会跌入坑中。——泰勒斯 1、Vue常用修饰符 ①、v-on修饰符 .stop - 调用 event.stopPropagation()，阻止向上冒泡，点击子级，不会触发父级的点击事件。 .prevent - 调用 event.preventDefault()，阻止默认事件。 .capture - 事件捕获：在捕获阶段，事件从window开始，之后是document对象，一直到触发事件的元素。 .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。 .{keyC.
JS函数详解
目录 1.函数概念，声明及调用 2.函数表达式（匿名函数） 3.函数传参 4.修改input的值 5.函数的不定参（可变参）—关键字arguments 6.函数返回值 7.封装获取元素的方法 8.获取计算后样式—getComputedStyle(el) 8.JS预解析机制（变量提升Hoisting） 9.作用域 10.window 11.全局污染（命名冲突问题） 12.作...
Node.js入门指南
Node.js是建立在Chrome V8引擎之上的JavaScript运行时环境，可用于快速构建可伸缩的网络应用。它采用事件驱动、非阻塞I/O模型，适用于实时数据处理。Node.js还拥有丰富的包管理工具，如npm，使得前端开发者能够方便地共享和重复使用代码。掌握Node.js能够丰富前端开发技能，提升项目的性能和效率。
JavaScript

87,907

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章