20,359
社区成员
发帖
与我相关
我的任务
分享关于jQuery调用没有效果
请达人帮帮啊..先谢谢了
平台：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);
});
...全文
请发表友善的回复…
发表回复
CunningBoy 2010-10-25
- 打赏
- 举报
注意图片的路径，在WordPress中可能跨域访问有限制。
你将图片改为本地路径再试试
你将图片改为本地路径再试试
cavst 2010-10-25
- 打赏
- 举报
谢谢，文件路径我检查过了，路径没有变，图片还是不显示。
jQuery的控制按钮没有反应啊，这个是什么问题？
本地路径？现在不是本地路径吗？
jQuery的控制按钮没有反应啊，这个是什么问题？
本地路径？现在不是本地路径吗？
