零基礎建站培訓教程介紹

當前位置:

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>

發表評論

電子郵件地址不會被公開。 必填項已用*標注

相關教程

學做網站論壇零基礎學建網站課程
新疆25选7基本走势图