jQuery仿麦包包商城图片滑动伸缩图片广告代码-20130701

程序员文章站 2022-06-09 12:45:07

...

1、效果及功能说明
仿麦包包商城网站首页全屏图片上下滑动伸缩图片广告代码，设置固定时间图片滑动伸缩的图片广告代码

2、实现原理

先获得显示div的宽度高度*在将两个图片放到div里显示每次只显示一张图片隐藏时间为1秒下一张显示时间为1秒全部显示和隐藏的动画用时2.5秒内完成显示的div会跟着图片的大小来调节div的高度，所以高度是*的没有显示出来的图片是处于隐藏的一个状态

3、效果图

jQuery仿麦包包商城图片滑动伸缩图片广告代码-20130701

博客分类：学习jQuery前端技术 readyslideUp

jQuery仿麦包包商城图片滑动伸缩图片广告代码-20130701

博客分类：学习jQuery前端技术 readyslideUp

4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、所有图片的压缩包新建一个文件后将包解压放进文件夹图片的压缩包在页面的最下方可以看到并下载下载后无需修改文件夹名因为本身就已经写好了和html5内的路径相吻合

6、将创建html文件保存的时候将编码类型换成(UTF-8有签名)这样可以让部分中文正常的显示出来，将保存类型(T)换成(所有文件(*.*))，将html5和解压后的图片文件夹放在同一个文件夹内效果

7、代码[html5]

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<body>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
.advpic{width:960px;margin:0 auto;}
</style>

<div class="advpic" style="display:block;" id="js_ads_banner_top">
	<a href="http://www.17sucai.com/" target="_blank"><img alt="图片滑动广告" src="images/banner_s.jpg" width="960" height="70" /></a>
</div>

<div class="advpic" style="display:none;" id="js_ads_banner_top_slide">
	<a href="http://www.17sucai.com/" target="_blank"><img alt="图片滑动广告" src="images/banner_b.jpg" width="960" height="400" /></a> 
</div>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	//ready函数仅能用于当前文档，因此无需选择器
	if($("#js_ads_banner_top_slide").length){
	//调用第二个id的长度
		var $slidebannertop = $("#js_ads_banner_top_slide"),$bannertop = $("#js_ads_banner_top");
		//实现第二个图片替换掉第一个图片
		setTimeout(function(){
			$bannertop.slideUp(1000);
			//设置第一张图片通过滑动方式隐藏时间为1秒
			$slidebannertop.slideDown(1000);
			//设置第一张图片通过滑动方式显示时间为1秒
		},2500);
		//整个图片的消失或者显示用时2.5秒
		setTimeout(function(){
			$slidebannertop.slideUp(1000,function(){
			//设置第二张图片通过滑动方式隐藏时间为1秒
				$bannertop.slideDown(1000);
				//设置第二张图片通过滑动方式显示时间为1秒
			});
		},8500);
		//整个图片的消失或者显示用时8.5秒
	}
});
</script>
</body>
</html>

images.rar (98.3 KB)
下载次数: 0

查看图片附件