学做网站培训课程介绍

当前位置：

jQuery网站通栏banner轮播图切换代码

在学做网站论坛之前的建站教程，介绍过很多网站轮播切换图幻灯片制作方法，今天再给广大学做网站学员介绍一种网站通栏banner轮播图。适宜各类网站使用。

先看下这款网站通栏banner轮播图的效果：

jQuery网站通栏banner轮播图

这款网站通栏banner轮播图是使用jquery来切换的，下面来分享一下这款jQuery网站通栏banner轮播图切换代码。

HTML代码：



<div class="DB_tab25">

        <ul class="DB_bgSet">

            <li style="background: #e67373;"></li>

            <li style="background: #86cccc;"></li>

            <li style="background: #ffebb3;"></li>

            <!--<li style="background: url(images/stu_banner2.jpg) no-repeat 100% 100%;"></li>-->

        </ul>

        <ul class="DB_imgSet">

            <li onclick="javascript:window.location.href='#';">

                <img class="DB_1_1" src="images/stuimg1_1.png" alt="" />

                <img class="DB_1_2" src="images/stuimg1_2.png" alt="" />

                <img class="DB_1_3" src="images/stuimg1_3.png" alt="" />

            </li>

            <li onclick="javascript:window.location.href=#';">

                <img class="DB_2_1" src="images/stuimg2_1.png" alt="" />

                <img class="DB_2_2" src="images/stuimg2_2.png" alt="" />

                <img class="DB_2_3" src="images/stuimg2_3.png" alt="" />

            </li>

            <li onclick="javascript:window.location.href='#';">

                <img class="DB_3_1" src="images/stuimg3_1.png" alt="" />

                <img class="DB_3_2" src="images/stuimg3_2.png" alt="" />

                <img class="DB_3_3" src="images/stuimg3_3.png" alt="" />

            </li>

        </ul>

        <div class="DB_menuWrap">

            <ul class="DB_menuSet">

                <li>

                    <img src="images/btn_off.png" alt="" />

                </li>

                <li>

                    <img src="images/btn_off.png" alt="" />

                </li>

                <li>

                    <img src="images/btn_off.png" alt="" />

                </li>

            </ul>

            <div class="DB_next">

                <img src="images/nextArrow.png" alt="NEXT" />

            </div>

            <div class="DB_prev">

                <img src="images/prevArrow.png" alt="PREV" />

            </div>

        </div>

    </div>

CSS代码



.DB_tab25 {width:100%;height:246px;position:relative;overflow:hidden;cursor:pointer;}

.DB_tab25 .DB_bgSet{position:relative;}

.DB_tab25 .DB_bgSet li{position:absolute;width:100%;height:246px;display:none;}

.DB_tab25 .DB_imgSet{position:absolute;width:988px;left:50%;margin-left:-500px;}

.DB_tab25 .DB_imgSet .DB_1_1{position:absolute;left:-5px;top:10px;}

.DB_tab25 .DB_imgSet .DB_1_2{position:absolute;left:415px;top:30px}

.DB_tab25 .DB_imgSet .DB_1_3{position:absolute;left:730px;top:180px}

.DB_tab25 .DB_imgSet .DB_2_1{position:absolute;left:75px;top:0px;}

.DB_tab25 .DB_imgSet .DB_2_2{position:absolute;left:400px;top:30px}

.DB_tab25 .DB_imgSet .DB_2_3{position:absolute;left:730px;top:180px}

.DB_tab25 .DB_imgSet .DB_3_1{position:absolute;left:10px;top:10px;}

.DB_tab25 .DB_imgSet .DB_3_2{position:absolute;left:540px;top:30px}

.DB_tab25 .DB_imgSet .DB_3_3{position:absolute;left:730px;top:180px}

.DB_tab25 .DB_menuWrap{position:absolute;width:988px;left:50%;margin-left:-500px;}

.DB_tab25 .DB_menuWrap .DB_menuSet{position:absolute;width:100%;top:226px;text-align:center;font-size:0; border-radius:20px;}

.DB_tab25 .DB_menuWrap .DB_menuSet li{cursor:pointer;margin:0 3px;display:inline}

.DB_tab25 .DB_prev{position:absolute;left:0px;top:90px;cursor:pointer;display:none}

.DB_tab25 .DB_next{position:absolute;right:0px;top:90px;cursor:pointer;display:none}


JS代码



<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> 

    <script type="text/javascript" src="js/jquery.DB_tabMotionBanner.min.js"></script> 

    <script type="text/javascript"> 

        $('.DB_tab25').DB_tabMotionBanner({ 

            key: 'b28551', 

            autoRollingTime: 6000, 

            bgSpeed: 500, 

            motion: { 

                DB_1_1: { left: -50, opacity: 0, speed: 1000, delay: 500 }, 

                DB_1_2: { left: -50, opacity: 0, speed: 1000, delay: 1000 }, 

                DB_1_3: { left: 100, opacity: 0, speed: 1000, delay: 1500 }, 

                DB_2_1: { top: 50, opacity: 0, speed: 1000, delay: 500 }, 

                DB_2_2: { top: 50, opacity: 0, speed: 1000, delay: 1000 }, 

                DB_2_3: { top: 100, opacity: 0, speed: 1000, delay: 1500 }, 

                DB_3_1: { left: -50, opacity: 0, speed: 1000, delay: 500 }, 

                DB_3_2: { top: 50, opacity: 0, speed: 1000, delay: 1000 }, 

                DB_3_3: { top: 0, opacity: 0, speed: 1000, delay: 1500 }, 

                end: null 

            } 

        }) 

    </script>

将以上三块代码放在自己网站的相应文件里，就可以制作出这种网站通栏banner轮播图。

最后给出这款jQuery网站通栏banner轮播图的组合代码。（三块代码组合在一起，粘贴到HTML中即可看到切换效果。）



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>



    <link rel="stylesheet" href="http://yanshi.sucaihuo.com/jquery/21/2197/demo/css/style.css" />



    <script type="text/javascript" src="http://yanshi.sucaihuo.com/jquery/21/2197/demo/js/jquery-1.8.3.min.js"></script>

    <script type="text/javascript" src="http://yanshi.sucaihuo.com/jquery/21/2197/demo/js/jquery.DB_tabMotionBanner.min.js"></script>



</head>

<body>

    <div class="DB_tab25">

        <ul class="DB_bgSet">

            <li style="background: #e67373;"></li>

            <li style="background: #86cccc;"></li>

            <li style="background: #ffebb3;"></li>

            <!--<li style="background: url(images/stu_banner2.jpg) no-repeat 100% 100%;"></li>-->

        </ul>

        <ul class="DB_imgSet">

            <li onclick="javascript:window.location.href='#';">

                <img class="DB_1_1" src="http://yanshi.sucaihuo.com/jquery/21/2197/demo/images/stuimg1_1.png" alt="" />

                <img class="DB_1_2" src="http://yanshi.sucaihuo.com/jquery/21/2197/demo/images/stuimg1_2.png" alt="" />

                <img class="DB_1_3" src="http://yanshi.sucaihuo.com/jquery/21/2197/demo/images/stuimg1_3.png" alt="" />

            </li>

            <li onclick="javascript:window.location.href=#';">

                <img class="DB_2_1" src="http://yanshi.sucaihuo.com/jquery/21/2197/demo/images/stuimg2_1.png" alt="" />

                <img class="DB_2_2" src="http://yanshi.sucaihuo.com/jquery/21/2197/demo/images/stuimg2_2.png" alt="" />

                <img class="DB_2_3" src="http://yanshi.sucaihuo.com/jquery/21/2197/demo/images/stuimg2_3.png" alt="" />

            </li>

            <li onclick="javascript:window.location.href='#';">

                <img class="DB_3_1" src="http://yanshi.sucaihuo.com/jquery/21/2197/demo/images/stuimg3_1.png" alt="" />

                <img class="DB_3_2" src="http://yanshi.sucaihuo.com/jquery/21/2197/demo/images/stuimg3_2.png" alt="" />

                <img class="DB_3_3" src="http://yanshi.sucaihuo.com/jquery/21/2197/demo/images/stuimg3_3.png" alt="" />

            </li>

        </ul>

        <div class="DB_menuWrap">

            <ul class="DB_menuSet">

                <li>

                    <img src="http://yanshi.sucaihuo.com/jquery/21/2197/demo/images/btn_off.png" alt="" />

                </li>

                <li>

                    <img src="http://yanshi.sucaihuo.com/jquery/21/2197/demo/images/btn_off.png" alt="" />

                </li>

                <li>

                    <img src="http://yanshi.sucaihuo.com/jquery/21/2197/demo/images/btn_off.png" alt="" />

                </li>

            </ul>

            <div class="DB_next">

                <img src="http://yanshi.sucaihuo.com/jquery/21/2197/demo/images/nextArrow.png" alt="NEXT" />

            </div>

            <div class="DB_prev">

                <img src="http://yanshi.sucaihuo.com/jquery/21/2197/demo/images/prevArrow.png" alt="PREV" />

            </div>

        </div>

    </div>

    <script type="text/javascript">

        $('.DB_tab25').DB_tabMotionBanner({

            key: 'b28551',

            autoRollingTime: 6000,

            bgSpeed: 500,

            motion: {

                DB_1_1: { left: -50, opacity: 0, speed: 1000, delay: 500 },

                DB_1_2: { left: -50, opacity: 0, speed: 1000, delay: 1000 },

                DB_1_3: { left: 100, opacity: 0, speed: 1000, delay: 1500 },

                DB_2_1: { top: 50, opacity: 0, speed: 1000, delay: 500 },

                DB_2_2: { top: 50, opacity: 0, speed: 1000, delay: 1000 },

                DB_2_3: { top: 100, opacity: 0, speed: 1000, delay: 1500 },

                DB_3_1: { left: -50, opacity: 0, speed: 1000, delay: 500 },

                DB_3_2: { top: 50, opacity: 0, speed: 1000, delay: 1000 },

                DB_3_3: { top: 0, opacity: 0, speed: 1000, delay: 1500 },

                end: null

            }

        })

    </script>

</body>

</html>

发表评论

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

相关教程

  • 如何制作网站图片轮播特效（JQuery banner 轮播） 图文教程附件下载 (125163 次浏览)
    图片轮播特效在网站制作过程中经常会用到，它可以让一个“静止”的网站“动”起来。在学做网站论坛以前的建站教程中，也讲过如何制作网站幻灯片，我们在学
  • 自己制作jQuery实现TAB选项卡切换特效 图文教程 (17132 次浏览)
    在自己建网站过程中，由于版面限制，很多内容需要制作成一TAB选项卡，这样在同样一个尺寸的版块，可以显示成倍的内容。TAB选项卡在很多在的大量网站中
  • jQuery网站通栏banner轮播图切换代码 图文教程 (17200 次浏览)
    在学做网站论坛之前的建站教程，介绍过很多网站轮播切换图幻灯片制作方法，今天再给广大学做网站学员介绍一种网站通栏banner轮播图。适宜各类网站使用
  • 自己做网站如何制作幻灯片/轮播切换图 图文教程附件下载 (137007 次浏览)
    轮播切换图在很多网站上都能看到，它可以自动的轮播图片和广告，也可以手动的去切换图片。如下图就是一网站上的一个轮播图：我们自己做网站时
  • DISCUZ论坛如何制作焦点轮播图 图文教程附件下载 (129782 次浏览)
    网站上有焦点幻灯片可以让整个网站动感十足，我们在学习论坛网站制作教程时，也可以自己去制作焦点幻灯片，让自己的网站上拥有自己喜欢的焦点幻灯片效
  • JS+HTML纯代码制作网站切换图 图文教程附件下载 (125296 次浏览)
    可以说任意一个网站都少不了换灯片，在之前的课程里学做网站论坛也列举了很多网站幻灯片代码，通过这些方法，我们可以制作作某一个规定尺寸的换灯片，
  • 如何制作JS+DIV左右滚动的切换图（手动+自动） 图文教程附件下载 (147954 次浏览)
    有些学员在学习制作网站时，想在自己的网站上添加一些左右滚动的切换图效果，这种效果可以实现自动切换和手动左右切换。如果要实现在网站上增加切换图
  • 网页设计学习必备：颜色名称和HTML代码对照表 (124611 次浏览)
    学做网站时，经常要修改代码，很多时候需要用到颜色代码，由于太多，不可能都记住，所以找到了一个带有中文颜色名称表示的颜色代码表，以便后期网页设
  • 网站简繁体转换js代码（简繁体网站制作） 图文教程附件下载 (124538 次浏览)
    如果我们的网站有港澳台的用户，那么网站特别好是能支持文字简繁互转，这样做能方便不同用户更好的阅读网站内容。那么如何在自己做网站时，实

建站培训课程

最新教程

其它教程