jquery上下左右图片轮播滚动切换特效代码

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

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

以下是 jquery上下左右图片轮播滚动切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图1:

部分效果截图2:

HTML代码(index.html):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>jquery上下左右图片轮播特效</title>
<style type='text/css'>
*{margin:0;padding:0}
html,body{
}
.sliderPlay{
  width:533px;
  height:200px;
  margin:50px auto;
  position: relative;
  overflow: hidden;
  border: 10px solid #dcdcdc;
  border-radius: 3px;
}
.slider{
	position: absolute;
	height:200px;
	left:0;
	top:0;
	width: 100%;
}
.slider li{
	float: left;
	list-style-type: none;
	height:100%;
	width: 533px;
}
.slider img{
	border:0;
	width:533px;
	height:200px
}
.btnBox{
	position: absolute;
	bottom:0px;
	width:100%;
	height:30px;
	text-align:right;
	line-height:30px
}
.btnBox .btn{
	margin-right:5px;
	display: inline-block;
	width:20px;
	height:20px;
	text-align:center;
	line-height:20px;
	background:#ddd;
	cursor: pointer;
	border-radius: 15px;
}
.btnBox .cur{background:#5DCB17;color: #fff}
</style>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery-SliderPlay-1.0.min.js"></script>
<script>
$(function(){
	$('#sliderPlay').sliderPlay();
	$('#sliderPlay2').sliderPlay({
		speed:500, //动画效果持续时间
		timeout:3000,//幻灯间隔时间
		btnBox:'btnBox2', //按钮的容器id
		btnCurClassName:'cur', //当前按钮的className,
		direction:'up', //left , up 
		mouseEvent:'hover' //事件类型，默认是click ,hover
	});
});


</script>

</head>
<body>
<div class='sliderPlay' id='sliderPlay'>
  <ul class='slider'>
	    <li><a href='javascript:;'><img src='images/001.png'/></a></li>
	    <li><a href='javascript:;'><img src='images/002.png'/></a></li>
	    <li><a href='javascript:;'><img src='images/003.png'/></a></li>
  </ul>
  <div id='btnBox' class='btnBox'>
      <span class='cur btn'>1</span>
      <span class='btn'>2</span>
      <span class='btn'>3</span>
  </div>
</div>


<!-- -------------------第二个demo start------------------------------------- -->

<div class='sliderPlay' id='sliderPlay2'>
  <ul class='slider'>
	    <li><a href='javascript:;'><img src='images/001.png'/></a></li>
	    <li><a href='javascript:;'><img src='images/002.png'/></a></li>
	    <li><a href='javascript:;'><img src='images/003.png'/></a></li>
  </ul>
  <div id='btnBox2' class='btnBox'>
      <span class='cur btn'>1</span>
      <span class='btn'>2</span>
      <span class='btn'>3</span>
  </div>
</div>
</body>
</html>

JS代码(jquery-SliderPlay-1.0.min.js):

;
	(function(a){
	a.fn.sliderPlay=function(b){
	var c={
	btnBox:'btnBox',btnCurClassName:'cur',direction:'left',mouseEvent:'click',speed:600,timeout:5000}
;
	var b=a.extend(c,b),d=a(this),e=d.find('ul'),f=e.find('li').first(),g=a('#'+b.btnBox).children(),h=e.find('img'),i=h.length,j=h.first().outerWidth(),k=h.first().outerHeight(),l=null,m=0,n=0,o=true;
	var p={
	init:function(){
	this.move();
	this.setCss();
	l=setInterval(p.tabChange,b.timeout);
	p.addEvent(b.mouseEvent);
	this.pause()}
,setCss:function(){
	switch(b.direction){
	case'left':e.css('width',j*i+'px');
	break;
	case'top':e.css('height',i*k+'px');
	break}
}
,move:function(){
	e.stop(true);
	g.removeClass(b.btnCurClassName).eq(n).addClass(b.btnCurClassName);
	if(b.direction=='left'){
	e.animate({
	left:-j*m+'px'}
,b.speed,function(){
	if(!o){
	f.css({
	position:'static',left:0}
);
	e.css('left',0);
	m=0;
	o=true}
}
)}
else{
	e.animate({
	top:-k*m+'px'}
,b.speed,function(){
	if(!o){
	f.css({
	position:'static',top:0}
);
	e.css('top',0);
	m=0;
	o=true}
}
)}
}
,tabChange:function(){
	m++;
	n++;
	if(m==i){
	n=0;
	(b.direction=='left')?f.css({
	position:'relative',left:i*j}
):f.css({
	position:'relative',top:i*k}
);
	o=false}
;
	p.move()}
,addEvent:function(q){
	switch(q){
	case'click':g.click(function(){
	if(m==a(this).index()){
	return}
;
	m=n=a(this).index();
	clearInterval(l);
	p.move();
	l=setInterval(p.tabChange,b.timeout)}
);
	break;
	case'hover':g.hover(function(){
	m=n=a(this).index();
	clearInterval(l);
	p.move()}
,function(){
	l=setInterval(p.tabChange,b.timeout)}
);
	break}
}
,pause:function(){
	e.hover(function(){
	clearInterval(l)}
,function(){
	l=setInterval(p.tabChange,b.timeout)}
)}
}
;
	p.init()}
}
)(jQuery);

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