jquery层叠图片滚动切换js代码

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

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

以下是 jquery层叠图片滚动切换js代码的示例演示效果:

当前平台(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>
<style type="text/css">
*{margin:0;padding:0;}
li{list-style-type:none;}
.box{width:800px;height:435px;text-align:center;font-size:50px;border:10px solid #93F;position:relative;margin:50px auto;overflow:hidden;}
.box ul{height:800px;width:435px;position:relative;}
.box ul li{width:800px;height:435px;left:300px;top:0;position:absolute;}
.box ol{position:absolute;bottom:15px;width:260px;margin-left:-130px;left:50%;z-index:20;text-align:center;}
.box ol a{width:16px;height:16px;margin-right:10px;background:#3F9;border-radius:50%;display:inline-block;box-shadow:2px 3px 5px #CCCCCC;}
.box ol a.active{background:white;z-index:18;}
</style>
<script src="js/jquery-1.7.2.js"></script>
<script src="js/scrollAd.js"></script>
</head>

<body>
<div class="box">
	<ol></ol>
	<ul>
    	<li class="active" style="left:0;z-index:11;"><img src="images/1.jpg" /></li>
        <li><img src="images/2.jpg" /></li>
        <li><img src="images/3.jpg" /></li>
        <li><img src="images/4.jpg" /></li>
    </ul>
</div>
</body>
</html>

JS代码(scrollAd.js):

$(function(){
	function scrollAd(t,options){
	if(!$(t))return;
	options=options ||{
}
;
	options.time1=options.time1 || 2000;
	//设置轮播图每次换图时间options.time2=options.time2 || 800;
	//设置每张图片做动画所需要的时间//获取图片的长度 ul的宽度 ul的图片复制一份var oU=$(t).children("ul");
	var oOl=$(t).children("ol");
	var aLi=oU.children();
	var length=aLi.length;
	//创建按钮for(var i=0;
	i<length;
	i++){
	$(oOl).append('<a href="javascript:;
	"></a>');
}
//默认显示第一个oOl.children()[0].className='active';
	//声明变量var iNow=0;
	var timer=null;
	function tab(){
	var h=iNow%length;
	//获取当前的索引值aLi.stop(true,true).css("zIndex","1");
	//所有动画停止aLi.eq(h).css("zIndex","18").stop(true,true).animate({
	left:0}
,options.time2,function(){
	$(this).siblings("li").css("zIndex","1");
	//降低其他li的层级if($(this).position().left==0){
	$(this).siblings("li").css({
	left:$(this).width()}
);
	//当前动画结束其他li才返回初始位置}
}
)oOl.find("a").removeClass().eq(h).addClass("active");
	//为当前按钮添加样式}
//运动公式function next(){
	iNow++;
	tab();
}
//自动滚动timer=setInterval(next,options.time1);
	//banner图移入动画停止$(t).mouseenter(function(){
	clearInterval(timer)}
)//按钮被移入事件oOl.find("a").mouseenter(function(){
	iNow=oOl.find("a").index($(this));
	setTimeout(tab,300);
}
)//banner图移出事件$(t).mouseleave(function(){
	clearInterval(timer)timer=setInterval(next,options.time1)}
)}
scrollAd(".box")}
)

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