热门关键字:
jquery > jquery插件 > jquery焦点图 > 网友晓天分享原创Jquery实现图片幻灯片特效

网友晓天分享原创Jquery实现图片幻灯片特效

6420
所属分类:jquery焦点图
发布时间:2013/3/2 12:37:37
下载量:1109
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Detail.aspx?id=166

首先非常感谢网友晓天的无私分享,此Jquery特效是他的第一个原创作品,也是第一个版本,是模仿QQ音乐的图片轮播效果,基本功能已经实现,还在不断的强化中,希望网友们在使用的过程中多给点建议,让作品更加完善。。。

 

主要包括了以上功能:

1、自动播放设置

2、图片略缩图

3、图片渐变切换

4、鼠标悬浮事件

 

功能代码如下:

var myTimer;
var currentIndex = -1;	//当前图片索引
var $big = $('.big_img li');	
var $title = $('.slider_title li');
var $small = $('.slider_list li');	//小图索引
function show(){		//进行索引位置的处理
	var next = currentIndex < ($big.length -1)? currentIndex+1:0;	//判断图像的索引
	showImg(next);
}

function showImg(index){			
	$($big[index]).stop().fadeIn().siblings().stop().fadeOut();
	$($title[index]).stop().show().siblings().stop().hide();
	$($small[index]).addClass('current').siblings().removeClass('current');
	currentIndex = index;
}
	
$(function(){
	myTimer = setInterval("show()",3000);
	//大图停止事件
	$big.hover(function(){clearInterval(myTimer);},function(){myTimer = setInterval("show()",3000);});
	//小图事件
	$small.hover(function(){
		var index = $(this).attr('index');
		clearInterval(myTimer);
		showImg(index-1);
	},function(){
		myTimer = setInterval("show()",3000);
	});
	show();		
});

 

效果如下:

网友晓天分享原创Jquery实现图片幻灯片特效





如果您觉得本作品对您的学习有所帮助:支付鼓励



关键字:网友晓天 原创作品 幻灯片 滑动插件 图片播放 图片滚动 图片轮播 Jquery相册 QQ相册 banner横向滚动
  • 网友晓天分享原创Jquery实现图片幻灯片特效如果你喜欢学院的资源就下载吧,亲,谢谢!
  • 网友晓天分享原创Jquery实现图片幻灯片特效
  • 网友晓天分享原创Jquery实现图片幻灯片特效
  • 提示:如果网络问题无法下载,请多尝试几次,与 网站管理员联系 或 本站留言 !

声明: 本站内容均为网友原创或整理于互联网,版权归作品最初创作人,转载请注明(出处)原文链接,转载前请邮件至磐temdy@qq.com,一旦发现造成侵权行为,后果自负。。

友荐云推荐