/*轮换*/
var laodao_i = 0, //a排序序号
landao_span_arr = 0,
laodao_span_num = 0; // 统计a数量并减 1 处理
var d; //函数对象
$(function(){
hideRoteAdv();
autoScroll(); // 先执行一次函数 laodao()
});
function showRoteAdv(advImgId,advTitle,aId){
clearTimeout(d);
hideRoteAdv();
$(advImgId).show(300);
$(advTitle).show(300);
$(aId).addClass("cur");
}
function hideRoteAdv(){
$("#advRote").find("a").each(function(){
$(this).hide();
});
$("#advTitleRote").find("a").each(function(){
$(this).hide();
$(this).removeClass();
});
$("#advIdRote").find("a").each(function(){
$(this).removeClass();
});
}
function autoScroll() {
if(landao_span_arr==0){
landao_span_arr = $("#advRote").children("a");
laodao_span_num = landao_span_arr.length - 1; // 统计span数量并减 1 处理
}
if (laodao_i > laodao_span_num) {laodao_i = 0;} // 如果计数器(span排序)大于 laodao_span_num 时归零
$('#advRote a:eq('+laodao_i+')').fadeIn(50); //渐显效果显示第 laodao_i 个span
$('#advTitleRote a:eq('+laodao_i+')').fadeIn(50);
$("#advIdRote a").each(function(){
$(this).removeClass();
});
$('#advIdRote a:eq('+laodao_i+')').addClass("cur");
d = setTimeout(function() {
$('#advRote a:eq('+laodao_i+')').fadeOut(50);
$('#advTitleRote a:eq('+laodao_i+')').fadeOut(50);
laodao_i++;
autoScroll();
},4500);
};
/*轮换*/
<div class="pic" id="advRote" style="height: 216px" >
<c:forEach items="${advList}" var="advProxys">
<c:forEach items="${advProxys.advts}" var="adv" varStatus="s">
<a id="roteImg${s.count}" href="${adv.advt.link}"><img src="${adv.url}" width="276px" height="216px" /></a>
</c:forEach>
</c:forEach>
</div>
分享到:
相关推荐
本文将深入探讨如何使用jQuery实现图片轮换,包括基本原理、相关函数以及常见插件的使用。 一、jQuery图片轮换的基本原理 图片轮换的基本思想是通过JavaScript控制DOM(Document Object Model)中的图片元素显示与...
### 仿麦包包首页tab轮换图jQuery特效详解 #### 一、项目背景与目标 在前端开发领域,实现各种动态效果是提升用户体验的关键之一。本文档将详细解析一个具体的前端开发案例:“仿麦包包首页tab轮换图jQuery特效”。...
在本项目"jQuery带箭头图片折叠轮换.zip"中,我们主要探讨的是如何使用前端技术,特别是jQuery库,来实现一种动态的、带有箭头指示的图片轮换效果。这个效果通常用于网站的滑块、展示区域或者产品轮播等场景,能够...
对于Tab切换,jQuery的`.click()`事件和`.hide()`与`.show()`方法能轻松实现。例如: ```javascript $('ul.tabs li').click(function(e) { e.preventDefault(); var tab_id = $(this).attr('data-tab'); $('ul....
### 使用jQuery实现轮播图效果 #### 一、概述 本文档主要介绍如何使用jQuery库来实现一个简单但实用的轮播图效果。通过引入jQuery并结合HTML与CSS,可以轻松地创建动态轮播功能,这在现代网页设计中非常常见。轮播...
2. 使用jQuery库:jQuery提供了一些方便的API,如`.show()`、`.hide()`和`.fadeIn()`、`.fadeOut()`,可以简化DOM操作和动画效果的实现。 3. 使用现代前端框架:如React、Vue或Angular,它们提供了更高级的组件化...