素材网 素材网

jQuery制作商城淡入淡出带有标题显示焦点图特效

下载资源()次

阅读次数()次

发布时间:2014-03-29

jQuery制作商城淡入淡出带有标题显示焦点图特效
分享到:

用法简介:

来源:xw素材网

jQuery制作商城淡入淡出带有标题显示焦点图特效。
文件引用:

<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
	var currentIndex = 0;
	var DEMO; //函数对象
	var currentID = 0; //取得鼠标下方的对象ID
	var pictureID = 0; //索引ID
	$("#ifocus_piclist li").eq(0).show(); //默认
	autoScroll();
	$("#ifocus_btn li").hover(function() {
		StopScrolll();
		$("#ifocus_btn li").removeClass("current")//所有的li去掉当前的样式加上正常的样式
		$(this).addClass("current"); //而本身则加上当前的样式去掉正常的样式
		currentID = $(this).attr("id"); //取当前元素的ID
		pictureID = currentID.substring(currentID.length - 1); //取最后一个字符
		$("#ifocus_piclist li").eq(pictureID).fadeIn("slow"); //本身显示
		$("#ifocus_piclist li").not($("#ifocus_piclist li")[pictureID]).hide(); //除了自身别的全部隐藏
		$("#ifocus_tx li").hide();
		$("#ifocus_tx li").eq(pictureID).show();
	}, function() {
		//当鼠标离开对象的时候获得当前的对象的ID以便能在启动自动时与其同步
		currentID = $(this).attr("id"); //取当前元素的ID
		pictureID = currentID.substring(currentID.length - 1); //取最后一个字符
		currentIndex = pictureID;
		autoScroll();
	});
	//自动滚动
	function autoScroll() {
		$("#ifocus_btn li:last").removeClass("current");
		$("#ifocus_tx li:last").hide();
		$("#ifocus_btn li").eq(currentIndex).addClass("current");
		$("#ifocus_btn li").eq(currentIndex - 1).removeClass("current");
		$("#ifocus_tx li").eq(currentIndex).show();
		$("#ifocus_tx li").eq(currentIndex - 1).hide();
		$("#ifocus_piclist li").eq(currentIndex).fadeIn("slow");
		$("#ifocus_piclist li").eq(currentIndex - 1).hide();
		currentIndex++; currentIndex = currentIndex >= 4 ? 0 : currentIndex;
		DEMO = setTimeout(autoScroll, 2000);
	}
	function StopScrolll()//当鼠标移动到对象上面的时候停止自动滚动
	{
		clearTimeout(DEMO);
	}
});
</script>


   

相关标签:

网友评论:

评论

发表 剩余字数:20

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

@ 2013 xwcms.net . All Rights Reserved. xw素材网 | 备案号:晋ICP备13005902号 联系管理员
×

邮箱订阅

什么是邮箱订阅?

邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式,用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮,当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。