欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > HTML >

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>jquery酷炫焦点图轮播切换代码</title>

<meta name="keywords" content="jquery特效,幻灯片,图片轮播,焦点图,图片切换,百叶窗" />

<meta name="description" content="jquery酷炫焦点图轮播切换代码。" />

<link href="css/style.css" rel="stylesheet" type="text/css" />

<link type="text/css" href="css/skitter.css" media="all" rel="stylesheet" />

 

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

<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

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

<script type="text/javascript">

$(document).ready(function(){

 

         $(document).ready(function() {

                   $(".box_skitter_large").skitter({

                            animation: "random",

                            interval: 3000,

                            numbers: false,

                            numbers_align: "right",

                            hideTools: true,

                            controls: false,

                            focus: false,

                            focus_position: true,

                            width_label:'340px',

                            enable_navigation_keys: true,  

                            progressbar: false

                   });

         });                                  

                                                

});

</script>

 

 

</head>

<body>

 

<div id="slider-container">

         <div class="box_skitter box_skitter_large">

                   <ul>

                            <li>

                                     <a href="http://www.jsdaima.com/"><img src="images/index1.jpg" alt="" /></a>

                                     <div class="label_text">

                                               <h3 class="colortext uppercase"> 帮你展现更美的自已

                                               </h3>

                                               <span>彩妆刷系列轻易打造你的个性妆容!夏末天气也越来越舒爽的,</span>

                                     </div>

                            </li>

                            <li>

                                     <a href="http://www.jsdaima.com/"><img src="images/index2.jpg"alt="" /></a>

                                     <div class="label_text">

                                               <h3 class="colortext uppercase">帮你展现更美的自已

                                               </h3>

                                               <span>专业的刷具能帮你轻松打造自然妆容,你会发现用了专业刷具,

                                               </span>

                                     </div>

                            </li>

                            <li>

                                     <a href="http://www.jsdaima.com/"><img src="images/index3.jpg" alt="" /></a>

                                     <div class="label_text">

                                               <h3 class="colortext uppercase">帮你展现更美的自已

                                               </h3>

                                               <span>彩妆刷让你打造美丽妆容更加得心应手。彩妆刷已从专业造型师手中,

                                               </span>

                                     </div>

                            </li>

                   </ul>

         </div>

         <div id="shadow-img-slider"></div>

</div><!-- end #slider-container -->

 

</body>

</html>

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h14900.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

 

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2016-12-03 10:20 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。