请教jquery与图片轮换JS的冲突

浏览:699 发布日期:2013/07/16 分类:求助交流 关键字: jquery 轮换 js
我想用jquery的淡出功能show,在一张单独做这个功能的网页上测试完全正常,但放到一张同时包含一个图片轮换广告的页面中就不能正常用了。轮换广告是用js控制的,代码如下,请教高手是什么地方出现冲突:
var width = 550;//宽
var height = 180;//高
var pictureCount = 5;//图片数量
var href = ["#","#","#","#","#"];//链接地址
var time = 5000;//5秒
var now = 0;//默认显示第一个
var blockCount = 10;//分10块移动
var defer = 50;//块延迟基数
var order = 3;// 0(从上到下) 1(从下到上) 2(随机顺序) 3(随机出现012)
var blockHeight = Math.floor(height/blockCount);
var remain = new Array(pictureCount);
var direct;
var list = [];
document.write("<div class=\"scroller\" id=\"scroller\" style=\"width:"+width+"px\">");
document.write("<div class=\"flat\"><a style=\"width:"+width+"px;height:"+height+"px;\" id=\"flat\" href=\""+href[now]+"\"></a></div>");
document.write("<div class=\"guide\" id=\"guide\" style=\"margin-top:"+(height-23)+"px;margin-left:"+(width-125)+"px\">");
for(var i=0;i<pictureCount;i++)document.write("<p onclick=\"changeItem("+i+")\">"+parseInt(i+1)+"</p>");
document.write("</div>");
for(var i=0;i<blockCount;i++){
document.write("<div class=\"block\" id=\"item"+i+"\" style=\"height:"+blockHeight+"px\">");
for(var j=0;j<pictureCount;j++){
document.write("<a href=\""+href[i]+"\" target=\"_blank\" style=\"background:url('/faneby/APP/Public/Images/qiehuan.jpg') 0 "+(j+now)*height+"px;height:"+height+"px\"></a>");
}
document.write("</div>");
if(i>0)$("item"+i).scrollTop = i*blockHeight;
}
document.write("</div>");
for(var i=0;i<blockCount;i++)list[i] = i;
Array.prototype.chaos = function(){
var randomNumber,temp;
for(var i=0;i<this.length;i++){
randomNumber = getRandom(0,this.length-1);
temp = this[i];
this[i] = this[randomNumber];
this[randomNumber] = temp;
}
}
Array.prototype.total = function(){
var count=0;
for(var i=0;i<this.length;i++){
count += this[i];
}
return count;
}
function getRandom(start,end){
var number = parseInt(Math.random()*(end-start+1));
if(start>0)number++;
return number;
}
function sortList(o){
if(o==undefined)o=order;
switch(o){
case 0:
list.sort();
break;
case 1:
list.sort();
list.reverse();
break;
case 2:
list.chaos();
break;
case 3:
sortList(getRandom(0,2));
break;
}
}
function $(element){return document.getElementById(element)}
function $$(parent,element){return parent.getElementsByTagName(element)}
function offset(i){
var step = Math.ceil(remain[i]/10);
if(step > 0){
if(direct){
$("item"+i).scrollTop += step;
}else{
$("item"+i).scrollTop -= step;
}
remain[i] -= step;
setTimeout("offset("+i+")",10);
}
}
function changestyle(index,type){
$$($("guide"),"p")[index].className = type?"now":"";
}
function changeItem(index){
if(remain.total()>0)return;
changestyle(now,false);
if(index==undefined){
if(++now>=pictureCount)now=0;
}else{
if(index==now){
changestyle(now,true);
return false;
}else{
now = index;
}
}
changestyle(now,true);
$("flat").href = href[now];
var offsetSize = now*height-$("item0").scrollTop;
direct = offsetSize>0?1:0;
if(order>1)sortList();
for(var i=0;i<blockCount;i++){
remain[list[i]] = Math.abs(offsetSize);
setTimeout("offset("+list[i]+")",i*defer);
}
}
changestyle(now,true);
if(order>0)sortList();
$("flat").onmouseover = function(){clearInterval(auto)}
$("flat").onmouseout = function(){auto = setInterval("changeItem()",time);}
$("guide").onmouseover = function(){clearInterval(auto)}
var auto = setInterval("changeItem()",time);
最佳答案
评论( 相关
后面还有条评论,点击查看>>