jquery淘宝商品图片轮换代码轮播滚动切换特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery淘宝商品图片轮换代码轮播滚动切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery淘宝商品图片轮换代码</title>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
/* show_box */
.show_box{width:550px;position:relative;height:321px;overflow:hidden;margin:40px auto 0 auto;}
ul.pic_list{width:550px;height:321px;position:relative}
ul.pic_list li{float:left;width:100%;height:321px;position:absolute;top:0px;left:0px}
.title_nav{float:left;width:100%;height:60px;position:absolute;bottom:-10px;left:0px}
.title_nav a{float:left;display:inline-block;width:79px;margin-right:1px;background:#444;padding:5px 15px;text-align:center;color:#fff;text-decoration:none;}
.title_nav a.select{background:#09C url(../images/sanj.gif) no-repeat center 47px}
</style>

</head>
<body>

<div class="show_box">
	<ul class="pic_list">
		<li style="display:block"><a href="#" title=""><img alt="1" src="images/1.jpg"/></a></li>
		<li><a href="#" title=""><img alt="2" src="images/2.jpg"/></a></li>
		<li><a href="#" title=""><img alt="2" src="images/3.jpg"/></a></li>
		<li><a href="#" title=""><img alt="2" src="images/4.jpg"/></a></li>
		<li><a href="#" title=""><img alt="2" src="images/5.jpg"/></a></li>
	</ul>
	<div class="title_nav">
		<a href="#" class="select">相约情人节全场119元起</a>
		<a href="#">新款上线全场357元起</a>
		<a href="#">愤怒小鸟特卖全场89元</a>
		<a href="#">男鞋促销第一波全场3.1折起</a>
		<a href="#">春季新品发布全场4.1折起</a>
	</div>
</div>
 
<script type="text/javascript">
$(function(){
	$(".show_box").turnPic();
})
</script>
</body>
</html>

JS代码(script.js):

// JavaScript Document;
	$(function(){
	$.fn.turnPic=function(){
	var index=0;
	var showUl=$(this).children("ul.pic_list").children("li");
	var len=showUl.length;
	var navList=$(this).children("div").children("a");
	var timer;
	navList.mouseover(function(){
	index=navList.index(this);
	showImg(index);
}
).eq(0).mouseover();
	$(this).hover(function(){
	clearInterval(timer);
}
,function(){
	timer=setInterval(function(){
	showImg(index);
	index++;
	if(index==len){
	index=0;
}
}
,3000)}
).trigger("moverleave");
	function showImg(index){
	showUl.eq(index).stop(true,true).fadeIn("slow").siblings().fadeOut("slow");
	navList.removeClass("select").css("opacity","0.7").eq(index).addClass("select").css("opacity","1");
}
}
}
)(jquery);

附件:下载该文件资源,减少时间成本(增值服务)