幻灯片/轮播

放大镜功能jQuery轮播图插件

阿里云


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

使用方法

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

也想出现在这里?联系我们
创客主机
  1. <link href="css/style.css" rel="stylesheet">
  2. <script src="js/jquery.min.js"></script>
  3. <script src="js/zoom-slideshow.js"></script>

HTML 结构

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

  1. <div id="wrapper">
  2.   <div id="content">
  3.     <!--大图预览区-->
  4.     <div id="view">
  5.       <img src="media/img/Desert.jpg" alt="" />
  6.     </div>
  7.     <!--缩略图-->
  8.     <div id="thumbs">
  9.       <!--左箭头导航-->
  10.       <div id="nav-left-thumbs"><</div>
  11.       <div id="pics-thumbs">
  12.         <img src="media/img/nature1.jpg" alt="Nature1" />
  13.         <img src="media/img/nature2.jpg" alt="Nature2" />
  14.         <img src="media/img/nature3.jpg" alt="Nature3" />
  15.         <img src="media/img/nature4.jpg" alt="Nature4" />
  16.         <img src="media/img/nature5.jpg" alt="Nature5" />
  17.         <img src="media/img/nature6.jpg" alt="Nature6" />
  18.         <img src="media/img/nature7.jpg" alt="Nature7" />
  19.         <img src="media/img/nature8.jpg" alt="Nature8" />
  20.         <img src="media/img/nature9.jpg" alt="Nature9" />
  21.       </div>
  22.       <!--右箭头导航-->
  23.       <div id="nav-right-thumbs">></div>
  24.     </div>
  25.   </div>
  26. </div>

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

CSS 样式:

该轮播图和放大镜的主要 CSS 样式如下,你也可以自定义样式。

  1. #zoom {
  2.   position: absolute;
  3.   width: 100px;
  4.   height: 100px;
  5.   background-repeat: no-repeat;
  6.   border-radius: 50px;
  7.   box-shadow: 0 0 10px rgba(0, 0, 0, .8);
  8.   display: none;
  9. }
  10.  
  11. #view {
  12.   margin: 30px 0;
  13.   height: 384px;
  14. }
  15.  
  16. #view img {
  17.   border-radius: 8px;
  18.   box-shadow: 0 0 10px rgba(0,0,0,.6);
  19. }
  20.  
  21. #thumbs {
  22.   position: relative;
  23.   margin: 20px 0;
  24. }
  25.  
  26. #nav-left-thumbs { left: 70px; }
  27.  
  28. #nav-right-thumbs { right: 70px; }
  29.  
  30. #nav-left-thumbs, #nav-right-thumbs {
  31.   position: absolute;
  32.   top: 30px;
  33.   width: 30px;
  34.   height: 30px;
  35.   line-height: 30px;
  36.   border-radius: 15px;
  37.   box-shadow: 0 0 10px rgba(0,0,0,.6);
  38.   font-size: 1em;
  39.   font-weight: bold;
  40.   color: #999;
  41.   text-shadow: 0 0 10px rgba(0,0,0,.5);
  42.   cursor: pointer;
  43.   transition-duration: .5s;
  44. }
  45.  
  46. #nav-left-thumbs:hover, #nav-right-thumbs:hover { background: lightgrey; }
  47.  
  48. #pics-thumbs {
  49.   position: relative;
  50.   padding: 5px 0;
  51.   margin: 0 122px;
  52.   white-space: nowrap;
  53.   overflow: hidden;
  54.   transition-duration: .8s;
  55. }
  56.  
  57. #pics-thumbs img {
  58.   padding: 5px;
  59.   margin: 0 2px;
  60.   border-radius: 4px;
  61.   box-shadow: 0 0 5px rgba(0,0,0,.6);
  62.   cursor: pointer;
  63.   height: 75px;
  64.   transition-duration: .5s;
  65. }

初始化插件

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

  1. $(document).ready(function() {
    
  2.   $('#view').setZoomPicture({
    
  3.     thumbsContainer: '#pics-thumbs',
    
  4.     prevContainer: '#nav-left-thumbs',
    
  5.     nextContainer: '#nav-right-thumbs',
    
  6.     zoomContainer: '#zoom'
    
  7.   }); 
    
  8. });

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

  1. $(document).ready(function() {
    
  2.   $('#view').setZoomPicture({
    
  3.     thumbsContainer: '#pics-thumbs',
    
  4.     prevContainer: '#nav-left-thumbs',
    
  5.     nextContainer: '#nav-right-thumbs',
    
  6.     zoomContainer: '#zoom',
    
  7.     zoomLevel: 2
    
  8.   }); 
    
  9. });

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

  1. $(document).ready(function() {
    
  2.   $('#view').setZoomPicture({
    
  3.     thumbsContainer: '#pics-thumbs',
    
  4.     prevContainer: '#nav-left-thumbs',
    
  5.     nextContainer: '#nav-right-thumbs',
    
  6.     zoomContainer: '#zoom',
    
  7.     loadMsg: 'Loading...'
    
  8.   }); 
    
  9. });

Github 地址:https://github.com/GurYN/zoom-slideshow

放大镜功能 jQuery 轮播图插件

已有 542 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(1)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!