以前我在博客中发表过这个图片循环效果,是用javascript写的
http://ice-cream.iteye.com/admin/blogs/183237
最近在研究jquery,就用jquery改写了一下,发现代码要简单很多
jquery代码:
$(document).ready(function(){
$("img:not(:first)").hide();
$("span:first").addClass("highlight");
var time = 1;
function changeAuto(){
if(time == 3){
time = 0;
}
$("img:visible").slideUp("slow").parent().children("span").removeClass("highlight");
$("img:eq("+time+")").slideDown("slow").parent().children("span").addClass("highlight");
time++;
}
var interval = window.setInterval(function(){
changeAuto();
}, 3000);
$("span").click(function(){
if($(this).attr("class")!="highlight"){
clearInterval(interval);
$("img:visible").slideUp("slow").parent().children("span").removeClass("highlight");
$(this).addClass("highlight").parent().children("img").slideDown("slow");
}
});
$("img").each(function(index){
$(this).hover(
function(){
clearInterval(interval);
},
function(){
interval = window.setInterval(function(){
changeAuto();
}, 3000);
}
);
});
});
- 大小: 73.9 KB
分享到:
- 2009-02-08 21:18
- 浏览 3399
- 评论(6)
- 论坛回复 / 浏览 (3 / 8387)
- 查看更多
相关推荐
2. **倒影轮播**:倒影轮播是一种常见的网页展示手法,jQuery可以配合CSS3实现图片的旋转、缩放和倒影效果。同时,`$.fn.cycle`插件可以帮助实现图片自动切换的轮播功能。 3. **离子效果**:可能是指使用了Ionic...
标题 "很炫的图片循环效果" 暗示我们讨论的是一个关于图像展示技术的项目,特别是涉及到一种动态、吸引人的图片轮播或滑动效果。这种效果在网站设计、移动应用或者数字媒体中非常常见,它能有效地吸引用户的注意力并...
在ASP.NET环境中,你可以将这个jQuery图片切换效果封装成一个用户控件(User Control)。创建一个新的ASCX文件,将上述HTML、CSS和JavaScript代码放入其中。然后在需要使用的地方,像引用其他控件一样引用这个用户...
本主题聚焦于"JQuery图片滑动很炫动画效果",这通常指的是利用jQuery来创建吸引人的图像展示效果,例如轮播图、幻灯片或滑动切换等。以下将详细讲解这一领域的核心知识点。 首先,让我们从基本概念开始。jQuery的...
在网页设计中,图片切换效果是提升用户体验的重要手段之一,jQuery作为一个强大的JavaScript库,提供了丰富的功能来实现这种效果。本文将深入探讨如何使用jQuery创建超炫的图片切换效果。 首先,我们需要理解jQuery...
8. **CSS3配合**:虽然JQuery可以实现很多动画效果,但现代浏览器对CSS3的支持使得我们可以更高效地实现某些特效。例如,使用CSS3的transition和transform属性可以实现硬件加速的动画,同时减轻JavaScript的负担。 ...
jQuery多重图片无限循环动画效果是一种常见的网页动态展示技术,它结合了JavaScript库jQuery的强大功能,为网站的图片展示带来生动有趣的用户体验。这种效果通常应用于图片相册、轮播广告或产品展示等场景,使得用户...
本文将详细讲解如何利用jQuery创建“超炫的图片上下滚动效果”。 一、jQuery简介 jQuery是由John Resig在2006年创建的一个开源库,它的核心理念是“Write Less, Do More”。jQuery简化了HTML文档遍历、事件处理、...
标题“jquery高亮图片框 jquery图片展示 jquery效果很好”所指的知识点主要围绕jQuery如何实现高亮图片框以及优雅地展示图片。下面将详细介绍这两个方面,并探讨jQuery库在实现这些功能时的优势。 首先,jQuery高亮...
总结来说,"jQuery图片左右滚动效果代码"是通过jQuery的DOM操作、事件处理和动画制作等功能,结合自动轮播和左右箭头交互,实现了一种动态的图片展示效果。这样的代码对于提升网站的视觉吸引力和用户体验有着重要...
在网页设计中,jQuery 是一个非常流行的 JavaScript 库,它极大地简化了JavaScript的使用,使得开发者可以更加便捷地实现各种动态效果,包括图片展示。在本文中,我们将深入探讨如何利用jQuery来创建丰富的图片展示...
本教程将深入探讨如何使用jQuery创建一款炫酷的滚动条效果,该效果代码简洁,资源占用低,且样式可自定义。 首先,jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理、动画制作等多个方面的工作。在实现...
"很炫很酷的Jquery组件"这个压缩包很可能包含了各种精心设计的jQuery插件和自定义控件,这些都是前端开发中的重要工具,能够帮助开发者创建功能丰富、用户体验优良的BS(Browser-Server,即浏览器-服务器)项目。...
在这个主题“jQuery悬浮图片上13种超炫效果”中,我们将探讨如何利用jQuery来实现各种创新且吸引人的图像悬浮效果,以提升网站的用户体验和视觉吸引力。 1. **图片滑动显示** 这个效果可以使图片在鼠标悬浮时从一...
首先,`jQuery图片播放`是指使用jQuery库来创建具有动态效果的图片展示机制,这种机制通常包含滑动、缩放、淡入淡出等多种视觉效果,使得用户能够以更加吸引人的方式浏览图片。在"galleryview"这个实例中,我们将...
总的来说,"图片3D循环滚动-很炫-很亮效果(源码)"是一个结合了CSS3 3D变换和jQuery动画技术的网页特效。通过理解这些技术,开发者可以创建出各种创新的视觉体验,提升网站的吸引力和用户体验。如果你对这个效果感...
你可以下载并参考这些资源,以便更好地理解和实践jQuery图片伸缩效果。 总之,jQuery为实现图片的伸缩效果提供了强大的工具,结合CSS3的特性,我们可以轻松创建出丰富多样的交互式图片展示。通过理解并熟练运用这些...
接下来,我们将深入探讨如何实现jQuery图片渐变效果及其相关的知识点。 首先,我们需要理解jQuery的基本用法。在HTML结构中,我们需要插入jQuery库的链接,通常通过CDN(内容分发网络)来引入,如: ```html ...
本篇文章将深入探讨如何利用jQuery库实现图片的淡化切换效果。 jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理以及动画效果的创建。对于"淡化效果"的图片切换,我们可以利用jQuery的fadeIn()和...