- 浏览: 15958 次
已经上班一个月零十一天了,也毕业两个月零十天了,突然想起来自己还有博客没写,在工作中遇到了很多问题,也不是不能解决,但是接触了很多新的功能和想法,我觉得我应该把一些东西记录下来,不止是代码,也许是成长的痕迹吧。加油!
图片轮播的html代码
图片轮播的js
图片轮播的CSS样式,根据需要调整
加油
图片轮播的html代码
<div id="banner"> <ul> <li class="on">1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <div id="banner_list"> <a target="_blank"><img src="images/banner1.png" title="" alt=""/> <span id="sc-download"><img src="images/download.png"><p>下载集趣APP</p></span> <span id="sc-downloadwhite"><img src="images/downloadwhite.png"><p>下载集趣APP</p></span></a> <a target="_blank"><img src="images/banner2.png" title="" alt=""/></a> <a target="_blank"><img src="images/banner3.png" title="" alt=""/></a> <a target="_blank"><img src="images/banner4.png" title="" alt=""/></a> </div> </div>
图片轮播的js
var t = n = 0, count; $(document).ready(function () { count = $("#banner_list a").length; $("#banner_list a:not(:first-child)").hide(); $("#banner_info").html($("#banner_list a:first-child").find("img").attr('alt')); $("#banner_info").click(function () { window.open($("#abanner_list a:first-child").attr('href'), "_blank") }); $("#banner li").click(function () { var i = $(this).text() - 1;//获取Li元素内的值,即1,2,3,4 n = i; if (i >= count) return; $("#banner_info").html($("#banner_list a").eq(i).find("img").attr('alt')); $("#banner_info").unbind().click(function () { window.open($("#banner_list a").eq(i).attr('href'), "_blank") }); $("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000); document.getElementById("banner").style.background = ""; $(this).toggleClass("on"); $(this).siblings().removeAttr("class"); }); t = setInterval("showAuto()", 2000); $("#banner").hover(function () { clearInterval(t) }, function () { t = setInterval("showAuto()", 2000); }); }) function showAuto() { n = n >= (count - 1) ? 0 : ++n; $("#banner li").eq(n).trigger('click'); //浏览页图片轮播结束 }
图片轮播的CSS样式,根据需要调整
/*轮播*/ #banner { position: relative; width: 100%; height: 522px; overflow: hidden; margin: 0; cursor: pointer; } #banner_list img { border: 0px; width: 100%; height: 522px; } #banner_bg { position: absolute; bottom: 0; background-color: #000; height: 30px; filter: Alpha(Opacity=30); opacity: 0.3; z-index: 1000; cursor: pointer; width: 478px; } #banner_info { position: absolute; bottom: 0; left: 5px; height: 22px; color: #fff; z-index: 1001; cursor: pointer } #banner_text { position: absolute; width: 120px; z-index: 1002; right: 3px; bottom: 3px; } #banner ul { position: absolute; list-style-type: none; filter: Alpha(Opacity=80); opacity: 0.8; z-index: 1; margin: 0; left: 50%; width: 90px; margin-left: -45px; padding: 0; bottom: 3px; top: 500px; } #banner ul li { width: 15px; height: 15px; float: left; margin-left: 5px; font-size: 0px; display: block; color: #FFF; background: #aaaaaa; cursor: pointer; border-radius: 50%; } #banner ul li.on { background: white; } #banner_list a { position: absolute; width: 100%; } #sc-download { width: 195px; height: 52px; position: absolute; top: 302px; left: 25%; z-index: 11; border-radius: 9px; background-color: #FAFCFE; } #sc-download img { width: 20px; height: 20px; position: relative; float: left; margin-left: 28px; top: 50%; margin-top: -10px; } #sc-download p { width: 125px; height: 52px; position: relative; margin-left: 58px; font-size: 20px; color: #333333; line-height: 52px; font-weight: 500; } #sc-downloadwhite { display: none; width: 195px; height: 52px; position: absolute; top: 302px; left: 25%; z-index: 11; border-radius: 9px; background-color: #52CFFE; } #sc-downloadwhite img { width: 20px; height: 20px; position: relative; float: left; margin-left: 28px; top: 50%; margin-top: -10px; } #sc-downloadwhite p { width: 125px; height: 52px; position: relative; margin-left: 58px; font-size: 20px; color: #ffffff; line-height: 52px; font-weight: 500; }
加油
发表评论
-
audio 音频格式测试数据
2017-09-20 16:15 485压缩包内含 wav格式语音,aac 格式语音和H.264 格式 ... -
web 端录音
2017-09-12 17:22 431<!DOCTYPE html> <ht ... -
js 获取浏览器类型和版本
2017-09-12 16:03 539function getExplore(){ var ... -
本地存储——cookie
2017-02-09 11:44 349cookie是客户端用来存储数据的一种选项,既可以设 ... -
本地存储的方式对比
2017-02-08 15:51 860本地存储方式有很多种,cookie、loca ... -
sublime text3 中文乱码
2016-11-29 17:19 355换了一个编译器,sublime text3, 但是存在中文乱码 ... -
CSS背景图与html插入img的区别
2016-11-01 19:03 3531、css中的图片以背景图形式存在,写在 ... -
HTTP 的三次握手和四次挥手
2016-10-12 16:04 361网络由下往上分为7层:物理层、数据链路层、网 ... -
SpriteSpin 一款图像360度旋转的jquery插件
2016-10-11 15:00 619在 web 页面上使用 jQuery 图像 36 ... -
Js冒泡排序
2016-09-29 17:02 304冒泡排序的原理是这样的,比方说有五个数字5432 ... -
圆形进度条(假的无限循环)
2016-08-30 11:21 902<div id="outer"& ... -
转载实用假进度条
2016-08-29 15:16 1443这是一款超酷CSS3 loading加载动画特效。该loadi ... -
hmtl 中div宽度不定时如何居中
2016-08-24 17:00 327传统的div居中方式margin: 0 auto;在div ... -
幻灯片式的图片点击切换
2016-08-16 17:09 309这是一款非常酷的纯css3响应式背景视觉差幻灯片插件。插件中使 ... -
JS性能优化的问题
2016-06-26 21:51 375一些关于JS性能的一些优化的小技巧: 1.关于JS的循环,循 ... -
前端中的MVC
2016-06-26 13:06 316标签: MVC是一种设计 ... -
手机页面自适应问题的解决方法(转)
2016-06-25 21:50 329其实主要就是改掉HTML页面声明: 在网页中加入以下代码, ... -
常见浏览器兼容问题(转载)
2016-06-25 21:30 267浏览器兼容问题一:不同浏览器的标签默认的margin和padd ... -
个人总结(二)
2016-06-20 15:04 313主流浏览器之间的差异: 谷歌浏览器Chrome支持自定义计划处 ... -
个人总结
2016-06-20 14:52 290H4和H5 的区别: h4的内容标签级别相同,无法区分各部分内 ...
相关推荐
2020新年第一篇博客开始技术人生!2020新年第一篇博客开始技术人生!2020新年第一篇博客开始技术人生!2020新年第一篇博客开始技术人生!
这是一篇不忘初心的博客。第一次写博客的我还是不那么从容。
NLP相关资源,第一篇博客相关资源
这是我在GitHub上写的博客,这篇博客也只是一些笔记,也可能对大家有作用,想把它分享给更多人,希望大家喜欢,不喜勿喷,嘻嘻
第一篇 博客用于记录自我的学习笔记 学习使用markdown 这是标题用#号 这是第一个段落内容 这是第二个段落内容 >这是一段引用段落,将会被高亮显示 >> >>>这也是一段引用段落,也会被高亮显示 >>>>好多层 段落的效果...
今天是霍金的六周年忌日,是我第一篇博客的发布日。 作为初学者对于这些还是一知半解好多东西都无法掌握,只能够通过这种手段分享一些基础性的知识,笔记。虽然这些东西不是太好但我会不断学习掌握更牛逼的技术,...
这个资源中的内容,是我自己写的CSDN博客的前50篇的MarkDown源码,是为了方便需要转载的人对我的博客进行转载而创建的。 因为许多人转载后的博客都是直接暴力的复制粘贴,像LaTeX公式就失去了原来博客的效果(况且我...
资源共享,数据通信。
腾讯课堂(Fractal.ke.qq.com)上的视频教程——老孙的游戏课之第1篇 Unity5.x入门 第1讲 游戏是什么——配套课件
《目标检测蓝皮书》第1篇 机器学习基础_目标检测蓝皮书pdf-CSDN博客.html
一个操作系统的实现:第四篇——让操作系统走进保护模式_goodcrony的博客-CSDN博客.html
项目简01-博客第一节 项目篇02-博客第二节 项目简03- web编程扫盲之二 项目简04-数据库操作第一节 项目篇05-数据库操作第二节 项目简06-速攻之数据提交 项目篇07-django速攻之衔接 项目篇08-t第一节扫盲篇 项目篇09-...
项目篇1-django博客第一节 项目篇2-django博客第二节 项目篇3-django web编程扫盲之二 项目篇4-django数据库操作第一节 项目篇5-django数据库操作第二节 项目篇6-django速攻之数据提交,显示 项目篇7-django速攻之...
根据会议讨论改进已实现功能、实现学生申请课程和学生课程表的显示陈阳站立式会议主持、建议和总结完成并发布总结博客、《构建之法》第六章、学习UML图吴政楠对已完成功
第一章 绪论 1 第二章 相关技术介绍 2 2.1 B/S 简介 2 2.2 JAVA 简介 2 2.3 JSP 简介 3 2.4 springMVC简介 3 第三章 可行性分析 4 3.1 技术可行性分析 4 3.2 经济可行性分析 4 3.3 操作可行性 4 3.4 法律可行性 4 第...
一、大数据平台的搭建 3 1. 架构设计 6 2 服务器集群的搭建 7 (1)安装Linux操作系统、 14 (2)安装大数据处理框架Hadoop 20 3 工具软件安装 21 (1)安装关系型数据库MySQL 26 (2)安装列族数据库HBase 27 (3)...
全功能智能车之在写该博客之前已经完成的功能总结(第二篇)1
博主这篇博客《【Android Studio学习】第一篇、制作一个拥有登录和注册功能的简易APP》的资源。
048. 第一社区博客 049. 中国国家地理网 050. 环球博客 051. 体坛博客 052. 中国博客网 053. 豆瓣 054. 一大把空间 055. 新华博客 056. 创业邦博客 057. 半岛博客 058. 财新网博客 059. 中国证券网博客 060. CNTV...
腾讯课堂(Fractal.ke.qq.com)——老孙的游戏课之第1篇 Unity5.x入门 第4讲 未来的游戏是什么样——配套课件