类似幻灯片播放图片的小插件

来源：互联网发布：广安广电网络编辑：程序博客网时间：2024/04/29 19:57

类似幻灯片播放图片的小插件

最近在工作中频繁与图片轮播打交道，但是基本都是使用swiper插件完成的，今天有时间，自学之余，稍作研究！

前言

准备两个文件夹，分别存放缩略图和原始图（这里用的thumbnails photo），当然，如果不介意图片是否清晰，一个文件夹就行了。

基本需求

先看效果图![这里写图片描述](http://img.blog.csdn.net/20151113113044545)基本分为左右+上下布局，主要点击左边的缩略图与下方的操作按钮，来实现大图的切换

上一张显示上一幅图
下一张显示下一幅图
第一张显示滴一张图
最后一张显示最后的一张图

dom

  <div class="m info">    <h1>类似幻灯片的图片播放</h1>    <div class="thumbnails">      <img src="images/Photomatic/thumbnails/001.jpg" alt=""/>      <img src="images/Photomatic/thumbnails/002.jpg" alt=""/>      <img src="images/Photomatic/thumbnails/003.jpg" alt=""/>      <img src="images/Photomatic/thumbnails/004.jpg" alt=""/>      <img src="images/Photomatic/thumbnails/005.jpg" alt=""/>    </div>    <div class="photoContainer">      <img id="photo" src="" alt=""/>    </div>    <div class="buttonBar">      <button id="fristbtn">第一张</button>      <button id="previousbtn">上一张</button>      <button id="nextbtn">下一张</button>      <button id="lastbtn">最后一张</button>    </div>  </div>

less

.thumbnails{  float: left;  width: 200px;  height: 600px;  overflow-y: auto;  img{    width: 100%;    height: 150px;  }}.photoContainer{  float: right;  width: 1000px;  height: 600px;  img{    width: 100%;    height: 100%;  }}.buttonBar{  clear: both;  padding: 20px;  float: right;}

js

脚本部分

$('.thumbnails img').photomatic({      photoElement:'#photo',      previousControl:'#previousbtn',      nextControl:'#nextbtn',      fristControl:'#fristbtn',      lastControl:'#lastbtn'    })

2.封装部分

(function(jquery){  var settings;  jquery.fn.photomatic=function(callerSettings){settings=jquery.extend({  photoElement:'#photomaticPhoto',  transformer:function(name){    return name.replace(/thumbnails/,'photo');  },  previousControl:null,  nextControl:null,  fristControl:null,  lastControl:null,},callerSettings||{});settings.photoElement=jquery(settings.photoElement);settings.thumbnails=this.filter('img');settings.thumbnails.each(function(n){  this.index=n;});settings.current=0;settings.thumbnails.click(function(event) {  /* Act on the event */  showPhoto((this.index)%settings.thumbnails.length);});jquery(settings.nextControl).click(function(event) {  /* Act on the event */  showPhoto((settings.current+1)%settings.thumbnails.length);});jquery(settings.previousControl).click(function(event) {  /* Act on the event */  showPhoto((settings.thumbnails.length+settings.current-1)%settings.thumbnails.length);});jquery(settings.fristControl).click(function(event) {  /* Act on the event */  showPhoto(0);});jquery(settings.lastControl).click(function(event) {  /* Act on the event */  showPhoto(settings.thumbnails.length-1);});showPhoto(0);return this;  };  var showPhoto=function(index){    settings.photoElement.attr('src',settings.transformer(settings.thumbnails[index].src));  settings.current=index;  }})(jQuery)

0 0