- 浏览: 320691 次
- 性别:
- 来自: 上海
文章分类
最新评论
来看下效果图:
<script src="jquery.js" type="text/javascript"></script> <script type="text/javascript"> var theInt = null; var curclicked = 0; $(function(){ autoPlay(); }) function autoPlay(){ $('#transparence').css('opacity','0.4'); $('#pic_list img').css({'opacity':'0.6'}); $('#pic_list img:eq(0)').css({'top':'0','opacity':'1'}); $('#pic_list a').click(function(){return false}); t(0); $('#pic_list img').mouseover(function(){ if($('#big_pic').attr('src') == $(this).attr('src')) return; t($('#pic_list img').index($(this))); }); } t = function(i){ clearInterval(theInt); if( typeof i != 'undefined' ) curclicked = i; $('#big_pic').fadeOut(0).fadeIn(500).attr('src',$('#pic_list img').eq(i).attr('src')); $('#big_imgs').attr('href',$('#pic_list img').eq(i).parents('a').attr('href')); $('#big_imgs').attr('title',$('#pic_list img').eq(i).parents('a').attr('title')); $('#pic_list img').eq(i).parents('li').nextAll('li').find('img').animate({top:15,opacity:0.6},500); $('#pic_list img').eq(i).parents('li').prevAll('li').find('img').animate({top:15,opacity:0.6},500); $('#pic_list img').eq(i).animate({top:0},500).css('opacity','1'); theInt = setInterval(function (){ i++; if (i > $('#pic_list img').length - 1) {i = 0}; $('#big_pic').fadeOut(0).fadeIn(500).attr('src',$('#pic_list img').eq(i).attr('src')); $('#big_imgs').attr('href',$('#pic_list img').eq(i).parents('a').attr('href')); $('#big_imgs').attr('title',$('#pic_list img').eq(i).parents('a').attr('title')); $('#pic_list img').eq(i).parents('li').nextAll('li').find('img').animate({top:15,opacity:0.6},500); $('#pic_list img').eq(i).parents('li').prevAll('li').find('img').animate({top:15,opacity:0.6},500); $('#pic_list img').eq(i).animate({top:0},500).css('opacity','1'); },3000) } </script>
<style type="text/css"> body,div,ul,li { margin:0; padding:0;} #autoplay { position:relative; width:342px; height:228px;} #transparence { position:absolute; left:0; bottom:0; width:100%; height:37px; border-top:1px solid #fff; background:#000; z-index:1;} #pic_list { position:absolute; left:0; bottom:0; list-style:none; overflow:hidden; z-index:2;} #pic_list li { float:left; width:39px; height:37px; padding-top:10px;margin:0 3px;} #pic_list li img { position:absolute; top:15px; width:37px; height:25px; border:1px solid #fff;} #big_pic { position:absolute; width:100%; height:100%; border:none;} </style>
<div id="autoplay"> <a href="http://ice-cream.iteye.com/picture/8308" id="big_imgs"><img src="http://ice-cream.iteye.com/upload/picture/pic/8308/fe1bdce7-17d9-35c6-90a9-8cdf961df3e4.jpg" id="big_pic" alt=""></a> <ul id="pic_list"> <li><a href="http://ice-cream.iteye.com/picture/8308"><img src="http://ice-cream.iteye.com/upload/picture/pic/8308/fe1bdce7-17d9-35c6-90a9-8cdf961df3e4.jpg" alt=""></a></li> <li><a href="http://ice-cream.iteye.com/picture/13325"><img src="http://ice-cream.iteye.com/upload/picture/pic/13325/3aeca676-fc57-3c9a-9407-70eeaf6ea84e.jpg" alt=""></a></li> <li><a href="http://ice-cream.iteye.com/picture/8352"><img src="http://ice-cream.iteye.com/upload/picture/pic/8352/1b6561c4-4a0b-39df-982b-322d6650b553.jpg" alt=""></a></li> </ul> <span id="transparence"></span> </div>
发表评论
-
遍历class
2010-11-14 22:03 1976一般国外的网站很注重细节,他们会把菜单或者button做成图片 ... -
简单的新闻滚动
2010-11-09 23:07 1409这里直接用jquey的animate函数做的滚动效果 ... -
上一张下一张
2010-11-09 22:12 3344预览照片的常用功能:上一张下一张 效果图(很喜欢的蒙奇 ... -
EasySlider
2009-11-16 21:58 1599Easy Slider 1.5 - The Easiest j ... -
Cookie Plugin for jQuery
2009-08-09 23:30 1948Cookie Plugin for jQuery ... -
价格过滤条
2009-04-03 10:18 1188写了一个价格过滤条: 重点是按钮的css定位要算好。 只能 ... -
js图片轮换效果(二)
2009-03-13 15:23 4787结构: <ul id="picture& ... -
jquery ui 日历插件(换色+类型)
2009-03-10 16:59 5603抽空把jquery ui 里的日历做了个整理,整合了换色和几 ... -
二级菜单效果(3)
2009-03-07 16:05 1546html代码结构: <li class=&quo ... -
jquery之Image Scroller插件
2009-02-23 21:10 2240jquery之Image Scroller插件 图片滚动插 ... -
jquery学习之—构建功能型表单(二)
2009-02-10 20:45 1367在构建功能型表单(一) 中介绍了一些适用于用户进行文本性输入的 ... -
很炫的图片循环效果(jquery改写版)
2009-02-08 21:18 3352以前我在博客中发表过这个图片循环效果,是用javascript ... -
用animate方法展示大图
2009-02-06 15:44 1276demo中点击按钮后div元素的几个不同属性一同变化 ... -
菜单伸缩动画
2009-02-06 13:41 1510方法: $(document).ready(funct ... -
sexy curls插件
2009-02-06 12:14 1214The sexy curls jquery plugin ... -
facebox插件
2009-01-19 14:03 3229在网上down下facebox1.2版的源码, 重新整理了下( ... -
lightbox插件
2009-01-16 16:58 2200lightbox基于jquery1.3版(附件1) 具 ... -
thickbox插件用法
2009-01-13 22:47 1588最近发现一个不错的基于jquery的插件thickBox ,感 ... -
动态过滤填充input框和用弹出层替换select框
2008-12-23 23:21 3130左图是用keydown事件写的动态过滤填充input框 $ ... -
js图片轮换效果(一)
2008-12-15 21:39 7656常常在各大网站上看到如下图所示的图片轮换效果,有的是用flas ...
相关推荐
自动滚动的jQuery幻灯片播放图片效果代码 自动滚动的jQuery幻灯片播放图片效果代码 自动滚动的jQuery幻灯片播放图片效果代码
jQuery幻灯片插件可自动轮播和暂停的图片幻灯片代码
带文字说明的jQuery幻灯片自动轮播代码
自动滚动的jQuery幻灯片代码
这是一款酷炫的带文字说明的jQuery幻灯片自动轮播代码,jQuery焦点图轮播切换展示特效。
6宫格自动轮换jquery幻灯片是一款基于jquery库的幻灯片,自动轮换,带缩略图,带图片标题和图片文字描述。
jquery 幻灯片插件,可用于广告、图片新闻等模块,默认配置就很好,带左右箭头、圆点导航和自动播放,可满足大多数要求。
之前我们分享过很多炫酷和实用的jQuery...今天我们要再介绍一个jQuery幻灯片播放器插件,它的功能很齐全,不仅可以手动切换图片,而且可以开启和关闭自动播放图片功能。另外,还可以展开缩略图列表迅速预览所有图片。
jQuery 幻灯片插件 多功能自动播放.zip
flickity是一款响应式、适用于移动设备触摸屏、可滑动显示的jQuery幻灯片插件。该幻灯片插件可以设置多种显示效果,可以自动播放,是一款移动优先的jQuery幻灯片插件。
这是一款可以拖动切换的全屏jQuery幻灯片特效。该幻灯片特效特效可以使用鼠标来前后切换,带分页圆点按钮,可以自动播放,并且带有一点视觉差效果。
TAB箭头标签jQuery幻灯片是一款支持自动播放,带图片文字描述,带缩略图,点击缩略图切换大图,淡入淡出效果的jQuery幻灯片。
Jquery图片幻灯片展示,可以自动播放,鼠标放上去也会切换图片
jquery全屏简洁带索引按钮自动播放的幻灯片.zip
最简单的jquery图片幻灯片 自动图片轮播,不显示其他任何额外东西
一款jquery全屏幻灯片插件,带自动播放功能,还可以暂停播放,最大特点是页面能够过渡的十分平滑。
jQuery+CSS 幻灯片左右自动滚动带数字与左右点击焦点幻灯片