带放大镜功能的jQuery轮播图插件 |幻灯片和轮播图|下载

简要教程

这是一款带放大镜功能的jQuery轮播图插件。该jQuery轮播图在布局上带有缩略图，并且在鼠标hover大图时，带有漂亮的放大镜效果。

使用方法

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

HTML结构

该jQuery轮播图的基本HTML结构如下：

然后使用一个

元素作为放大镜的容器。

CSS样式

该轮播图和放大镜的主要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...'
  }); 
});

该带放大镜功能的jQuery轮播图插件的github地址为：https://github.com/GurYN/zoom-slideshow