js实现 无缝切换 效果

版权声明:本文为老虎帅呆了原创文章,未经允许不得转载。 https://blog.csdn.net/fanhu6816/article/details/51914754
<!--html简单布局-->
<span style="white-space:pre">			</span><div id="banner">
				<div id="banner_left"><i></i></div>
				<div id="banner_center">
					<ol id="imgBox">
						<li><a href="#"><img src="img/images/lunbo1.jpg"/></a><span></span></li>
						<li><a href="#"><img src="img/images/lunbo2.jpg"/></a><span></span></li>
						<li><a href="#"><img src="img/images/lunbo3.jpg"/></a><span></span></li>
						<li><a href="#"><img src="img/images/lunbo4.jpg"/></a><span></span></li>
						<li><a href="#"><img src="img/images/lunbo5.jpg"/></a><span></span></li>
						<li><a href="#"><img src="img/images/lunbo6.jpg"/></a><span></span></li>
						<li><a href="#"><img src="img/images/lunbo7.jpg"/></a><span></span></li>
						<li><a href="#"><img src="img/images/lunbo8.jpg"/></a><span></span></li>
						<li><a href="#"><img src="img/images/lunbo9.jpg"/></a><span></span></li>
					</ol>
				</div>
				<div id="banner_right"><i></i></div>
				
				<ul>
					<li class="select"></li><li></li><li></li>
					<li></li><li></li><li></li>
					<li></li><li></li><li></li>
				</ul>
			</div>
<span style="font-family:Arial, Helvetica, sans-serif;"><!--下面是js部分,只写了实现左右切换的效果--></span>
//顶部轮播图
$(function(){
// 线动态计算出图片的容器ol的宽度,以后再添加或减少图片都可以动态改变
// 封装到一个函数中,方便后面使用


var olWidth=750*$("#banner_center ol li").length+"px";
function getOlWidth(){
$("#banner_center ol").css("width",olWidth);
}
getOlWidth();
//为了防止多次连续点击出现前一次运动过程被后一次覆盖,通过声明一个开关来控制;
var floag=true;
var num=0;
// 上一页
$("#banner_left i").click(function(){
/*
* 1、点击上一页之后先把最前面的一张图复制,并添加到列队的最后面
* 2、复制添加完成后进行移动,
* 3、移动完成之后再把最前的一张删除掉
*/
if(floag){
//进来先把开关关掉,等都执行完之后再打开
floag=false;
//复制前面的添加到最后去;
$("#banner_center ol li").first().clone().insertAfter($("#banner_center ol li").last());
getOlWidth();
//移动
$("#banner_center ol").animate({left:'-1340'},700,'swing',function(){
//移动完成之后把第一个删除,
$("#banner_center ol li").first().remove();
$("#banner_center ol").css("left","-590px");
//圈圈跟着变色
if(num>7){
num=-1;
}
$("#banner ul li").eq(num+1).addClass("select").siblings().removeClass("select");
num++;
//执行完所有操作之后再把开关打开
floag=true;
})
}
});
// 下一页
$("#banner_right i").click(function(){
 //把后边的复制到前面,等运动完成后再把最后一个删掉;
if(floag){
floag=false;
//复制后面的添加到最前面
$("#banner_center ol li").last().clone().insertBefore($("#banner_center ol li").first());
getOlWidth();
$("#banner_center ol").css("left","-1340px");
//移动
$("#banner_center ol").animate({left:'-590'},700,'swing',function(){
//移动完成之后把第最后一个删除,
$("#banner_center ol li").last().remove();
//圈圈跟着变色
if(num<-1){
num=7;
}
$("#banner ul li").eq(num-1).addClass("select").siblings().removeClass("select");
num--;
//执行完所有操作之后再把开关打开
floag=true;
})
}
})



})//最外层括号
展开阅读全文

没有更多推荐了,返回首页