`

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

阅读更多
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>
  • 大小: 29.5 KB
  • 大小: 119.6 KB
分享到:
评论
2 楼 xjwolaile 2013-07-02  
因为这个不是代码库 这个是我学的东西 代码库不是这个 这个是每天的学习 两个是分开的我给你留了言呀 你没看见吗

在那个代码库里是

效果名称

功能

效果

效果图

最后是代码

1 楼 萧远山 2013-07-02  
为什么所有的代码库都没有按格式来写?

1、效果及功能说明

2、实现原理

3、代码

相关推荐

    jQuery仿麦包包商城图片滑动伸缩图片

    本教程将详细讲解如何使用jQuery来实现“仿麦包包商城图片滑动伸缩图片广告代码”,这是一个常用于电商网站的动态效果,能够提升用户体验并吸引用户注意力。 首先,我们需要理解这个效果的基本概念。它通常包括以下...

    jquery图片滑动伸缩.zip

    《jQuery图片滑动伸缩详解》 在网页设计与开发中,动态的图片展示效果能够极大地提升用户体验,其中,jQuery图片滑动伸缩特效是一种常用且吸引人的视觉表现手法。这种特效通过JavaScript库jQuery实现,使得图片能够...

    jQuery实现首页顶部可伸缩广告特效代码

    例如,在本文中,为了实现广告图片的伸缩效果,需要创建两个DIV元素,其中一个是初始显示的广告,另一个是通过setTimeout()控制在适当时间后显示的广告。通过设置DIV的DISPLAY属性为none和block,可以控制广告的显示...

    textern-0.8-1.el8.x64-86.rpm.tar.gz

    1、文件说明: Centos8操作系统textern-0.8-1.el8.rpm以及相关依赖,全打包为一个tar.gz压缩包 2、安装指令: #Step1、解压 tar -zxvf textern-0.8-1.el8.tar.gz #Step2、进入解压后的目录,执行安装 sudo rpm -ivh *.rpm

    基于STM32的循迹避障小车资料源码(高分项目)

    基于STM32的循迹避障小车资料源码(高分项目),个人大四的毕业设计、经导师指导并认可通过的高分设计项目,评审分99分,代码完整确保可以运行,小白也可以亲自搞定,主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者,也可作为课程设计、期末大作业。 基于STM32的循迹避障小车资料源码(高分项目)基于STM32的循迹避障小车资料源码(高分项目)基于STM32的循迹避障小车资料源码(高分项目)基于STM32的循迹避障小车资料源码(高分项目)基于STM32的循迹避障小车资料源码(高分项目)基于STM32的循迹避障小车资料源码(高分项目)基于STM32的循迹避障小车资料源码(高分项目)基于STM32的循迹避障小车资料源码(高分项目)基于STM32的循迹避障小车资料源码(高分项目)基于STM32的循迹避障小车资料源码(高分项目)基于STM32的循迹避障小车资料源码(高分项目)基于STM32的循迹避障小车资料源码(高分项目)基于STM32的循迹避障小车资料源码(高分项目)基于STM32的循迹避障小车资料源码(高分项目)基于STM32的循迹避障小车资料源码(高分项目)基于STM32的循迹避障小车资料源码(高分项目)基于STM32的循迹避障小车资料源码(高分项目)基于STM32的循迹避障小车资料源码(高分项目)基于STM32的循迹避障小车资料源码(高分项目)基于STM32的循迹避障小车资料源码(高分项目)基于STM32的循迹避障小车资料源码(高分项目)基于STM32的循迹避障小车资料源码(高分项目)基于STM32的循迹避障小车资料源码(高分项目)基于STM32的循迹避障小车资料源码(高分项目)基于STM32的循迹避障小车资料源码(高分项目)基于STM32的循迹避障小车资料源码(高分项目)基于STM32的循迹避障小车资料源码(高分项目)基于STM32的循迹避障小车资料源码(

    金属板卷自动捆扎机器step_三维3D设计图纸_包括零件图_机械3D图可修改打包下载_三维3D设计图纸_包括零件图_机械3D图可修改打包下载.zip

    金属板卷自动捆扎机器step_三维3D设计图纸_包括零件图_机械3D图可修改打包下载_三维3D设计图纸_包括零件图_机械3D图可修改打包下载.zip

    【SSM框架详解】全网最全的SSM详解

    内容概要:本文详细介绍了SSM框架(Spring、SpringMVC、MyBatis)的相关知识,涵盖Maven项目管理工具、前端开发技术、HTTP协议及Tomcat服务器等内容。文章首先讲解了SSM框架的组成,包括Spring的IOC、DI、AOP等功能,SpringMVC的请求处理流程以及MyBatis的数据操作。接着介绍了Maven作为项目管理工具的作用,如依赖管理和项目构建,并详细描述了Maven的配置文件pom.xml的使用方法。此外,还探讨了HTTP协议的特点、请求响应格式,以及Web服务器Tomcat的基本概念和工作原理。最后,文章对前端开发技术进行了概述,包括HTML、CSS、JavaScript等基础知识,并简要介绍了Ajax技术。 适合人群:具备一定编程基础,特别是Java开发经验的研发人员,尤其是那些正在学习或使用SSM框架进行Web开发的工程师。 使用场景及目标:①理解SSM框架的工作原理及其各组成部分的功能;②掌握Maven的使用,包括项目创建、依赖管理、生命周期等;③熟悉HTTP协议的请求响应机制,能够处理常见的HTTP请求和响应;④掌握前端开发技术,如HTML、CSS、JavaScript等,能够进行简单的前端页面开发;⑤了解Tomcat服务器的工作原理及其配置方法。 阅读建议:本文内容丰富,涵盖了从后端到前端的多个方面,建议读者在学习过程中结合实际项目进行实践,尤其是在Maven项目管理和SSM框架的具体应用上,多动手操作,加深理解。同时,对于HTTP协议和前端开发技术,可以通过实际的网络请求和页面开发来巩固所学知识。

    JAVA源码 + SpringBoot+vue+mysql 漫画天堂网 + 数据库 + 文档

    本系统以用户与管理员两类人,作为目标用户,其中用户主要功能包含用户的注册与登录,查看漫画信息进行订阅等,对账号相关信息的修改;管理员主要功能包括了对用户信息、漫画信息、订阅信息、更新通知、在线留言、社区互动等管理;管理员可以实现最高权限级别的全系统管理。 内含文档,可轻松上手。

    工业缺陷检测领域的NEU-DET数据集及其深度学习应用

    内容概要:本文详细介绍了NEU-DET数据集,这是一个包含六种常见表面缺陷(如涂层剥落、油污、锈蚀等)的1800张灰度图像的数据集。数据集分为训练集和测试集,分别为1620张和180张。文中探讨了数据集的特点,如灰度图像的优势、标注信息的重要性以及合理的数据集划分。此外,文章展示了如何使用Python读取标注信息,并提供了使用Keras和PyTorch搭建卷积神经网络(CNN)和Faster R-CNN模型的具体代码示例,用于缺陷分类和目标检测任务。通过数据增强技术和模型优化,可以在工业缺陷检测中取得较好的效果。 适合人群:从事工业缺陷检测、计算机视觉、机器学习等相关领域的研究人员和技术人员。 使用场景及目标:适用于希望利用深度学习技术进行表面缺陷检测的研究人员。具体应用场景包括但不限于产品质量检测、自动化生产线监控等。目标是帮助用户理解和掌握如何使用NEU-DET数据集进行模型训练和评估,提高缺陷检测的准确性。 其他说明:文中提到的数据集和代码示例可以帮助初学者快速入门,同时也为高级用户提供了一些优化建议,如使用预训练模型、调整损失函数权重等。

    基于Qt/CPP的多平台二维图形编辑器:功能实现与技术细节

    内容概要:本文详细介绍了使用Qt/C++开发的一款多平台二维图形编辑器。该编辑器旨在提供简单直观的图形可视化编辑体验,主要功能包括创建和参数化图形、支持多种图类型、多样化的边与节点端口、自定义属性、动态维护交换列表、搜索功能、自动布局与导出、以及多种文件格式的支持。作者分享了项目的实现路径和技术细节,如通过QGraphicsView框架实现图形绘制、利用GraphViz引擎进行自动布局、采用QProcess处理跨平台进程通信、以及性能优化技巧等。 适合人群:对图形编辑器开发感兴趣的研发人员,尤其是熟悉或想要深入了解Qt/C++框架的开发者。 使用场景及目标:适用于需要开发或改进图形编辑工具的技术团队,帮助他们理解和掌握Qt/C++在图形编辑领域的应用,提高开发效率和产品质量。 其他说明:文中不仅展示了具体的代码片段,还分享了许多实用的经验和技巧,如避免性能瓶颈的方法、处理跨平台兼容性的注意事项等。这对于希望深入研究图形编辑技术和Qt/C++框架的开发者来说是非常宝贵的参考资料。

    A股600000浦发银行秒级训练数据集

    股票代码:A股600000浦发银行 2023年-2024年2年秒级数据,可用作训练和回测 数据内容: 时间戳(间隔10-12秒,精确到秒) 买/卖成交量 成交价 开/收盘价 最高/低价 另有类似的大盘秒级数据

    JAVA源码 + SpringBoot+vue+mysql 高校实验室预约系统 + 数据库 + 文档

    内含文档,可轻松上手。

    电路仿真:频率响应分析.zip

    电子仿真教程,从基础到精通,每个压缩包15篇教程,每篇教程5000字以上。

    冲击试验机sw22_三维3D设计图纸_包括零件图_机械3D图可修改打包下载_三维3D设计图纸_包括零件图_机械3D图可修改打包下载.zip

    冲击试验机sw22_三维3D设计图纸_包括零件图_机械3D图可修改打包下载_三维3D设计图纸_包括零件图_机械3D图可修改打包下载.zip

    各院校专业录取分数线.zip

    各院校专业录取分数线.zip

    电力电子领域逆变器VSG阻抗建模与扫频法验证的技术详解及应用

    内容概要:本文深入探讨了逆变器虚拟同步控制(VSG)技术中的阻抗建模及其验证方法。首先介绍了VSG的基本概念和技术背景,强调了正负序阻抗对系统稳定性和电能质量的影响。随后详细讲解了阻抗建模的理论基础,包括正负序阻抗的计算方法和虚拟同步发电机的序阻抗建模。接着阐述了阻抗扫描的具体步骤,包括扫描范围、点数设置以及通过扫频法在不同频率下注入小信号并测量响应的方法。文中提供了详细的Python和MATLAB代码示例,帮助读者理解和实现阻抗建模和扫描验证。最后,通过对比实测阻抗曲线和理论模型,讨论了常见问题及解决方法。 适合人群:从事电力电子、电力系统稳定性和控制的研究人员和工程师,尤其是对VSG技术和阻抗建模感兴趣的读者。 使用场景及目标:适用于需要评估逆变器在不同工况下的电气特性,确保电力系统稳定性和优化电能质量的研究和工程实践中。主要目标是掌握VSG阻抗建模和扫频法验证的理论与实践技能。 其他说明:本文不仅提供理论知识,还附带了详细的代码实现和注释,便于读者快速上手并在实际项目中应用。此外,文中提到的一些实用技巧和注意事项也有助于提高实验效率和准确性。

    c语言打字母游戏源码.zip

    c语言打字母游戏源码.zip

    基于SOGI+DQ结构的PLL锁相环在STM32G431上的实现及其MATLAB仿真

    内容概要:本文详细介绍了基于SOGI(二阶广义积分器)和DQ变换的数字锁相环(PLL)在STM32G431芯片上的实现过程,并通过MATLAB进行了仿真验证。主要内容涵盖SOGI初始化、ADC采样配置、中断服务程序设计、DQ变换以及PLL频率跟踪等关键技术环节。文中特别强调了定点运算的应用,以提高运算效率和稳定性。同时,通过MATLAB仿真展示了系统的频率跟踪性能,在40Hz-65Hz范围内能够稳定跟踪电网频率变化,误差控制在±0.2Hz以内。此外,文章还讨论了移植性和硬件适配问题,提供了详细的代码片段和调试经验。 适合人群:从事电力电子、嵌入式系统开发的技术人员,尤其是对锁相环(PLL)和SOGI+DQ结构感兴趣的工程师。 使用场景及目标:适用于需要精确频率跟踪和相位同步的应用场合,如光伏逆变器并网、电机控制系统等。目标是帮助开发者理解和实现高效的PLL算法,确保系统在复杂电网环境下的稳定运行。 其他说明:文章不仅提供了理论分析和技术实现,还包括了大量的实践经验分享,如定点运算优化、硬件适配技巧等。对于希望深入理解PLL工作原理和实际应用的读者来说,是一份非常有价值的参考资料。

    【科学计算软件】MATLAB下载安装教程:涵盖Windows与macOS系统详细步骤及验证方法

    内容概要:本文档详细介绍了 MATLAB 在 Windows 和 macOS 系统上的下载与安装步骤。首先简述了 MATLAB 的应用领域,包括科学计算、数据分析和工程仿真。接着分别针对 Windows 和 macOS 用户提供了详细的安装指南,涵盖从访问官网、下载安装程序、选择许可证类型、指定安装路径、选择工具箱到最后的激活步骤。最后,通过输入特定命令验证 MATLAB 是否安装成功,确保用户能够顺利开始使用 MATLAB 进行相关工作。; 适合人群:对科学计算、数据分析和工程仿真有需求的科研人员、工程师以及学生等。; 使用场景及目标:①科研人员和工程师在工作中进行复杂的数据处理和建模;②学生学习数学、物理等相关课程时进行实验和模拟。; 阅读建议:本教程操作性强,建议读者按照步骤逐一操作,确保每一步都正确无误。遇到问题可随时查阅官方帮助文档或社区论坛,以便顺利完成 MATLAB 的安装和激活。

Global site tag (gtag.js) - Google Analytics