jquery cycle plugin图片轮换
蒋文光
上一篇文章的flash不好用，老板嫌flash太复杂，改用jquery cycle plugin插件。
<head>
<script type="text/javascript" src="scripts/jquery-1.3.2.min.js" ></script>
<script type="text/javascript"src="scripts/jquery.cycle.all.js"></script>
<style type="text/css">
.nav { margin: 5px 0 ;width:100px;}
.nav a, #s7 strong { margin: 0 5px; padding: 3px 5px; border: 1px solid #ccc; background: #fc0; text-decoration: none }
.nav a.activeSlide { background: #ea0 }
.nav a:focus { outline: none; }
#output { text-align: left; }
.nav { text-align: left }
</style>
<script type="text/javascript">
function onAfter1() {
$('#output_default').html(this.title);
}
function onAfter2() {
$('#output_chinese').html(this.title);
}
</script>
<script type="text/javascript">
$("document").ready(
function(){
$('#flash_default').after('<div id="nav1" class="nav">').cycle({
fx: 'fade',
timeout: 4000,
pager: '#nav1',
after: onAfter1
});
$('#flash_chinese').after('<div id="nav2" class="nav">').cycle({
fx: 'fade',
timeout: 4000,
pager: '#nav2',
after: onAfter2
});
$("#tr_chinese").hide();
$("#dc_button").click(function(){
$("#tr_default").hide();
$("#tr_chinese").show();
});
$("#cd_button").click(function(){
$("#tr_chinese").hide();
$("#tr_default").show();
});
$(".myButton").hover(function(){
</script>
</head>
<body>
<c:forEach var="aBlog" items="${blogs}">
<c:if test="${aBlog.id == 'default'}">
<div id="flash_default">
<c:forEach var="entry" items="${aBlog.recentPublishedWorksEntries}">
<a href="${entry.permalink }" title="${entry.title}"><img border="0" width="400" height="400" src="${entry.excerpt }"/></a>
</c:forEach>
</div>
<p id="output_default"></p>
</c:if>
</c:forEach>
<c:forEach var="aBlog" items="${blogs}">
<c:if test="${aBlog.id == 'chinese'}">
<div id="flash_chinese">
<c:forEach var="entry" items="${aBlog.recentPublishedWorksEntries}">
<a href="${entry.permalink }" title="${entry.title}"><img border="0" width="400" height="400" src="${entry.excerpt }"/></a>
</c:forEach>
</div>
<p id="output_chinese"></p>
</c:if>
</c:forEach>
</body>曾经出现的问题： 功能要求实现进入页面时第二个div隐藏，只显示第一个div。点击某个按钮后第一个div隐藏，显示第二个div。
但是点击按钮后第二个div显示总是错误，排版部正确。
将两个div 的cycle方法放到 显示和 隐藏方法之前，即解决。
分析原因，可能是都是jquery的方法，执行有先后。
类似资料：