怎么制作网站上的图文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