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

最新推荐文章于 2021-03-27 19:07:04 发布

cc蒲公英

最新推荐文章于 2021-03-27 19:07:04 发布

阅读量672

点赞数

分类专栏： PC端插件文章标签： tab切换幻灯片轮播

本文链接：https://blog.csdn.net/cddcj/article/details/52414275

版权

PC端插件专栏收录该内容

18 篇文章 0 订阅

订阅专栏

滑动切换图片

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