jquery banner焦点图片切换图片上下翻滚、图片左右翻滚、图片淡隐淡现



254 1013 338



特效描述:jquery banner焦点图 切换图片 上下翻滚 淡隐淡现,jquery banner slide焦点图片切换、图片上下翻滚、图片左右翻滚、图片淡隐淡现,适用在各大网站首页和焦点图片展示播放,基于jquery框架图片滚动特效,非常常用的banner制作与焦点图片切换滚动。

代码结构

1. 引入JS

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

2. HTML代码

<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.dijiuzhanzhang.com/"><img width="620" height="340" alt="jquery评论星星打分特效、鼠标滑过星星显示评论信息" src="images/1.jpg" /></a></li>
		<li><a href="http://www.dijiuzhanzhang.com/"><img width="620" height="340" alt="jquery 图片切换滚动特效带分页索引按钮控制左右图片切换滚动" src="images/2.jpg" /></a></li>
		<li><a href="http://www.dijiuzhanzhang.com/"><img width="620" height="340" alt="基于jquery 选项卡插件jquery tab选项卡支持垂直选项卡滚动、水平选项卡滚动、自动选项卡切换等。" src="images/3.jpg" /></a></li>
		<li><a href="http://www.dijiuzhanzhang.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.dijiuzhanzhang.com/"><img width="620" height="340" alt="jquery评论星星打分特效、鼠标滑过星星显示评论信息" src="images/1.jpg" /></a></li>
		<li><a href="http://www.dijiuzhanzhang.com/"><img width="620" height="340" alt="jquery 图片切换滚动特效带分页索引按钮控制左右图片切换滚动" src="images/2.jpg" /></a></li>
		<li><a href="http://www.dijiuzhanzhang.com/"><img width="620" height="340" alt="基于jquery 选项卡插件jquery tab选项卡支持垂直选项卡滚动、水平选项卡滚动、自动选项卡切换等。" src="images/3.jpg" /></a></li>
		<li><a href="http://www.dijiuzhanzhang.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.dijiuzhanzhang.com/"><img width="620" height="340" alt="jquery评论星星打分特效、鼠标滑过星星显示评论信息" src="images/1.jpg" /></a></li>
		<li><a href="http://www.dijiuzhanzhang.com/"><img width="620" height="340" alt="jquery 图片切换滚动特效带分页索引按钮控制左右图片切换滚动" src="images/2.jpg" /></a></li>
		<li><a href="http://www.dijiuzhanzhang.com/"><img width="620" height="340" alt="基于jquery 选项卡插件jquery tab选项卡支持垂直选项卡滚动、水平选项卡滚动、自动选项卡切换等。" src="images/3.jpg" /></a></li>
		<li><a href="http://www.dijiuzhanzhang.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.dijiuzhanzhang.com/">jquery 特效</a></li>
		<li><a href="http://www.dijiuzhanzhang.com/">javascript 特效</a></li>
		<li><a href="http://www.dijiuzhanzhang.com/">CSS 特效</a></li>
		<li><a href="http://www.dijiuzhanzhang.com/">HTML5 特效</a></li>
	</ul>
</div><!--slides end-->
<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>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动流动 滚动切换 滑动选项卡切换 flash焦点图 自动滚动图片轮播 选项卡切换 滑动手风琴 渐隐切换 淡出淡入淡进 焦点图幻灯片 图片淡出淡进 图片滚动 图片切换 图片轮播 选项卡自动切换

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到