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>
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>

<body>
	<div class="wrap">
		<div class="pic1 pic">
			<div class="pic_num1 pic_num"></div>
		</div>
		<div class="pic2 pic">
			<div class="pic_num2 pic_num"></div>
		</div>
		<div class="pic3 pic">
			<div class="pic_num3 pic_num"></div>
		</div>
		<div class="pic4 pic">
			<div class="pic_num4 pic_num"></div>
		</div>
		<div class="pic5 pic">
			<div class="pic_num5 pic_num"></div>
		</div>
		<div class="pic6 pic">
			<div class="pic_num6 pic_num"></div>
		</div>
	</div>
</body>
</html>

JS代码(script.js):

$(function(){
	/*图片轮换的js*/
/*********初始设置**************/
//获取节点对象var imgOuter = $('.wrap');
	//所有图片所处的容器var imgDiv = $('.pic');
	//各图片所在的div容器//设置部分初始值与计算var timeId = null;
	//记录如片轮换的定时器，自动轮换与鼠标控制切换时用到var edgeDistance = 91;
	//记录相邻图片错开的距离var imgNow = 0;
	//记录当前显示的第几张图片，此处为默认值0var imgMouse = 0;
	//记录鼠标停留在第几张图片上var imgOuterWidth = imgOuter.width();
	//记录所有图片最外层容器的宽度，计算即将显示第一张图片时的，其他图片移动的距离// alert(imgDiv.size());
	/**********方法*************/
/*图片自动轮换的方法主体*/
function autoSlide(){
	//计算第几张图片开始运动if(imgNow == imgDiv.size()-1){
	imgNow = 0;
}
else{
	imgNow ++;
}
//显示第一张图片和显示后面图片的移动方式不同if(imgNow == 0){
	//显示第一张图片//图片左上角的数字样式先改变imgDiv.eq(imgNow).children().hide().siblings().children().show();
	imgDiv.eq(imgNow).siblings().children().show();
	//图片运动for(var i=imgDiv.size()-1;
	i>0;
	i--){
	imgDiv.eq(i).animate({
	'left':imgOuterWidth-(imgDiv.size()-i)*edgeDistance+'px'}
,2000);
}
}
else{
	//显示第一张之外的任意图片//图片左上角的数字样式先改变imgDiv.eq(imgNow).children().hide().siblings().children().show();
	imgDiv.eq(imgNow).siblings().children().show();
	//图片运动imgDiv.eq(imgNow).animate({
	'left':edgeDistance*imgNow+'px'}
,2000);
}
}
/*鼠标影响图片轮换的方法主体*/
function mouseSlide(){
	//判断鼠标所在图片是否已轮换过，选择右边图片移动或左边图片移动if(imgMouse > imgNow){
	//鼠标左边图片移动，即鼠标选中的是当前图片右边的图片for(var i= imgNow+1;
	i<=imgMouse;
	i++){
	//图片左上角数字样式改变imgDiv.eq(imgMouse).children().hide();
	imgDiv.eq(imgMouse).siblings().children().show();
	//图片移动imgDiv.eq(i).stop().animate({
	'left':edgeDistance*i+'px'}
,2000);
}
//重置当前图片的索引imgNow = imgMouse;
}
else{
	//鼠标右边图片移动，即鼠标选中的是当前图片左边的图片for(var i= imgNow;
	i>imgMouse;
	i--){
	//图片左上角数字样式改变imgDiv.eq(imgMouse).children().hide();
	imgDiv.eq(imgMouse).siblings().children().show();
	//图片移动imgDiv.eq(i).stop().animate({
	'left':imgOuterWidth-(imgDiv.size()-i)*edgeDistance+'px'}
,2000);
}
//重置当前图片的索引imgNow = imgMouse;
}
}
/**********图片控制事件*************/
/*图片自动轮换*/
timeId = setInterval(autoSlide,3000);
	/*鼠标影响图片轮换*/
imgDiv.hover(function(){
	//鼠标移入，停止自动轮换clearInterval(timeId);
	//获得鼠标停留在第几张图片，调用鼠标事件的方法imgMouse = $(this).index();
	if(imgMouse != imgNow){
	mouseSlide();
}
}
,function(){
	//鼠标离开，继续自动轮换timeId = setInterval(autoSlide,3000);
}
).bind('click',function(){
	imgNow = $(this).index();
}
);
}
);

CSS代码(style.css):

@charset "utf-8";*{padding:0;margin:0;}
li{list-style:none;}
body{margin:10px;background:#ccc;}
/* wrap */
.wrap{margin:50px auto;width:1134px;height:437px;position:relative;overflow:hidden;}
.pic{width:679px;height:437px;cursor:pointer;}
.pic1{background:url('../images/01.jpg');position:absolute;top:0;left:0;z-index:1;}
.pic_num1{width:74px;height:79px;position:absolute;top:40px;left:17px;background:url('../images/pic_num.jpg');background-position:0 0;display:none;}
.pic2{background:url('../images/02.jpg');position:absolute;top:0;left:679px;z-index:3;}
.pic_num2{width:74px;height:79px;position:absolute;top:40px;left:17px;background:url('../images/pic_num.jpg');background-position:-69px 0;}
.pic3{background:url('../images/03.jpg');position:absolute;top:0;left:770px;z-index:5;}
.pic_num3{width:74px;height:79px;position:absolute;top:40px;left:17px;background:url('../images/pic_num.jpg');background-position:-138px 0;}
.pic4{background:url('../images/04.jpg');position:absolute;top:0;left:861px;z-index:7;}
.pic_num4{width:74px;height:79px;position:absolute;top:40px;left:17px;background:url('../images/pic_num.jpg');background-position:-207px 0;}
.pic5{background:url('../images/05.jpg');position:absolute;top:0;left:952px;z-index:9;}
.pic_num5{width:73px;height:79px;position:absolute;top:40px;left:18px;background:url('../images/pic_num.jpg');background-position:-276px 0;}
.pic6{background:url('../images/06.jpg');position:absolute;top:0;left:1043px;z-index:11;}
.pic_num6{width:73px;height:79px;position:absolute;top:40px;left:18px;background:url('../images/pic_num.jpg');background-position:-345px 0;}

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