jQuery左右滚动轮播图插件切换特效代码

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

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

以下是 jQuery左右滚动轮播图插件切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图1:

部分效果截图2:

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" />
<meta http-equiv="X-UA-Compatible" content="IE=7">
<title>jQuery左右滚动轮播图插件</title>
<link href="css/global.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery.scrollpic.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
  $('.bannerFocus01').hhScrollpic({
 			scrollPicMth:2,  //每页显示个数
			defaultSpeed : 1000,   //默认滚动时间  点击按钮滚动时间
			speed : 5000   //自动播放滚动时间
 			
 	});
 	
  $('.bannerFocus02').hhScrollpic({
 			scrollPicMth:4,  //每页显示个数
			defaultSpeed : 1000,   //默认滚动时间  点击按钮滚动时间
			speed : 5000   //自动播放滚动时间
 	});
 	
});
</script>
</head>
<body>

	<div class="thBody">
		
		<div class="wrapperBox thLeft bannerFocus01">
  	  <div class="wrapper">
  	     <div class="downContent">
  	     	<ul>
  	     		<li>
  	     		  <a href="#"><img src="images/img/022.jpg" width="145" height="82"/></a>
  	     		  <p class="ed0652"><b>¥2221起</b> <img src="images/img011.jpg" /></p>
  	     		  <p><a href="#">房车游·新西兰南北岛11日豪华私家团集旅游</a></p>
  	     		</li>
  	     		<li>
  	     		  <a href="#"><img src="images/img/023.jpg" width="145" height="82"   /></a>
  	     		  <p class="ed0652"><b>¥2221起</b> <img src="images/img011.jpg" /></p>
  	     		  <p><a href="#">房车游·新西兰南北岛11日豪华私家团集旅游</a></p>
  	     		</li>
  	     		<li>
  	     		  <a href="#"><img src="images/img/023.jpg" width="145" height="82"   /></a>
  	     		  <p class="ed0652"><b>¥2221起</b> <img src="images/img011.jpg" /></p>
  	     		  <p><a href="#">房车游·新西兰南北岛11日豪华私家团集旅游</a></p>
  	     		</li>
  	     		<li>
  	     		  <a href="#"><img src="images/img/022.jpg" width="145" height="82"   /></a>
  	     		  <p class="ed0652"><b>¥2221起</b> <img src="images/img011.jpg" /></p>
  	     		  <p><a href="#">房车游·新西兰南北岛11日豪华私家团集旅游</a></p>
  	     		</li>
  	     		<li>
  	     		  <a href="#"><img src="images/img/022.jpg" width="145" height="82"   /></a>
  	     		  <p class="ed0652"><b>¥2221起</b> <img src="images/img011.jpg" /></p>
  	     		  <p><a href="#">房车游·新西兰南北岛11日豪华私家团集旅游</a></p>
  	     		</li>
  	     		<li>
  	     		  <a href="#"><img src="images/img/023.jpg" width="145" height="82"   /></a>
  	     		  <p class="ed0652"><b>¥2221起</b> <img src="images/img011.jpg" /></p>
  	     		  <p><a href="#">房车游·新西兰南北岛11日豪华私家团集旅游</a></p>
  	     		</li>
  	     	   
  	     	</ul>
  	     </div>
  	  </div>
  	</div>
  	
  	<div class="wrapperBox thLeft bannerFocus02">
  	  <div class="wrapper">
  	     <div class="downContent">
  	     	<ul>
  	     		<li>
  	     		  <a href="#"><img src="images/img/022.jpg" width="145" height="82"/></a>
  	     		  <p class="ed0652"><b>¥2221起</b> <img src="images/img011.jpg" /></p>
  	     		  <p><a href="#">房车游·新西兰南北岛11日豪华私家团集旅游</a></p>
  	     		</li>
  	     		<li>
  	     		  <a href="#"><img src="images/img/023.jpg" width="145" height="82"   /></a>
  	     		  <p class="ed0652"><b>¥2221起</b> <img src="images/img011.jpg" /></p>
  	     		  <p><a href="#">房车游·新西兰南北岛11日豪华私家团集旅游</a></p>
  	     		</li>
  	     		<li>
  	     		  <a href="#"><img src="images/img/023.jpg" width="145" height="82"   /></a>
  	     		  <p class="ed0652"><b>¥2221起</b> <img src="images/img011.jpg" /></p>
  	     		  <p><a href="#">房车游·新西兰南北岛11日豪华私家团集旅游</a></p>
  	     		</li>
  	     		<li>
  	     		  <a href="#"><img src="images/img/022.jpg" width="145" height="82"   /></a>
  	     		  <p class="ed0652"><b>¥2221起</b> <img src="images/img011.jpg" /></p>
  	     		  <p><a href="#">房车游·新西兰南北岛11日豪华私家团集旅游</a></p>
  	     		</li>
  	     		<li>
  	     		  <a href="#"><img src="images/img/022.jpg" width="145" height="82"   /></a>
  	     		  <p class="ed0652"><b>¥2221起</b> <img src="images/img011.jpg" /></p>
  	     		  <p><a href="#">房车游·新西兰南北岛11日豪华私家团集旅游</a></p>
  	     		</li>
  	     		<li>
  	     		  <a href="#"><img src="images/img/023.jpg" width="145" height="82"   /></a>
  	     		  <p class="ed0652"><b>¥2221起</b> <img src="images/img011.jpg" /></p>
  	     		  <p><a href="#">房车游·新西兰南北岛11日豪华私家团集旅游</a></p>
  	     		</li>
  	     	   
  	     	</ul>
  	     </div>
  	  </div>
  	</div>
  	
  </div>
</body>
</html>

JS代码(jquery.scrollpic.js):

(function($){
	$.fn.hhScrollpic = function(options){
	var opts = $.extend({
}
,$.fn.hhScrollpic.defaults,options);
	//主体代码return this.each(function(){
	var $this = $(this);
	var $Mth = opts.scrollPicMth;
	//每页显示个数var speed = opts.speed;
	//速度var defaultSpeed = opts.defaultSpeed;
	//默认滚动时间 点击按钮滚动时间var speed = opts.speed;
	//自动播放滚动时间var $downContent = $this.find('.downContent');
	var bLen = $this.find('.downContent ul li').length;
	//总个数var liPicWidth = $this.find('.downContent li').width();
	var bUlWidth = bLen * liPicWidth + bLen * 20;
	var number=0;
	var index=0;
	var oldStartTime = 0;
	var bshowPics;
	var picTimer;
	//计算当前对象的宽度var $thisWidth = ($Mth * liPicWidth) + (($Mth-1)*20);
	$this.css('width',$thisWidth);
	$this.find('.downContent ul').width(bUlWidth);
	var btn = '<div class="thLeft up"><div class="thLeft buttom"><span class="buttom_left"></span></div><ul class="yb_box_topbs">';
	if(bLen % $Mth == 0){
	number = parseInt(bLen/$Mth);
}
else{
	number = parseInt(bLen/$Mth)+1;
}
//number=number.toFixed(0);
	for(var i = 0;
	i < number;
	i++){
	btn += "<li>" + i + "</li>";
}
btn += '</ul><div class="buttom thLeft"><span class="buttom_right"></span></div></div>';
	$this.find('.wrapper').before(btn);
	//滚动圆点和按钮var $ulBoxLi= $this.find('.yb_box_topbs li');
	$ulBoxLi.eq(index).addClass('current').siblings().removeClass('current');
	var $butLeft = $this.find('.buttom_left');
	var $butRight = $this.find('.buttom_right');
	//计算按钮到边框的距离var b = $this.find('.up').width();
	var a = ($thisWidth/2)-(b/2);
	$this.find('.up').css('padding-left',a);
	function bshowPics(index){
	$downContent.stop().animate({
	left:-$thisWidth-20}
,defaultSpeed,"swing",function(){
	for (var i = 0;
	i < $Mth;
	i++){
	$downContent.children().append($downContent.children().children(":first"));
}
$downContent.css({
	left:0}
);
}
)if(index+1==number){
	index=0;
}
else{
	index+=1;
}
$ulBoxLi.eq(index).addClass('current').siblings().removeClass('current');
}
$downContent.hover(function(){
	clearInterval(picTimer);
}
,function(){
	picTimer = setInterval(function(){
	bshowPics(index);
	index++;
	if(index == number){
	index = 0;
}
}
,speed);
}
).trigger('mouseleave');
	$butLeft.hover(function(){
	clearInterval(picTimer);
}
,function(){
	picTimer = setInterval(function(){
	bshowPics(index);
	index -= 1;
	if(index == -1){
	index = number - 1;
}
}
,speed);
}
);
	$butRight.hover(function(){
	clearInterval(picTimer);
}
,function(){
	picTimer = setInterval(function(){
	bshowPics(index);
	index++;
	if(index == number){
	index = 0;
}
}
,speed);
}
);
	$butLeft.click(function(){
	var currentIndex=$this.find('ul.yb_box_topbs li.current').index();
	if(currentIndex-1<0){
	currentIndex=number-1;
}
else{
	currentIndex-=1;
}
$ulBoxLi.eq(currentIndex).addClass('current').siblings().removeClass('current');
	var startTime = Date.parse(new Date());
	var cha = startTime-oldStartTime;
	if(cha == 0){
	for (var i = 0;
	i < $Mth;
	i++){
	$downContent.children().children(":first").before($downContent.children().children(":last"));
}
$downContent.stop().css({
	"left":-$thisWidth-20}
).animate({
	left:0}
,100,"swing");
}
else{
	for (var i = 0;
	i < $Mth;
	i++){
	$downContent.children().children(":first").before($downContent.children().children(":last"));
}
$downContent.stop().css({
	"left":-$thisWidth-20}
).animate({
	left:0}
,defaultSpeed,"swing");
}
oldStartTime=startTime;
}
);
	$butRight.click(function(){
	var currentIndex=$this.find('ul.yb_box_topbs li.current').index();
	if(currentIndex+1==number){
	currentIndex=0;
}
else{
	currentIndex+=1;
}
$ulBoxLi.eq(currentIndex).addClass('current').siblings().removeClass('current');
	/*bshowPics(index);
	index++;
	if(index == number){
	index = 0;
}
*/
var startTime = Date.parse(new Date());
	var cha=startTime-oldStartTime;
	//$("body").append("startTime:"+startTime+" oldStartTime:"+oldStartTime+" cha:"+cha+"<br/>");
	if(cha == 0){
	$downContent.stop().animate({
	left:-$thisWidth-20}
,100,"swing",function(){
	for (var i = 0;
	i < $Mth;
	i++){
	$downContent.children().append($downContent.children().children(":first"));
}
$downContent.css({
	left:0}
);
}
);
}
else{
	$downContent.stop().animate({
	left:-$thisWidth-20}
,defaultSpeed,"swing",function(){
	for (var i = 0;
	i < $Mth;
	i++){
	$downContent.children().append($downContent.children().children(":first"));
}
$downContent.css({
	left:0}
);
}
);
}
oldStartTime=startTime;
}
);
}
);
}
;
	// 默认参数$.fn.hhScrollpic.defaults ={
	scrollPicMth:2,//每页显示个数defaultSpeed:1000,//默认滚动时间 点击按钮滚动时间speed:5000 //自动播放滚动时间}
;
	$.fn.hhScrollpic.setDefaults = function(settings){
	$.extend( $.fn.hhScrollpic.defaults,settings );
}
;
}
)(jQuery);

CSS代码(global.css):

@charset "utf-8";/*Initialization style*/
body{font-family:Arial,Helvetica,sans-serif;color:#000;font-size:12px;background:url(../images/homeBg.gif) repeat-x #fff;}
html,body,form,input,select,textarea,div,p,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;}
ul,li{float:left;list-style:none;}
textarea{overflow-y:auto;overflow-x:hidden;}
input,select,img{vertical-align:middle;}
h2{font-size:13px;font-weight:bold;}
table,td,img{border:0;}
table,tr,td{border-collapse:collapse;border-spacing:0;}
a:link,a:visited{color:#024cab;text-decoration:none;outline:none;}
a:hover{color:#ff6407;text-decoration:underline;}
address,caption,cite,code,dfn,em,strong,th,var,i{font-style:normal;font-weight:normal;}
input{background:#fff;border:none;}
/*public Control layout*/
.thBody{width:980px;margin:0 auto;}
/*整站控制布局 宽度固定*/
.thLeft{float:left;}
.wrapperBox{width:310px;overflow:hidden;margin-left:20px;margin-right:100px;zoom:1;position:relative;}
.wrapper{width:310px;font-family:Tahoma,Geneva,sans-serif;width:310px;position:relative;}
.up{padding-top:10px;height:25px;}
.up span{width:auto;height:auto;padding:0;}
.up ul li{width:6px;height:6px;background:url(../images/img012.jpg) no-repeat -34px -5px;margin-right:2px;text-indent:-99999px;}
.up ul li.current{color:#069;width:6px;height:6px;background:url(../images/img012.jpg) no-repeat -21px -5px;margin-right:2px;}
.buttom{height:20px;}
ul.yb_box_topbs{float:left;margin:5px 6px 5px 8px;}
.up span.buttom_left,.up span.buttom_right{cursor:pointer;width:15px;float:left;height:15px;background:url(../images/img012.jpg) no-repeat;}
.up span.buttom_right{background-position:right 0;}
.downContent{position:relative;width:100%;}
.downContent li{width:145px;margin-right:20px;}
.downContent li p{width:145px;text-align:center;line-height:25px;}

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