http://lichengyezi.iteye.com/blog/544198
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script src="http://www.cssrain.cn/demo/JQuery+API/jquery-1[1].2.1.pack.js" type="text/javascript"></script>
<style type="text/css">
* {margin:0;padding:0;font-size:12px;font-family:Verdana;}
img {border:0}
#pic{margin:5px;width:300px;height:200px;overflow:hidden;cursor:pointer;}
#play{position:absolute;margin-left:200px;margin-top:-30px;}
#play a{text-decoration: none;border:1px solid #CEDEF7;background-color:#E8FCEB;width:20px;height:20px;color:#2F49DF;display:block;float:left;text-align:center;line-height:20px;margin-right:3px;}
</style>
<script type="text/javascript">
var _c = _h = 0;
$(function(){
$('#play > a').click(function(){
var i = $(this).attr('alt') - 1;
clearInterval(_h);
_c = i;
play();
change(i);
})
$("#pic img").hover(function(){clearInterval(_h)}, function(){play()});
play();
})
function play()
{
_h = setInterval("auto()", 1000);
}
function change(i)
{
$('#play > a').css('background-color','#E8FCEB').eq(i).css('background-color','#C6FF5E').blur();
$("#pic img").hide().eq(i).fadeIn('slow');
}
function auto()
{
_c = _c > 2 ? 0 : _c + 1;
change(_c);
}
</script>
<title>js图片播放轮换</title>
</head>
<body>
<div id="pic">
<img src="http://www.cssrain.cn/demo/pic/cssrain-logo.JPG" width="300" height="200" alt="" />
<img src="http://www.cssrain.cn/demo/pic/usbmingpian.jpg" width="300" height="200" alt="" />
<img src="http://www.cssrain.cn/demo/pic/ganyingdeng2.jpg" width="300" height="200" alt="" />
<img src="http://www.cssrain.cn/demo/pic/ganyingdeng.jpg" width="300" height="200" alt="" />
</div>
<div id="play">
<a href="###" alt="1" style="background-color:#C6FF5E">1</a>
<a href="###" alt="2" >2</a>
<a href="###" alt="3" >3</a>
<a href="###" alt="4" >4</a>
</div>
<br/><br/><br/><br/>
<div>转:<a href="http://koyoz.com">koyoz.com</a> </div>
</body>
</html>
分享到：
相关推荐
**jQuery图片循环轮播代码详解** 在网页设计中，图片轮播是一种常见的功能，用于展示一组图片并自动或手动切换，以吸引用户注意力并提供更好的用户体验。jQuery库因其丰富的插件和简洁的API，成为实现这种功能的...
"jquery切换循环图"是指利用jQuery实现的一种动态展示图像或内容的循环播放效果，通常用于轮播图或者幻灯片展示。这种功能广泛应用于网站设计，可以吸引用户注意力，展示多张图片或信息而无需用户手动翻页。 首先，...
**jQuery无限循环图片轮播**是一种常见的网页动态效果，它能自动播放一组图片，并在最后一张后返回到第一张，形成无限循环的效果。这个技术在网站的首页、产品展示、广告区域等地方广泛应用，能够吸引用户的注意力并...
jQuery图片循环轮播代码是一个基于JavaScript库jQuery实现的图片展示功能，它允许用户在网页上以动态、连续的方式浏览一组图片。这个功能在网站设计中非常常见，用于展示产品图集、幻灯片或者背景图像切换等场景。...
在本文中，我们将深入探讨如何使用JQuery库来实现一个图片循环旋转的广告代码，这是一种常见于电商网站上的动态效果，能吸引用户的注意力并展示多种商品。JQuery是一款强大的JavaScript库，它简化了DOM操作、事件...
jQuery多重图片无限循环动画效果是一种常见的网页动态展示技术，它结合了JavaScript库jQuery的强大功能，为网站的图片展示带来生动有趣的用户体验。这种效果通常应用于图片相册、轮播广告或产品展示等场景，使得用户...
在本文中，我们将深入探讨如何使用jQuery实现左右循环滚动图片的代码。jQuery是一个强大的JavaScript库，它极大地简化了DOM操作、事件处理以及动画效果。在网页设计中，循环滚动图片是一种常见的展示方式，用于吸引...
《jQuery图片显示特效详解》 在网页设计与开发中，图片显示效果往往能极大地提升用户体验。jQuery，作为一款强大的JavaScript库，提供了丰富的功能和简洁的API，使得实现各种图片显示特效变得轻而易举。本教程针对...
【jQuery无限循环图片轮播代码】是一个常见的网页交互功能，广泛应用于网站的首页展示或产品介绍，能够以动态效果展示多张图片，提升用户体验。这个压缩包包含了一系列实现这一功能所需的文件，包括HTML、CSS样式表...
本篇文章将详细讲解如何使用jQuery实现图片轮流播放的效果，这通常被称为图片轮播或幻灯片展示。 首先，我们需要了解jQuery的基本用法。jQuery对象通过$符号创建，它可以用来选择页面上的元素，例如`$("#elementID...
7. **状态管理**：在轮播过程中，我们需要跟踪当前显示的图片索引，确保不会超出图片数组的边界，并正确处理首尾切换。 8. **控制按钮**：为用户提供向前和向后切换的按钮，需要在JavaScript中添加相应的事件监听器...
这段代码首先获取到滚动容器和所有子项，然后定义了一个`startScroll`函数，它会将当前显示的项移至末尾并更新索引，以实现循环滚动的效果。`slide`函数则负责平滑地移动这些项。这里的`setTimeout`用于设置滚动间隔...
《jQuery实现左右循环滚动图片代码详解》 在网页设计中，动态效果往往能吸引用户的注意力，其中图片的循环滚动是一种常见的交互方式。本教程将详细解析一个基于jQuery实现的左右循环滚动图片代码，帮助开发者理解和...
"基于Jquery图片滚动的LightBox展示效果"是一种流行的技术，它将jQuery的动态滚动功能与LightBox的弹出式全屏图像查看器相结合，为用户提供了既美观又实用的图像浏览体验。 首先，让我们深入了解jQuery。jQuery是一...
标题"javascript经典特效---图片循环显示"涉及到的就是使用JavaScript来实现一个图片轮播（或称图片循环显示）的效果，这是网页设计中常见的视觉呈现方式。 图片循环显示的基本原理是通过JavaScript来控制一组图片...
标题中的“jquery图片左右滚动+lightbox效果”是指利用jQuery库实现一种常见的网页图像展示功能，它结合了图片轮播和轻量级弹出窗口（lightbox）技术。这种效果可以让用户在浏览网页时，轻松地查看一组图片，既可以...
在提供的文件名"soChange"中，我们可以推断这可能是一个具体的jQuery图片切换插件。这个插件可能包含了上述提到的所有功能，并且进行了封装，方便开发者在项目中快速集成和自定义。 ### 使用与自定义 在实际应用中...
如果当前索引已经是边界，需要进行循环处理，即当最左边的图片向左移动时，实际上显示最后一张图片，反之亦然。 6. **图片放大效果**：在图片滚动过程中，中间的图片始终保持放大状态。因此，需要在图片切换后，...
标题“jQuery图片切换显示隐藏左右按钮控制图片-20130626”涉及到的是一个使用jQuery实现的图片轮播功能，其中包含了显示和隐藏左右控制按钮的交互设计。这个功能常见于网站的首页或者产品展示部分，用于动态展示多...
**jQuery图片放大滚动技术详解** 在网页设计中，图片展示是不可或缺的一部分，尤其在电商、产品展示等场景中，图片的交互性对于用户体验至关重要。"jQuery图片放大滚动"是一种常用的增强用户互动性的技术，它结合了...