今天给大家分享一款基于jq流畅度非常好的图片左右切换焦点图。这是一款基于jQuery实现的支持鼠标拖动切换jQuery特效下载。效果图如下:
在线预览 源码下载
实现的代码。
html代码:
<svg ="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='/images/loading.gif' data-original="img/1.jpg" > </li> <li class="gallery-picture"> <img src='/images/loading.gif' data-original="img/2.jpg" > </li> <li class="gallery-picture"> <img src='/images/loading.gif' data-original="img/3.jpg" > </li> <li class="gallery-picture"> <img src='/images/loading.gif' data-original="img/4.jpg" > </li> <li class="gallery-picture"> <img src='/images/loading.gif' data-original="img/5.jpg" > </li> <li class="gallery-picture"> <img src='/images/loading.gif' data-original="img/6.jpg" > </li> <li class="gallery-picture"> <img src='/images/loading.gif' data-original="img/7.jpg" > </li> <li class="gallery-picture"> <img src='/images/loading.gif' data-original="img/8.jpg" > </li> <li class="gallery-picture"> <img src='/images/loading.gif' data-original="img/9.jpg" > </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
原标题:基于jq流畅度非常好的图片左右切换焦点图
关键词:jq