我的第一个完整插件touchSlider
作者 Viliam | 发布于 2016-03-23
其他

查看演示 立即下载

    插件描述:touchSlider,焦点图插件,全屏切换插件,支持手机滑动,主要功能包括:
       1、自动播放
       2、可横向和纵向切换
       3、可以使用小焦点或焦点图
       4、可以开启支持手机滑动
       5、可以固定宽高,横向全屏固定高,全屏
       6、上一张下一张切换

让你的页面更加大气,更灵活地展示内容,使用非常简单,只需要按照以下几步...

引入重置样式和插件CSS文件

    <link rel="stylesheet" href="css/set.css"/>
    <link rel="stylesheet" href="css/touchSlider.css"/>

把touchSlider.js,jquery.js文件添加到你的脚本文件夹并条用对应的地址

    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script src="js/touchSlider.js"></script>

HTML部分

    <div class="slider-box" id="slider-box">
        <ul id="slider">
            <li class="p1 current">
                <div class="photo-middle">
                    <span></span>
                    <p>
                        <img src="img/p1.jpg" alt=" 大图1 " />
                    </p>
                </div>
            </li>
            <li class="p2">
                <div class="photo-middle">
                    <span></span>
                    <p>
                        <img src="img/p2.jpg" alt=" 大图2 " />
                    </p>
                </div>
            </li>
            <li class="p3">
                <div class="photo-middle">
                    <span></span>
                    <p>
                        <img src="img/p3.jpg" alt=" 大图3 " />
                    </p>
                </div>
            </li>
            <li class="p4">
                <div class="photo-middle">
                    <span></span>
                    <p>
                        <img src="img/p4.jpg" alt=" 大图4 " />
                    </p>
                </div>
            </li>
            <li class="p5">
                <div class="photo-middle">
                    <span></span>
                    <p>
                        <img src="img/p5.jpg" alt=" 大图5 " />
                    </p>
                </div>
            </li>
        </ul>
        <a href="javascript:;" class="arrow prv" title=" 上一张 " ></a>
        <a href="javascript:;" class="arrow next" title=" 下一张 " ></a>
        <ul id="thumb" class="thumb_photo bottomP">
            <li class="current"><a href="#"> <img src="img/p1.jpg" alt=" 缩略焦点图1" /></a></li>
            <li><a href="#"> <img src="img/p2.jpg" alt=" 缩略焦点图2" /></a></li>
            <li><a href="#"> <img src="img/p3.jpg" alt=" 缩略焦点图3" /></a></li>
            <li><a href="#"> <img src="img/p4.jpg" alt=" 缩略焦点图4" /></a></li>
            <li><a href="#"> <img src="img/p5.jpg" alt=" 缩略焦点图5" /></a></li>
        </ul>
    </div>

现在我们只需要调用touchSlider()函数

    <script type="text/javascript">
        $(function(){
            $("#slider").touchSlider({
                'shortFocus':false,                  //是否开启缩略小焦点
                'customPhoto':true,                  //是否开启自定义缩略图片
                'autoPlay':false,                    //是否开启自动播放
                'loop':true,                         //是否开启循环(播放或滚动)
                'direction' : 'vertical'             //   【horizontal】 横屏   【vertical】  竖屏
            });
        });
    </script>

touchSlider.js里面的默认参数都可以写到调用touchSlider()函数这里,会覆盖

本站说明

前端开发、体验、交互、设计、技术、分享 i--do.com,包含javascript、html、css、nodeJS、demo展示等。转载文章请标注文章来源。

联系我

E-Mail: 709694072@qq.com