desSlideshow.js——tab图片幻灯片(竖)

来源：互联网发布：淘宝数据采集器破解版编辑：程序博客网时间：2024/06/08 08:20

滑动切换图片

desslideshow是一个轻量级的，易于使用的jQuery幻灯片插件，允许你创建一个时尚的幻灯片动画导航按钮显示你的网站的特色内容/图片。

Html

<div id="desSlideshow" class="desSlideshow">    <div class="switchBigPic">        <div>            <a title="" href="#"><img class="pic" src="./images/006.jpg" /></a>            <p><strong>Description Title1</strong><br/>                Description Content1            </p>        </div>        <div>            <a title="" href="#"><img class="pic" src="./images/004.jpg" /></a>        </div>        <div>            <a title="" href="#"><img class="pic" src="./images/001.jpg" /></a>            <p><strong>Description Title3</strong><br/>                Description Content3            </p>        </div>        <div>        <a title="" href="#"><img class="pic" src="./images/003.jpg" /></a>            <p><strong>Description Title4</strong><br/>                Description Content4            </p>        </div>    </div>    <ul class="nav">        <li><a href="#" target="_blank">Slideshow1</a></li>        <li><a href="#" target="_blank">Slideshow2</a></li>        <li><a href="#" target="_blank">Slideshow3</a></li>        <li><a href="#" target="_blank">Slideshow4</a></li>    </ul></div>

载入 JavaScript 文件

<link href="css/style.css" rel="stylesheet" type="text/css" /><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script src="js/desSlideshow.js"></script>

调用 DesSlideshow

<script language="javascript" type="text/javascript">    $(function() {        $("#desSlideshow").desSlideshow({            autoplay: 'enable',      //选项：启用，禁用            slideshow_width: '800',  //幻灯片窗口宽度            slideshow_height: '249', //幻灯片窗口高度            thumbnail_width: '200',  //导航条宽度，右侧            time_Interval: '4000',   // 毫秒            directory: 'images/'     // flash-on.gif和flashtext-bg.jpg目录        });    });</script>

GitHub：https://github.com/htmldrive/des-slideshow

0 0