零基础学做网站培训介绍

当前位置:

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

在之前的建站教程里,我们讲了网站制作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

发表评论

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

相关教程

  • 各位同学大家好,我是学做网站论坛的建站会员广东崔磊。很感谢论坛老师在我学习网站制作课程期间,对我的辅导帮助。现在在这里我想给同学做分享一
  • 在很多的图片网站上,全使用到3d轮播图效果,可以不断的实现旋转轮播,最大气美观。效果如图:对于这样一种高大上的3D旋转轮播图,做起来并不是想
  • 在我们仿站过程中,有点网站上带有轮播图,大多都是通过JS+FLASH的方式。这会给网站带来大量的冗余代码。如果你不喜欢,可以用一张图片来替换
  • 我想学仿站,问题总是多多啊~~第一,我应该怎样更换仿站中的FLASH文件呢?答:仿站时,目标网站的FLASH文件,可以换成自己的FLASH,具体方法在"企
  • 在之前的文章中,我们讲到了如何制作网站轮播图,使用这个方法,我们可以在自己建网站时制作出一个轮播图幻灯片。例如学做网站论坛首页顶部左侧就是一