善恶资源网专注优秀技术教程分享网-傅汉松!

怎么制作网站上的图文轮播图

傅汉松 技术教程

汉松出品|资源介绍

傅汉松本次为大家分享的是怎么制作网站上的图文轮播图

傅汉松

现在还有一种轮播图就是图文轮播图,在图片轮播的基础上还有文字的切换。效果如下图:

下面学做网站论坛介绍一下网站上的图文轮播图的制作方法。

制作图文轮播图,需要下载一个JQUERY 插件jquery.devrama.slider.js,下载地址:链接: https://pan.baidu.com/s/1Ova6702Y3N6-z61sYJiVcg 提取码: 84t5

将下载的JQEURY插件引入到自己的网站代码里,注意设置文件的路径。

<script type="text/Javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.devrama.slider.js"></script>

在需要显示图文轮播图的位置,放上以下的代码:(可以修改代码里的数字,来改变文字显示的位置)

<div class="example-animation">
<div data-lazy-background="images/1.jpg">
<h3 data-pos="['0%', '110%', '0%', '5%']" data-duration="700" data-effect="move">
Moving
</h3>
<div data-pos="['-30%', '25%', '40%', '25%']" data-duration="700" data-effect="move">
Text
</div>
<div data-pos="['56%', '-40%', '56%', '11%']" data-duration="700" data-effect="move">
and Image
</div>
<div data-pos="['23%', '110%', '23%', '42%']" data-duration="700" data-effect="move">
<img data-lazy-src="images/add.jpg"/>
</div>
</div>
<div data-lazy-background="images/2.jpg">
<h3 data-pos="['0%', '8%']" data-duration="1000" data-effect="fadein">
Fadein
</h3>
<div data-pos="['44%', '15%']" data-duration="700" data-effect="fadein">
Text
</div>
<div data-pos="['66%', '11%']" data-duration="700" data-effect="fadein">
and Image
</div>
<div data-pos="['29%', '46%']" data-duration="700" data-delay="500" data-effect="fadein">
<img data-lazy-src="images/add.jpg"/>
</div>
</div>
</div>

在网页的底部再放以下的JS代码,实现轮播。

<script type="text/javascript">
$(document).ready(function(){
$('.example-animation').DrSlider(); //Yes! that's it!
});
</script>

最后加上控制图文轮播的样式CSS代码:

.syntaxhighlighter a, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter table, .syntaxhighlighter table td, .syntaxhighlighter table tr, .syntaxhighlighter table tbody, .syntaxhighlighter table thead, .syntaxhighlighter table caption, .syntaxhighlighter textarea { background: none repeat scroll 0% 0% transparent ! important; border: 0px none ! important; bottom: auto ! important; float: none ! important; height: auto ! important; left: auto ! important; line-height: 1.1em ! important; margin: 0px ! important; outline: 0px none ! important; overflow: visible ! important; padding: 0px ! important; position: static ! important; right: auto ! important; text-align: left ! important; top: auto ! important; vertical-align: baseline ! important; width: auto ! important; box-sizing: content-box ! important; font-family: "Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace ! important; font-weight: normal ! important; font-style: normal ! important; font-size: 1em ! important; min-height: inherit ! important; }
.syntaxhighlighter { width: 100% ! important; margin: 1em 0px ! important; position: relative ! important; overflow: auto ! important; font-size: 1em ! important; }
.syntaxhighlighter .line { white-space: pre ! important; }
.syntaxhighlighter table { width: 100% ! important; }
.syntaxhighlighter table td.code { width: 100% ! important; }
.syntaxhighlighter table td.code .container { position: relative ! important; }
.syntaxhighlighter table td.code .line { padding: 0px 1em ! important; }
.syntaxhighlighter.nogutter td.code .container textarea, .syntaxhighlighter.nogutter td.code .line { padding-left: 0em ! important; }
.syntaxhighlighter .toolbar { position: absolute ! important; right: 1px ! important; top: 1px ! important; width: 11px ! important; height: 11px ! important; font-size: 10px ! important; z-index: 10 ! important; }
.syntaxhighlighter .toolbar a { display: block ! important; text-align: center ! important; text-decoration: none ! important; padding-top: 1px ! important; }

.syntaxhighlighter { background-color: black ! important; }
.syntaxhighlighter .line.alt1 { background-color: black ! important; }
.syntaxhighlighter .line.alt2 { background-color: black ! important; }
.syntaxhighlighter .toolbar { color: white ! important; background: none repeat scroll 0% 0% rgb(153, 0, 0) ! important; border: medium none ! important; }
.syntaxhighlighter .toolbar a { color: white ! important; }
.syntaxhighlighter .toolbar a:hover { color: rgb(156, 207, 244) ! important; }
.syntaxhighlighter .plain, .syntaxhighlighter .plain a { color: rgb(211, 211, 211) ! important; }
.syntaxhighlighter .string, .syntaxhighlighter .string a { color: rgb(255, 158, 123) ! important; }
.syntaxhighlighter .keyword { color: aqua ! important; }
.syntaxhighlighter .color1, .syntaxhighlighter .color1 a { color: rgb(235, 219, 141) ! important; }

body { }
#content { margin: 0px auto 100px; max-width: 1200px; font-size: 16px; }
#content .syntaxhighlighter { overflow-y: hidden ! important; }
#content .syntaxhighlighter > table > tbody > tr > td.code { padding: 10px ! important; }
#content .photo-license-toggle { margin: 0px auto; padding: 10px 0px; max-width: 1024px; text-align: right; }
#content .photo-license { display: none; margin: 0px auto; max-width: 1024px; font-size: 0.8em; border: 1px dashed rgb(111, 111, 111); border-radius: 6px; padding: 15px 10px; line-height: 1.6em; }
.example-animation { color: rgb(255, 255, 255); font-size: 60px; }

这样就可制作出图文轮播功能了。为了方便大家调用,提供一下整个图文轮播的示例代码。下载地址:https://pan.baidu.com/s/1rKPSap7iipl6eCevwOlkfw 提取码: 82fw


标签: 暂无标签

免责声明:

本站提供的资源,都来自网络,版权争议与本站无关,所有内容及软件的文章仅限用于学习和研究目的。不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,我们不保证内容的长久可用性,通过使用本站内容随之而来的风险与本站无关,您必须在下载后的24个小时之内,从您的电脑/手机中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。侵删请致信E-mail:321976193@qq.com

同类推荐
评论列表

技术教程 怎么制作网站上的图文轮播图
现在还有一种轮播图就是图文轮播图,在图片轮播的基础上还有文字的切换。效果如下图:下面学做网站论坛介绍一下网站上的图文轮播图的制作方法。制作图文轮播图,需要下载一...
扫描二维码阅读原文
QQ娱乐网 January, 01
生成社交图 ×
    72.46ms