首先上效果图
效果图不上也可以,大家直接看我博客就看到效果了,每三秒钟轮播一次。自定义博客园很简单。因为博客园支持我们加载js,所以我们怎么玩都可以。
申请开通js权限
首先第一步是申请开通js权限,在这里我不得不说园子的管理效率也太高了。本来以为至少要等一天才能开通权限,结果我24分发邮件,27分就回复我权限已经开通了。
引入Bootstrap css和js 文件
要使用Bootstrap我们首先要引入Bootstrap的js和css文件,为了提高效率,也为了给园子服务器减少压力(☺☺☺☺估计也没几个浏览量),我们使用CDN引入
页首引入<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">。
页脚引入<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script><script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
这儿注意博客园也引入了jquery ,按理说我们不用引入,但是因为,园子的jquery版本太低,使用Bootstrap会报错。所以我们再次引入jquery。这儿注意jquery多次引用可能在某些特殊情况下会带来一些特殊问题。如果jquery版本里处理过可能能避免这种情况。一般项目中我们都会使用最新的jquery,所以这儿关于多次引用jquery的问题不在这儿讨论。
我的博客园使用的模板是
1 2 3 4 5 6 | //这一句代码隐藏了我博客模板里面的一个背景图片 $( ".day" ).css( "background-image" , "url('')" ); //将模板的右侧div设置距离顶端250px; $( "#leftcontent" ).css( "top" , "250px" ); //设置轮播时间为3秒 $( '.carousel' ).carousel({ interval: 3000}); |
引入html代码
Bootstrap的使用太简单了,直接复制拿过来用就可以了。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | < div style="height:250px;overflow:hidden" id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> < ol class="carousel-indicators"> < li data-target="#carousel-example-generic" data-slide-to="0" class="active"></ li > < li data-target="#carousel-example-generic" data-slide-to="1"></ li > < li data-target="#carousel-example-generic" data-slide-to="2"></ li > </ ol > <!-- Wrapper for slides --> < div class="carousel-inner" role="listbox"> < div class="item active"> < img src="//images0.cnblogs.com/blog2015/497507/201504/072234156804516.png" /> < div class="carousel-caption"> 艾斯之死 </ div > </ div > < div class="item"> < img src="//images0.cnblogs.com/blog2015/497507/201504/072224541964718.png" /> < div class="carousel-caption"> 艾斯之解放 </ div > </ div > < div class="item"> < img src="//images0.cnblogs.com/blog2015/497507/201504/072232079464539.png" /> < div class="carousel-caption"> 艾斯与小马哥 </ div > </ div > </ div > <!-- Controls --> < a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> < span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></ span > < span class="sr-only">Previous</ span > </ a > < a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> < span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></ span > < span class="sr-only">Next</ span > </ a > </ div > |
注意我们这儿的标题文字被覆盖了,因为图片是随便找的,大小上没有微调,所以有的大一些,有的小一些,然后我们通过overflow直接隐藏了,所以下面的标题没有显示。
1 | style="height:250px;overflow:hidden" |
至此我们保存一下,就可以看到博客最上面轮播图片了。
使用script
textarea
标签动态加载DOM元素
script
轮播图片做好了。但是因为图片较大,加载起来较慢。打算只在首页和该贴的页面增加轮播图片的。这样的话只需要用javascript判断一下http地址就好了。如下
1 2 3 4 | var host = window.location.href; if (host == "http://www.cnblogs.com/santian/p/4389675.html" ) { //这里动态加载dom元素 } |
这样就需要动态加载dom元素,因为如果使用display:none的话,页面一渲染任然会加载图片,加载速度还是很慢。所以这儿我们需要另外的方法来加载dom元素。有下面两种方法。
1 2 3 4 5 6 7 8 9 | //script <script type= "text/html" id= "theTemplate" > <div class = "dialog" ><div class = "title" ><img src= "close.gif" alt= "点击可以关闭" />亲爱的提示条</div><div class = "content" ><img src= "delete.jpg" alt= "" /><span>您真的要GG吗?</span></div><div class = "bottom" ><input id= "Button2" type= "button" value= "确定" class = "btn" /> <input id= "Button3" type= "button" value= "取消" class = "btn" /></div></div> </script> //textarea <textarea id= "theTemplate" style= "display:none" > <div class = "dialog" ><div class = "title" ><img src= "close.gif" alt= "点击可以关闭" />亲爱的提示条</div><div class = "content" ><img src= "delete.jpg" alt= "" /><span>您真的要GG吗?</span></div><div class = "bottom" ><input id= "Button2" type= "button" value= "确定" class = "btn" /> <input id= "Button3" type= "button" value= "取消" class = "btn" /></div></div> </textarea> |
上面的两种存放的html可以当做字符串资源来使用如下
1 2 3 4 5 6 7 | //使用script包裹 var template = document.getElementById( "theTemplate" ).innerHTML ; //使用textarea包裹 var template = document.getElementById( "theTemplate" ).value ; //下面是我使用的动态加载dom元素的代码 var template = document.getElementById( "theTemplate" ).innerHTML; $( "body" ).prepend(template); |
通过使用这种方法。我们可以让整个html加载完毕了再去加载图片,这样就不会拖慢速度。
注:图片和我的模板风格不很配,等慢慢搜集一些喜欢的图片放上面。另外上面的图片可能让人看着眼花缭乱。感到心烦,以后慢慢调整,忘大家海涵。。。。
本文地址:http://www.cnblogs.com/santian/p/4400984.html
博客地址:一天两天三天
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验