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

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

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

jQuery图片自适应全屏幻灯片特效

2015-04-07 04:04:34 作者:天外飞仙 人气:705 Views

jQuery图片自适应全屏幻灯片特效
20150407145146
部分jquery代码

$(document).ready(function() { startTimer(); /** Main Slider **/ var timer; var slideCount = $('.thumbs li').length; var currSlide = $('.thumbs li').filter('.curr').index(); var nextSlide = currSlide + 1; var fadeSpeed = 1000; //Start slides timer functions function startTimer() { timer = setInterval(function() { $('.slide-item').eq(currSlide).fadeOut(fadeSpeed); $('.slide-item, .thumbs li').removeClass('curr'); $('.slide-item').eq(nextSlide).addClass('curr').fadeIn(fadeSpeed); $('.thumbs li').eq(nextSlide).addClass('curr'); currSlide = nextSlide; nextSlide = currSlide + 1 < slideCount ? currSlide + 1 : 0; }, 6000); } $('.thumbs li').click(function() { clearInterval(timer); startTimer(); currSlide = $(this).index(); nextSlide = currSlide + 1 < slideCount ? currSlide + 1 : 0;; $('.slide-item').fadeOut(fadeSpeed); $('.slide-item, .thumbs li').removeClass('curr'); $('.slide-item').eq($(this).index()).addClass('curr').fadeIn(fadeSpeed); $(this).addClass('curr'); });});

下载地址
预览地址

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

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

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

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

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

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