上一篇文章的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的方法，执行有先后。
分享到：
相关推荐
**jQuery Cycle Plugin** 是一个广泛使用的JavaScript库，专门用于创建动态和交互式的图像滑块、轮播和幻灯片效果。这个插件充分利用了jQuery的简洁API和强大的DOM操作功能，使得开发者能够轻松地在网站上实现各种...
7. **插件开发**：jQuery社区提供了许多预封装的焦点图插件，如jQuery Cycle Plugin、Sudo Slider等。这些插件已经实现了基本的功能，只需简单配置即可使用，节省了开发时间。 8. **SEO优化**：对于搜索引擎优化...
市面上有许多成熟的jQuery图片轮换插件可供选择，如jQuery Cycle Plugin、Slick、FlexSlider等。它们都提供了详细的文档和示例，帮助开发者快速集成到项目中。 1. **jQuery Cycle Plugin** 是一款经典的轮播插件，...
一、jQuery图片轮换的基本原理 图片轮换的基本思想是通过JavaScript控制DOM（Document Object Model）中的图片元素显示与隐藏，实现定时切换的效果。主要涉及到以下几个关键步骤： 1. 创建一个包含多张图片的HTML...
jQuery Media Plugin是一款专门为jQuery设计的多媒体插件，用于在网页中轻松集成音频、视频和图像等多媒体元素。这款插件的出现，极大地简化了开发者在HTML5时代处理多媒体内容的复杂性，使得开发者无需深入了解...
struts2-jquery-plugin-3.1.0.jar
jQuery lightbox plugin是一种广泛使用的JavaScript库，用于在网页上创建优雅的图片查看器效果，通常称为“lightbox”效果。这个插件允许用户在不离开当前页面的情况下查看大图，为浏览图片提供了一种沉浸式的体验。...
struts2-jquery-plugin-2.0.0 struts2-jquery-plugin-2.0.0 struts2-jquery-plugin-2.0.0
**jQuery Validation Plugin 知识详解** jQuery Validation Plugin 是一个用于前端表单验证的强大工具，它为jQuery用户提供了方便快捷的方法来验证用户输入的数据，确保数据的准确性和完整性。这个插件能够帮助...
总的来说，"tableExport.jquery.plugin-1.10.22.zip"是前端开发中一个便捷的工具，它通过jQuery实现了表格数据的快速导出，提升了用户体验，简化了开发者的工作。无论是在企业级应用还是个人项目中，都能看到其广泛...
这个版本的Orbit Plugin是jQuery库的一个扩展，它提供了丰富的功能和自定义选项，使得创建吸引人的图片轮播、内容滑动效果变得轻而易举。在网页设计中，轮播组件常用于展示多张图片或信息，通过自动或用户交互的方式...
jQuery Mask Plugin是一款强大的JavaScript库，专门用于输入框内容格式化。这个插件使得开发者能够轻松地为HTML表单中的输入字段添加格式约束，比如电话号码、日期、货币等，从而提高用户界面的交互性和用户体验。它...
jQuery Lightbox Plugin是一款广泛使用的JavaScript库，用于在网页上创建优雅的图片弹出窗口或“灯箱效果”。这个“图片盒子升级修正版”是原始jQuery Lightbox插件的一个改进版本，可能包含了修复的问题、增强的...
Struts2-jQuery-Plugin是基于Struts2框架的一个扩展插件，它为开发者提供了丰富的jQuery UI组件，使得在Struts2应用中实现交互式的用户界面变得更加便捷。这个使用手册将详细阐述如何集成并利用该插件提升Web应用的...
最新的struts2-jquery-plugin插件3.3.3，包括jquery-ui和grid,使用标签实现。
"tableExport.jquery.plugin-master" 是一个基于jQuery的插件，主要功能是实现HTML5页面中的表格数据导出。这个插件对于需要从网页上获取表格数据并进行存储或分析的用户来说非常有用。HTML5提供了许多新的功能和API...
**jQuery Ellipsis 插件详解** 在Web开发中，我们经常遇到一个问题：如何优雅地处理过长的文字内容，尤其是在有限的显示空间内。这正是jQuery Ellipsis插件所解决的问题。该插件提供了一个简洁而实用的方法，可以...
【jQuery Media Plugin扩展详解】 jQuery Media Plugin是一款专为jQuery设计的多媒体播放器插件，它极大地增强了网页中音频和视频的交互性与控制能力。在Web开发中，媒体元素的控制功能是不可或缺的，比如播放、...