基于jq流畅度非常好的图片左右切换焦点图

今天给大家分享一款基于jq流畅度非常好的图片左右切换焦点图。这是一款基于jQuery实现的支持鼠标拖动切换jQuery特效下载。效果图如下：

在线预览   源码下载

实现的代码。

html代码：

 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="filters hidden">

    <defs>

      <filter id="blur">

          <feGaussianBlur in="SourceGraphic" stdDeviation="0,0" />

      </filter>

    </defs>

</svg>

    <div class="container">

        <div class="content">

            <div class="gallery">

                <ul class="gallery-pictures">

                    <li class="gallery-picture">

                        <img src="img/1.jpg" alt="img01">

                    </li>

                    <li class="gallery-picture">

                        <img src="img/2.jpg" alt="img02">

                    </li>

                    <li class="gallery-picture">

                        <img src="img/3.jpg" alt="img03">

                    </li>

                    <li class="gallery-picture">

                        <img src="img/4.jpg" alt="img04">

                    </li>

                    <li class="gallery-picture">

                        <img src="img/5.jpg" alt="img05">

                    </li>

                    <li class="gallery-picture">

                        <img src="img/6.jpg" alt="img06">

                    </li>

                    <li class="gallery-picture">

                        <img src="img/7.jpg" alt="img07">

                    </li>

                    <li class="gallery-picture">

                        <img src="img/8.jpg" alt="img08">

                    </li>

                    <li class="gallery-picture">

                        <img src="img/9.jpg" alt="img09">

                    </li>

                </ul>

                <div class="gallery-pagination">

                    <button class="gallery-pagination-dot">

                    </button>

                    <button class="gallery-pagination-dot">

                    </button>

                    <button class="gallery-pagination-dot">

                    </button>

                    <button class="gallery-pagination-dot">

                    </button>

                    <button class="gallery-pagination-dot">

                    </button>

                    <button class="gallery-pagination-dot">

                    </button>

                    <button class="gallery-pagination-dot">

                    </button>

                    <button class="gallery-pagination-dot">

                    </button>

                    <button class="gallery-pagination-dot">

                    </button>

                </div>

            </div>

            <p>

                鼠标点击拖到查看效果！</p>

        </div>

    </div>

via：http://www.w2bc.com/Article/36388