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

xjwolaile

浏览: 338852 次
性别:
来自: 杭州

最近访客更多访客>>

waylon33

Cyoooa

h06910101

androidHua

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

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

博客分类：

学习
jQuery
前端技术

ready slideUp

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

2、实现原理

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

3、效果图

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

查看图片附件

分享到：

jQuery广告图片各大商城首页流行通栏广告图 ... | jQuery hover图片列表上下滚动显示图片详 ...

2013-07-02 00:02
浏览 1057
评论(2)
分类:Web前端
查看更多

2 楼 xjwolaile 2013-07-02

因为这个不是代码库这个是我学的东西代码库不是这个这个是每天的学习两个是分开的我给你留了言呀你没看见吗

在那个代码库里是

效果名称

功能

效果

效果图

最后是代码

1 楼萧远山 2013-07-02

为什么所有的代码库都没有按格式来写？

1、效果及功能说明

2、实现原理

3、代码

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

Zepto

node.js的学习-20140611

node.js的学习-20140609

git的学习-20140604

PC和移动端的页面的一些差距-20140525

Bootstrap排版基础样式和响应式图片-20140521

Bootstrap特性、设计和组件-20140519

Bootstrap流式布局-20140515

Bootstrap的宽度和分辨率的差别-20140514

Bootstrap的认识-20140513

jquery初步认识-20140123

html5的特殊标签作用-20140114

ie下的指定样式-20140106

margin-left在IE6下左浮动加倍-20140102

浮动存在的问题-20131229

在ie6下同张图片不能外面包有a标签后在画热区-20131223

ie6下导航存在的问题和-2013-12-20

按比例展示的小js-20131217

定位需要注意-20131214

flash在Safari下的BUG-20131212

最近访客更多访客>>