jquery图片上下翻滚、图片左右翻滚、图片淡隐淡现3种图片滚动特效

本文链接：https://blog.csdn.net/xtqueen/article/details/17349943
<!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>
</head>

<body>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif;}
h3{font-size:16px;text-align:center;margin:20px 0;color:#ff6600;}
/* slidebox */
.slidebox{width:620px;height:340px;overflow:hidden;position:relative;border:solid 1px #ddd;margin:20px auto;}
.slidepic{position:absolute;}/* 必要元素 */
.slidepic li{height:340px;overflow:hidden;}
.slidebtn{position:absolute;bottom:10px;right:10px;float:right;}
.slidebtn li{background:#fff;border:1px solid #D00000;cursor:pointer;float:left;font-family:arial;height:18px;line-height:18px;width:18px;margin:4px;text-align:center;color:#D00000;}
.slidebtn li.current{background:#FF0000;border:1px solid #D00000;height:24px;line-height:24px;width:24px;margin:0 2px;color:#fff;font-weight:800;}
/* slidepic-01 */
.slidebox-01{width:620px;height:340px;overflow:hidden;position:relative;border:solid 1px #ddd;margin:20px auto;}
.slidepic-01{position:absolute;width:9999em;}/* 必要元素 */
.slidepic-01 li{height:340px;overflow:hidden;float:left;}
.slidebtn-01{position:absolute;bottom:10px;right:10px;float:right;}
.slidebtn-01 li{background:#fff;border:1px solid #D00000;cursor:pointer;float:left;font-family:arial;height:18px;line-height:18px;width:18px;margin:4px;text-align:center;color:#D00000;}
.slidebtn-01 li.current{background:#FF0000;border:1px solid #D00000;height:24px;line-height:24px;width:24px;margin:0 2px;color:#fff;font-weight:800;}
/* slides */
.slides{position:relative;width:620px;height:340px;overflow:hidden;margin:0 auto;border:solid 1px #ddd;}
.slide-pic{overflow:hidden;width:620px;}
.slide-pic li{display:none;}/* 必要元素 */
.slide-pic li.current{display:block;}/* 必要元素 */
.slide-li{left:0px;bottom:1px;position:absolute;}/* 必要元素 */
.slide-li li{float:left;width:154px;line-height:30px;margin-right:1px;height:30px;text-align:center;}
.slide-li a{display:block;font-size:14px;color:#fff;height:30px;text-decoration:none;}
.slide-li li.current a{color:#333;text-decoration:none;}
.op{filter:alpha(opacity=60);opacity:0.6;}
.op li{background:#666;}
.op li.current{background:#fff;}
</style>
<h3>jquery图片滚动特效banner图片制作上下翻滚网页特效</h3>
<div class="slidebox">
	<ul class="slidepic">
		<li><a href="http://www.17sucai.com/"><img width="620" height="340" alt="jquery评论星星打分特效、鼠标滑过星星显示评论信息" src="images/1.jpg" /></a></li>
		<li><a href="http://www.17sucai.com/"><img width="620" height="340" alt="jquery 图片切换滚动特效带分页索引按钮控制左右图片切换滚动" src="images/2.jpg" /></a></li>
		<li><a href="http://www.17sucai.com/"><img width="620" height="340" alt="基于jquery 选项卡插件jquery tab选项卡支持垂直选项卡滚动、水平选项卡滚动、自动选项卡切换等。" src="images/3.jpg" /></a></li>
		<li><a href="http://www.17sucai.com/"><img width="620" height="340" alt="jquery 幻灯片切换应用一个HTML5的幻灯片" src="images/4.jpg" /></a></li>
	</ul>
	<div class="slidebtn">
		<ul>
			<li class="current">1</li>
			<li>2</li>
			<li>3</li>		
			<li>4</li>				
		</ul>
	</div>
</div><!--slidebox end-->

<h3>jquery图片滚动特效banner图片制作左右翻滚网页特效</h3>
<div class="slidebox-01">
	<ul class="slidepic-01">
		<li><a href="http://www.17sucai.com/"><img width="620" height="340" alt="jquery评论星星打分特效、鼠标滑过星星显示评论信息" src="images/1.jpg" /></a></li>
		<li><a href="http://www.17sucai.com/"><img width="620" height="340" alt="jquery 图片切换滚动特效带分页索引按钮控制左右图片切换滚动" src="images/2.jpg" /></a></li>
		<li><a href="http://www.17sucai.com/"><img width="620" height="340" alt="基于jquery 选项卡插件jquery tab选项卡支持垂直选项卡滚动、水平选项卡滚动、自动选项卡切换等。" src="images/3.jpg" /></a></li>
		<li><a href="http://www.17sucai.com/"><img width="620" height="340" alt="jquery 幻灯片切换应用一个HTML5的幻灯片" src="images/4.jpg" /></a></li>
	</ul>
	<div class="slidebtn-01">
		<ul>
			<li class="current">1</li>
			<li>2</li>
			<li>3</li>		
			<li>4</li>				
		</ul>
	</div>
</div><!--slidebox-01 end-->

<h3>jquery图片切换特效banner图片制作淡隐淡现网页特效</h3>
<div class="slides">
	<ul class="slide-pic">
		<li class="current"><a href="http://www.17sucai.com/"><img width="620" height="340" alt="jquery评论星星打分特效、鼠标滑过星星显示评论信息" src="images/1.jpg" /></a></li>
		<li><a href="http://www.17sucai.com/"><img width="620" height="340" alt="jquery 图片切换滚动特效带分页索引按钮控制左右图片切换滚动" src="images/2.jpg" /></a></li>
		<li><a href="http://www.17sucai.com/"><img width="620" height="340" alt="基于jquery 选项卡插件jquery tab选项卡支持垂直选项卡滚动、水平选项卡滚动、自动选项卡切换等。" src="images/3.jpg" /></a></li>
		<li><a href="http://www.17sucai.com/"><img width="620" height="340" alt="jquery 幻灯片切换应用一个HTML5的幻灯片" src="images/4.jpg" /></a></li>
	</ul>
	<ul class="slide-li op">
		<li class="current"></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<ul class="slide-li slide-txt">
		<li class="current"><a href="http://www.17sucai.com/">jquery 特效</a></li>
		<li><a href="http://www.17sucai.com/">javascript 特效</a></li>
		<li><a href="http://www.17sucai.com/">CSS 特效</a></li>
		<li><a href="http://www.17sucai.com/">HTML5 特效</a></li>
	</ul>
</div><!--slides end-->

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){
	
	// 图片上下翻滚
	var len = $('.slidebtn>ul>li').length;
	var index = 0;
	var autoplay;
	$('.slidebtn li').mouseover(function(){
		index = $('.slidebtn li').index(this);
		showImg(index);
	}).eq(0).mouseover();
	
	$('.slidebox').hover(function(){
		clearInterval(autoplay);
	},function(){
		autoplay = setInterval(function(){
			showImg(index)
			index++;
			if(index==len){
				index=0;
			}
		},3000);
	}).trigger('mouseleave');

	function showImg(index){
		var picheight = $('.slidebox').height();
		$('.slidepic').stop(true,false).animate({top:-picheight*index},600)
		$('.slidebtn li').removeClass('current').eq(index).addClass('current');
	};
	
	
	// 图片左右翻滚
	var size = $('.slidebtn-01>ul>li').length;
	var frist = 0;
	var datetime;
	$('.slidebtn-01 li').mouseover(function(){
		frist = $('.slidebtn-01 li').index(this);
		showpic(frist);
	}).eq(0).mouseover();
	
	$('.slidebox-01').hover(function(){
		clearInterval(datetime);
	},function(){
		datetime = setInterval(function(){
			showpic(frist)
			frist++;
			if(frist==size){
				frist=0;
			}
		},3000);
	}).trigger('mouseleave');

	function showpic(frist){
		var imgheight = $('.slidebox-01').width();
		$('.slidepic-01').stop(true,false).animate({left:-imgheight*frist},600)
		$('.slidebtn-01 li').removeClass('current').eq(frist).addClass('current');
	};
	
});

//图片淡隐淡现
var defaultOpts ={ interval:5000, fadeInTime:300, fadeOutTime:200 };

	var _titles = $("ul.slide-txt li");
	var _titles_bg = $("ul.op li");
	var _bodies = $("ul.slide-pic li");
	var _count = _titles.length;
	var _current = 0;
	var _intervalID = null;
	
	var stop = function(){
		window.clearInterval(_intervalID);
	};
	
	var slide = function(opts){
		if (opts){
			_current = opts.current || 0;
		} else{
			_current = (_current >= (_count - 1)) ? 0 :(++_current);
		};
		_bodies.filter(":visible").fadeOut(defaultOpts.fadeOutTime, function(){
			_bodies.eq(_current).fadeIn(defaultOpts.fadeInTime);
			_bodies.removeClass("current").eq(_current).addClass("current");
		});
		_titles.removeClass("current").eq(_current).addClass("current");
		_titles_bg.removeClass("current").eq(_current).addClass("current");
	}; 
	
	var go = function(){
		stop();
		_intervalID = window.setInterval(function(){
			slide();
		}, defaultOpts.interval);
	}; 
	
	var itemMouseOver = function(target, items){
		stop();
		var i = $.inArray(target, items);
		slide({ current:i });
	};
	
	_titles.hover(function(){
		if($(this).attr('class')!='current'){
			itemMouseOver(this, _titles);
		}else{
			stop();
		}
	}, go);

	_bodies.hover(stop, go);

	go();
	
</script>

</body>
</html>