关于jQuery调用没有效果

cavst 2010-10-25 07:08:46
请达人帮帮啊..先谢谢了

平台:WordPress 3.0.1
环境:Windows 7 + Wamp2.0
目的:通过jQuery实现在背景图片切换
问题:找了一个jQuery自动切换背景图片的Dome,在html文件里正常显示,转移到wordpress里图片不显示了

原程序下载地址:http://www.ctsky.org/dome.rar

原始程序一:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/>
<title>Beautiful advanced jQuery background image slideshow</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="header">
<!-- jQuery handles to place the header background images -->
<div id="headerimgs">
<div id="headerimg1" class="headerimg"></div>
<div id="headerimg2" class="headerimg"></div>
</div>
<!-- Top navigation on top of the images -->
<div id="nav-outer">
<div id="navigation">
<div id="search">
<form>
<input type="text" id="searchtxt" />
<input type="submit" value="search" id="searchbtn" />
</form>
</div>
<div id="menu">
<ul>
<li><a href="http://www.marcofolio.net/">Marcofolio</a></li>
<li><a href="http://www.twitter.com/marcofolio">Twitter</a></li>
<li><a href="http://feeds2.feedburner.com/marcofolio">RSS</a></li>
<li><a href="http://jquery.com/">jQuery</a></li>
<li><a href="http://en.wikipedia.org/wiki/Cascading_Style_Sheets">CSS</a></li>
<li><a href="http://buysellads.com/buy/detail/956">Advertisements</a>
</ul>
</div>
</div>
</div>
<!-- Slideshow controls -->
<div id="headernav-outer">
<div id="headernav">
<div id="back" class="btn"></div>
<div id="control" class="btn"></div>
<div id="next" class="btn"></div>
</div>
</div>

</div>
</body>
</html>


原始程序二

/* COMMON CLASSES */
.break { clear:both; }

/* HEADER */
#header { height:369px; }
.headerimg { background-position: center top; background-repeat: no-repeat; width:980px; height:369px; position:absolute; }

/* NAVIGATION */
#nav-outer { height:110px; padding-top:11px; position:relative; top:24px; background-image:url("images/headerbg.png"); }
#navigation { height:100px; width:980px; margin:0 auto; background-image:url("images/logo.png"); background-position:top left; background-repeat:no-repeat; }

/* SEARCH */
#search { background-color:#051733; float:right; width:220px; padding:10px; }
#searchtxt { padding:3px; width:150px; }
#searchbtn { border:1px solid #eee !important; background-color:#CD2B3A; color:#eee; padding:3px; margin-left:5px; }

/* MENU */
#menu { position:relative; top:85px; }
#menu ul { list-style:none; }
#menu ul li { display:inline; font-variant:small-caps; font-size:12px; }
#menu ul li a { color:white; text-decoration:none; font-weight:bold; padding-right:20px; }
#menu ul li a:hover { text-decoration:underline; }

/* HEADER TEXT */
#headertxt { width:980px; margin:0 auto; clear:both; position:relative; top:74px; }
#firstline { background-image:url("images/textbg.png"); color:#333; font-size:40px; padding:4px 13px 7px; float:left; display:block; }
#secondline { background-image:url("images/textbg.png"); color:#CD2B3A; text-decoration:none; font-size:60px; padding:0 13px 10px; float:left; display:block; clear:both; }
#secondline:hover { text-decoration:underline; color:#7F000C; }

.pictured { background-color:#CC3333; color:#FFF; font-size:12px; padding:9px 16px; text-transform:uppercase; float:left; display:block; clear:both; margin-top:10px; }
.pictured a { font-size:16px; font-style:italic; letter-spacing:0; text-transform:none; color:#FFF; text-decoration:none; }
.pictured a:hover { text-decoration:underline; }

/* CONTROLS */
.btn { height:32px; width:32px; float:left; cursor:pointer; }
#back { background-image:url("images/btn_back.png"); }
#next { background-image:url("images/btn_next.png"); }
#control { background-image:url("images/btn_pause.png"); }

/* HEADER HAVIGATION */
#headernav-outer { position:relative; top:300px; margin:0 auto; width:980px; }
#headernav { padding-left:864px; }

/* CONTENT */
#content { color:#575757; background-color:#eee; }
#content p { padding:10px 20px; font-size:16px; width:980px; margin:0 auto; }
#content p a { text-decoration:none; color:#CD2B3A; }
#content p a:hover { text-decoration:underline; color:#7F000C; }


原始程序三:

/*
* Author: Marco Kuiper (http://www.marcofolio.net/)
*/

// Speed of the automatic slideshow
var slideshowSpeed = 6000;

// Variable to store the images we need to set as background
// which also includes some text and url's.
var photos = [ {
"title" : "Stairs",
"image" : "vacation.jpg",
"url" : "http://www.sxc.hu/photo/1271909",
"firstline" : "Going on",
"secondline" : "vacation?"
}, {
"title" : "Office Appartments",
"image" : "work.jpg",
"url" : "http://www.sxc.hu/photo/1265695",
"firstline" : "Or still busy at",
"secondline" : "work?"
}, {
"title" : "Mountainbiking",
"image" : "biking.jpg",
"url" : "http://www.sxc.hu/photo/1221065",
"firstline" : "Get out and be",
"secondline" : "active"
}, {
"title" : "Mountains Landscape",
"image" : "nature.jpg",
"url" : "http://www.sxc.hu/photo/1271915",
"firstline" : "Take a fresh breath of",
"secondline" : "nature"
}, {
"title" : "Italian pizza",
"image" : "food.jpg",
"url" : "http://www.sxc.hu/photo/1042413",
"firstline" : "Enjoy some delicious",
"secondline" : "food"
}
];



$(document).ready(function() {

// Backwards navigation
$("#back").click(function() {
stopAnimation();
navigate("back");
});

// Forward navigation
$("#next").click(function() {
stopAnimation();
navigate("next");
});

var interval;
$("#control").toggle(function(){
stopAnimation();
}, function() {
// Change the background image to "pause"
$(this).css({ "background-image" : "url(images/btn_pause.png)" });

// Show the next image
navigate("next");

// Start playing the animation
interval = setInterval(function() {
navigate("next");
}, slideshowSpeed);
});


var activeContainer = 1;
var currentImg = 0;
var animating = false;
var navigate = function(direction) {
// Check if no animation is running. If it is, prevent the action
if(animating) {
return;
}

// Check which current image we need to show
if(direction == "next") {
currentImg++;
if(currentImg == photos.length + 1) {
currentImg = 1;
}
} else {
currentImg--;
if(currentImg == 0) {
currentImg = photos.length;
}
}

// Check which container we need to use
var currentContainer = activeContainer;
if(activeContainer == 1) {
activeContainer = 2;
} else {
activeContainer = 1;
}

showImage(photos[currentImg - 1], currentContainer, activeContainer);

};

var currentZindex = -1;
var showImage = function(photoObject, currentContainer, activeContainer) {
animating = true;

// Make sure the new container is always on the background
currentZindex--;

// Set the background image of the new active container
$("#headerimg" + activeContainer).css({
"background-image" : "url(images/" + photoObject.image + ")",
"display" : "block",
"z-index" : currentZindex
});

// Hide the header text
$("#headertxt").css({"display" : "none"});

// Set the new header text
$("#firstline").html(photoObject.firstline);
$("#secondline")
.attr("href", photoObject.url)
.html(photoObject.secondline);
$("#pictureduri")
.attr("href", photoObject.url)
.html(photoObject.title);


// Fade out the current container
// and display the header text when animation is complete
$("#headerimg" + currentContainer).fadeOut(function() {
setTimeout(function() {
$("#headertxt").css({"display" : "block"});
animating = false;
}, 500);
});
};

var stopAnimation = function() {
// Change the background image to "play"
$("#control").css({ "background-image" : "url(images/btn_play.png)" });

// Clear the interval
clearInterval(interval);
};

// We should statically set the first image
navigate("next");

// Start playing the animation
interval = setInterval(function() {
navigate("next");
}, slideshowSpeed);

});



...全文
116 点赞 收藏 2
写回复
2 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
CunningBoy 2010-10-25
注意图片的路径,在WordPress中可能跨域访问有限制。
你将图片改为本地路径再试试
回复
cavst 2010-10-25
谢谢,文件路径我检查过了,路径没有变,图片还是不显示。
jQuery的控制按钮没有反应啊,这个是什么问题?

本地路径?现在不是本地路径吗?
回复
相关推荐
发帖
PHP
创建于2008-08-27

1.9w+

社区成员

“超文本预处理器”,是在服务器端执行的脚本语言,尤其适用于Web开发并可嵌入HTML中。PHP语法利用了C、Java和Perl,该语言的主要目标是允许web开发人员快速编写动态网页。
申请成为版主
帖子事件
创建了帖子
2010-10-25 07:08
社区公告
暂无公告