<style type="text/css">
#play{width:511px;height:346px; border:#ccc 0px solid;}
#playNum{margin:320px 5px 0 320px;z-index:10;width:145px; text-align:center;position:absolute;height:25px;}
#playNum span{float:right;margin:0 2px;width:18px;height:20px;cursor:pointer;color:#000;background-image:url(images/circle1.png);background-repeat:no-repeat;text-align:center}
#playNum span a{display:none;}
#playShow img{width:473px;height:346px;}
</style>
<script language="JavaScript" type="text/javascript">
var t=n=0,count=$("#playShow img").size();
$(function(){
$("#playShow img:not(:first-child)").hide();
$("#playNum span:first").css({"background":"url(images/circle1.png)"});
$("#playNum span").click(function(){
var i=$(this).text()-1;
if(i>=count)return ;
$("#playShow img").filter(":visible").hide().parent().children().eq(i).fadeIn(3000);
$(this).css({"background":"url(images/circle1.png)"}).siblings().css({"background":"url(images/circle2.png)"});
});
t=setInterval("autoShow()",4000);
$("#play").hover(function(){clearInterval(t)},function(){t=setInterval("autoShow()",4000);});
});
function autoShow(){
n=n>=(count-1) ? 0:++n;
if(n==0)
$("#playNum span").eq(2).trigger('click');
else if(n==1)
$("#playNum span").eq(1).trigger('click');
else
$("#playNum span").eq(0).trigger('click');
}
</script>
分享到:
相关推荐
QQ商城首页的jQuery幻灯片效果是一个常见的网页交互设计元素,用于展示商品或信息,吸引用户的注意力,并提高网站的用户体验。这种效果通过动态切换图片、文字或其他内容来模拟幻灯片播放的效果,使得页面看起来更加...
下面将详细介绍jQuery幻灯片效果及其制作方法。 首先,jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。使用jQuery可以大大提高开发效率,减少代码量。在创建幻灯片效果时...
但感觉这个插件不仅仅是可以应用在幻灯相册上,确实应该称它为对象切换插件, 所以改了名称,simple object change ,简洁考虑直接就soChange,即如此改变,如此切换, 我也增加了一个选项卡切换的例子,相信你使用...
JavaScript 和 jQuery 在网页...总之,创建一个漂亮的jQuery幻灯片效果需要理解HTML结构、CSS样式以及jQuery的基本用法。通过结合这些技术,我们可以构建出具有吸引力且易于交互的网页元素,提升网站的整体用户体验。
在本文中,我们将深入探讨如何使用jQuery来创建一个仿苹果风格的幻灯片效果,以实现类似苹果设备开机时的动态展示画面。首先,我们需要理解jQuery库的核心概念,它是JavaScript的一个轻量级库,简化了DOM操作、事件...
本文将深入探讨“非常轻,快jQuery幻灯片效果”这一主题,这是针对网页中创建动态、吸引人的内容展示所设计的一个高效解决方案。 标题中的“非常轻,快jQuery幻灯片效果”指的是利用jQuery实现的一种轻量级且高效的...
幻灯片效果通常基于定时器和CSS3变换或传统jQuery动画来实现。基本步骤包括: 1. 获取元素:首先,你需要选择要展示的元素,这可以是图片、文本或者其他HTML内容。 2. 初始化幻灯片:使用jQuery选择器选取元素,并...
【jQuery幻灯片效果代码详解】 在网页设计中,图片幻灯片是一种常见的元素,用于展示多张图片并实现自动切换、淡入淡出等动态效果。腾讯开发的基于jQuery的图片幻灯片代码,正是为了满足这种需求,提供了一种高效、...
JavaScript 和 jQuery 是两种广泛应用于网页动态效果开发的脚本语言,尤其在创建各种吸引人的幻灯片效果方面,它们有着显著的优势。JavaScript 是一种轻量级的解释型编程语言,常用于网页交互和动态功能的实现,而 ...
标签“js特效-易迅网新品首发jQuery幻灯片”进一步确认了这个压缩包的内容,表明它涉及到JavaScript特效的实现,特别是针对易迅网新品发布的jQuery幻灯片效果。这可能包括了CSS样式文件、JavaScript脚本、HTML结构...
实现这个jQuery幻灯片效果的基本步骤如下: 1. **选择器与事件绑定**:使用jQuery的选择器找到所有的幻灯片元素,并绑定点击事件或定时器事件,以触发幻灯片的切换。 2. **动画效果**:根据需求,使用`.fadeIn()`...
plusview 是一个 jQuery 插件,它可以制作类似于 Google Play 商店截图列表项的幻灯片效果。 查看演示 中文说明 标签:plusview
"jQuery 3D幻灯片效果免费下载"是为开发者提供的一种利用jQuery实现的3D视觉体验的幻灯片插件。这个压缩包包含了用于创建独特、引人入胜的3D旋转幻灯片展示所需的所有资源。 首先,jQuery 3D幻灯片效果是一种高级的...
【可拖动的高大上jquery幻灯片】是一种网页设计技术,主要使用JavaScript库jQuery实现,用于创建具有动态效果的图片或内容展示模块。这种幻灯片通常包含多个页面,用户可以通过点击按钮或者直接拖动来切换不同的内容...
通过以上步骤,我们可以创建一个基本的jQuery幻灯片轮播效果。在实际应用中,还可以根据需求添加更多的功能,比如无限循环、自动适应屏幕大小、触摸滑动支持等。对于“jQuery途牛首页”的特定实现,可能还会包含途牛...
【标题】"仿UC浏览器官方网站全屏jQuery幻灯片"是一个网页开发项目,它旨在实现一个与UC浏览器官网类似的全屏jQuery幻灯片效果。这个项目可能是为了学习、练习或是应用到其他网站设计中,以增加网站的视觉吸引力和...
flux.js是一款能做出3D效果的jQuery幻灯片插件。这款jQuery幻灯片插件共有5种效果:爆炸效果、3D翻转效果、3D旋转效果、立方体效果和翻页效果。需要注意的是flux需要浏览器支持CSS3 transitions才能正常工作。
"小米官网带分类jQuery幻灯片.zip" 这个标题指的是一个包含小米官方网站上使用的、带有分类功能的jQuery幻灯片效果的压缩包文件。幻灯片通常用于网页设计中,用于展示多张图片或信息,通过自动切换或用户交互来呈现...
本资源提供了一个带文字说明的jQuery幻灯片自动轮播代码示例,帮助开发者理解和实现这种效果。 首先,我们来理解jQuery是什么。jQuery是一个快速、简洁的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及...