带放大镜功能的jQuery轮播图插件

 查看演示  website  立即下载

使用方法

在页面中引入style.css，jQuery和zoom-slideshow.js文件。

<link href="css/style.css" rel="stylesheet">
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/prefixfree.min.js"></script>
<script type="text/javascript" src="js/zoom-slideshow.js"></script>

HTML结构

<div id="wrapper">
 <div id="content">
   <!--大图预览区-->
   <div id="view">
     <img src="media/img/Desert.jpg" alt="" />
   </div>
   <!--缩略图-->
   <div id="thumbs">
     <!--左箭头导航-->
     <div id="nav-left-thumbs"><</div>
     <div id="pics-thumbs">
       <img src="media/img/nature1.jpg" alt="Nature1" />
       <img src="media/img/nature2.jpg" alt="Nature2" />
       <img src="media/img/nature3.jpg" alt="Nature3" />
       <img src="media/img/nature4.jpg" alt="Nature4" />
       <img src="media/img/nature5.jpg" alt="Nature5" />
       <img src="media/img/nature6.jpg" alt="Nature6" />
       <img src="media/img/nature7.jpg" alt="Nature7" />
       <img src="media/img/nature8.jpg" alt="Nature8" />
       <img src="media/img/nature9.jpg" alt="Nature9" />
     </div>
     <!--右箭头导航-->
     <div id="nav-right-thumbs">></div>
   </div>
 </div>
</div>

然后使用一个<div>元素作为放大镜的容器。

<div id="zoom"></div>

CSS样式

#zoom {
 position: absolute;
 width: 100px;
 height: 100px;
 background-repeat: no-repeat;
 border-radius: 50px;
 box-shadow: 0 0 10px rgba(0, 0, 0, .8);
 display: none;
}
#view {
 margin: 30px 0;
 height: 384px;
}
#view img {
 border-radius: 8px;
 box-shadow: 0 0 10px rgba(0,0,0,.6);
}
#thumbs {
 position: relative;
 margin: 20px 0;
}
#nav-left-thumbs { left: 70px; }
#nav-right-thumbs { right: 70px; }
#nav-left-thumbs, #nav-right-thumbs {
 position: absolute;
 top: 30px;
 width: 30px;
 height: 30px;
 line-height: 30px;
 border-radius: 15px;
 box-shadow: 0 0 10px rgba(0,0,0,.6);
 font-size: 1em;
 font-weight: bold;
 color: #999;
 text-shadow: 0 0 10px rgba(0,0,0,.5);
 cursor: pointer;
 transition-duration: .5s;
}
#nav-left-thumbs:hover, #nav-right-thumbs:hover { background: lightgrey; }
#pics-thumbs {
 position: relative;
 padding: 5px 0;
 margin: 0 122px;
 white-space: nowrap;
 overflow: hidden;
 transition-duration: .8s;
}
#pics-thumbs img {
 padding: 5px;
 margin: 0 2px;
 border-radius: 4px;
 box-shadow: 0 0 5px rgba(0,0,0,.6);
 cursor: pointer;
 height: 75px;
 transition-duration: .5s;
}

初始化插件

在页面DOM元素加载完毕之后，通过下面的方法来初始化该jQuery轮播图插件。

$(document).ready(function() {
 $('#view').setZoomPicture({
   thumbsContainer: '#pics-thumbs',
   prevContainer: '#nav-left-thumbs',
   nextContainer: '#nav-right-thumbs',
   zoomContainer: '#zoom'
 }); 
});

你也可以通过配置参数来设置放大镜的缩放级数。

$(document).ready(function() {
 $('#view').setZoomPicture({
   thumbsContainer: '#pics-thumbs',
   prevContainer: '#nav-left-thumbs',
   nextContainer: '#nav-right-thumbs',
   zoomContainer: '#zoom',
   zoomLevel: 2
 }); 
});

你还可以自定义加载图片时显示的信息。

$(document).ready(function() {
 $('#view').setZoomPicture({
   thumbsContainer: '#pics-thumbs',
   prevContainer: '#nav-left-thumbs',
   nextContainer: '#nav-right-thumbs',
   zoomContainer: '#zoom',
   loadMsg: 'Loading...'
 }); 
});

PREVIOUS:
NEXT:
Premium Layers HTML电子名片简历模板
jQuery图片水平垂直滑动插件