您好,欢迎来到jQuery吧!QQ群:193687763(钱端开发)

jQuery吧-Write Less, Do More | 注重前端开发

首页 > jQuery > jQuery特效 > jQuery焦点图幻灯片特效 > 正文

jquery带下拉按钮幻灯片效果

2014-08-05 01:08:01 作者:天外飞仙 人气:1050 Views

jquery带下拉按钮幻灯片效果
jquery带下拉按钮幻灯片效果
引入js代码

$(document).ready(function() { var index = 0; var images = $("#gallery img"); var thumbs = $("#thumbs img"); var imgHeight = $(thumbs).attr("height"); $(thumbs).slice(0,3).clone().appendTo("#thumbs"); for (i=0; i<thumbs.length; i++) { $(thumbs[i]).addClass("thumb-"+i); $(images[i]).addClass("image-"+i); } $("#next").click(sift); show(index); setInterval(sift, 8000); function sift() { if (index<(thumbs.length-1)){index+=1 ; } else {index=0} show (index); } function show(num) { $(images).fadeOut(400); $(".image-"+num).stop().fadeIn(400); var scrollPos = (num+1)*imgHeight; $("#thumbs").stop().animate({scrollTop: scrollPos}, 400); console.log(scrollPos, "img.image-"+num); }});

下载地址
预览地址

链接:http://www.jqueryba.com/4148.html(转载时请注明本文出处及文章链接)

jQuery吧-Write Less, Do More | 注重前端开发

jQuery吧-Write Less, Do More | 注重前端开发

Copyright © 2013 jqueryba.com, All Rights Reserved.奔跑在阿里云

免责声明:本站所有内容来源于互联网。如果本站部分内容侵犯您的权益,请您告知,站长会立即处理 苏ICP备12059471号

站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!