学做网站培训课程介绍

当前位置：

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

在之前的建站教程里，我们讲了网站制作banner轮播图的通用方法，这种轮播图就是比较常见的纯图片的切换轮播图。现在还有一种轮播图就是图文轮播图，在图片轮播的基础上还有文字的切换。效果如下图：

图文轮播图

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

  1. 制作图文轮播图，需要下载一个JQUERY 插件jquery.devrama.slider.js，下载地址：链接: https://pan.baidu.com/s/1Ova6702Y3N6-z61sYJiVcg 提取码: 84t5
  2. 将下载的JQEURY插件引入到自己的网站代码里，注意设置文件的路径。 
    

    <script type="text/javascript" src="js/jquery.min.js"></script>
    
<script type="text/javascript" src="js/jquery.devrama.slider.js"></script>
  3. 在需要显示图文轮播图的位置，放上以下的代码：（可以修改代码里的数字，来改变文字显示的位置） 
    

    <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>
  4. 在网页的底部再放以下的JS代码，实现轮播。 
    

    <script type="text/javascript">
    
$(document).ready(function(){
    
$('.example-animation').DrSlider(); //Yes! that's it!
    
});
    
</script>
  5. 最后加上控制图文轮播的样式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; }
  6. 这样就可制作出图文轮播功能了。为了方便大家调用，提供一下整个图文轮播的示例代码。下载地址：https://pan.baidu.com/s/1rKPSap7iipl6eCevwOlkfw 提取码: 82fw

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 自己做网站如何制作幻灯片/轮播切换图 图文教程附件下载 (137084 次浏览)
    轮播切换图在很多网站上都能看到，它可以自动的轮播图片和广告，也可以手动的去切换图片。如下图就是一网站上的一个轮播图：我们自己做网站时
  • DISCUZ论坛如何制作焦点轮播图 图文教程附件下载 (129796 次浏览)
    网站上有焦点幻灯片可以让整个网站动感十足，我们在学习论坛网站制作教程时，也可以自己去制作焦点幻灯片，让自己的网站上拥有自己喜欢的焦点幻灯片效
  • 如何制作网站图片轮播特效（JQuery banner 轮播） 图文教程附件下载 (125174 次浏览)
    图片轮播特效在网站制作过程中经常会用到，它可以让一个“静止”的网站“动”起来。在学做网站论坛以前的建站教程中，也讲过如何制作网站幻灯片，我们在学

建站培训课程

最新教程

其它教程