jQuery插件实现图片轮播特效


Posted in Javascript onJune 16, 2016

好了废话不多说了,先看看效果图。

 jQuery插件实现图片轮播特效

HTML部分: 

<div class="slider">
 <div class="ul-box">
  <ul>
  <li><a href="javascript:;"><img src="img/1.jpg"/></a></li>
  <li><a href="javascript:;"><img src="img/2.jpg"/></a></li>
  <li><a href="javascript:;"><img src="img/3.jpg"/></a></li>
  <li><a href="javascript:;"><img src="img/4.jpg"/></a></li>
  <li><a href="javascript:;"><img src="img/5.jpg"/></a></li>
  <li><a href="javascript:;"><img src="img/6.jpg"/></a></li>
  </ul>
 </div>
 <div class="mask"></div>
 <div class="prev"><img src="img/btn_l.png"/></div>
 <div class="next"><img src="img/btn_r.png"/></div>
 </div>
 <script src="js/jquery-1.11.3.js"></script>
 <script src="js/slider.js"></script>
 <script>
 $('.slider').slider({
  width : 640, 
  height : 270, 
  during : 2000, //动画执行间隔
  speed : 500, //动画速度
  btnSize : 20, //底部遮罩层的按钮大小
  btnSpace : 10, //底部的按钮间隙
  direction : 1 //轮播方向默认为1,图片向左移动
 });
 </script>

CSS部分: 

*{
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
.slider{
 position: relative;
 overflow: hidden;
}
.slider ul{
 list-style: none;
 float: left;
}
.slider ul li{
 float: left;
}
.slider .mask{
 position: absolute;
 bottom: 0;
 width: 100%;
 background-color: rgba(0, 0, 0, .3);
}
.slider .mask .sliderBtn{
 position: absolute;
 border-radius: 50%;
 background-color: #fff;
 cursor: pointer;
 background: radial-gradient(white 20%, transparent 50%);
}
.slider .prev, .slider .next{
 position: absolute;
 width: 45px; 
 height: 100%;
 background-color: rgba(0, 0, 0, .2);
 cursor: pointer;
 top: 0;
 display: none;
}
.slider .prev{
 left: 0;
}
.slider .next{
 right: 0;
}
.slider .prev img, .slider .next img{
 position: absolute;
 top: 50%;
 left: 50%;
 margin-top: -22.5px;
 margin-left: -22.5px;
}

JS部分: 

(function ($) {
 $.fn.slider = function (setting) { //给jQuery的实例对象绑定一个slider方法
 var defaultSetting = {
  width : 640,
  height : 270,
  during : 3000,
  speed : 500,
  btnSize : 30,
  btnSpace : 10,
  direction : 1
 }
 setting = $.extend(true, {}, defaultSetting, setting); //用传入的参数替换掉默认的设置 
 return this.each(function (i, item) { 
  var _setInterval = window.setInterval; 
  window.setInterval = function (callback, timer, param) { //重写setInterval函数,让其可以传参
  var args = Array.prototype.slice.call(arguments, 2); 
  var _fn = function () {
   callback.apply(null, args);
  }
  return _setInterval(_fn, timer);
  }

  var _this = $(this),
  ulBox = $('.ul-box', this),
  ul = $('ul', this),
  li = $('li', ul),
  img = $('img', li),
  len = li.size(),
  mask = $('.mask', this),
  index = 0,   //用来控制按钮的下标
  flag = true,   //标识动画是否执行完成
  gap,    //执行动画的按钮下标和当前按钮的下标的差
  timer;    //计时器

  _this.width(setting.width).height(setting.height);
  ulBox.width(setting.width * 3 * len).height(setting.height).css({
  marginLeft: -setting.width * len
  });
  ul.width(setting.width * len).height(setting.height);
  img.width(setting.width).height(setting.height);
  mask.height(setting.btnSize + 2 * setting.btnSpace);

  //添加btn
  for(var i = 0, str = ''; i < len; i++){
  str += '<div class="sliderBtn"></div>';
  }
  mask.html(str);
  var ulFir = ul.clone(true);
  var ulSec = ul.clone(true);
  var sliderBtn = $('.sliderBtn', '.mask');
  ulBox.append(ulFir);
  ulBox.append(ulSec);
  sliderBtn.each(function (i, item) {
  $(item).css({
   width : setting.btnSize,
   height : setting.btnSize,
   top : setting.btnSpace,
   left : parseInt(setting.width - (setting.btnSize + setting.btnSpace *2) *len, 10) /2 + setting.btnSize * i + setting.btnSpace * i * 2 + setting.btnSpace
  });
  $(item).mouseenter(function () {
   gap = Math.abs(i - index);
   i > index ? (flag && ani(1, gap)) : (flag && ani(0, gap));
  })
  });
  btnAni(0);
  //按钮样式变化
  function btnAni (index) {
  $('.sliderBtn').css('background', 'radial-gradient(white 20%, transparent 50%)');
  $('.sliderBtn').eq(index).css('background', 'radial-gradient(white 10%, transparent 30%, white 70%)');
  }
  //动画
  function ani (direction, num) {
  if(flag){
   //默认1向左运动,0向右运动
   flag = false;
   var ulfir = $('ul', ulBox).eq(0);
   var left = parseInt(ulfir.css('margin-left'), 10);
   if(direction){
   index += num;
   index = index % len;
   left = left - num * setting.width;
   ulfir.animate({
    marginLeft: left
   }, setting.speed, function () {
    if(left <= -len * setting.width){
    ulfir = ulfir.remove(); 
    ulfir.css('margin-left', 0);
    ulBox.append(ulfir);
    }
    flag = true;
   });
   }else{
   index -= num;
   index = index <= -1 ? len - 1 : index;
   left = left + num * setting.width;
   ulfir.animate({
    marginLeft: left
   }, setting.speed, function () {
    if(left >= len * setting.width){
    var ulLast = $('ul', ulBox).eq(2).remove();
    ulLast.css('margin-left', 0);
    ulBox.prepend(ulLast);
    ulfir.css('margin-left', 0);
    }
    flag = true
   })
   }
   btnAni(index)
  }
  }
  //定时器
  timer = setInterval(ani, setting.during, setting.direction, 1);
  _this.hover(function () {
  $('.prev', this).css('display', 'block');
  $('.next', this).css('display', 'block');
  clearInterval(timer);

  }, function () {
  $('.prev', this).css('display', 'none');
  $('.next', this).css('display', 'none');
  timer = setInterval(ani, setting.during, setting.direction, 1);
  })
  $('.next').click(function () {
  flag && ani(1, 1);
  })
  $('.prev').click(function () {
  flag && ani(0, 1);
  })
 })
 }
})(jQuery)

以上就是差不多所有的代码了,一些比较关键的地方已经用注释好了,这里就不再叙述。

源码下载:https://github.com/wwervin72/jQuery/tree/master/slider-2

精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE6下通过a标签点击切换图片的问题
Nov 14 Javascript
js jq 单击和双击区分示例介绍
Nov 05 Javascript
js严格模式总结(分享)
Aug 22 Javascript
JavaScript使用forEach()与jQuery使用each遍历数组时return false 的区别
Aug 26 Javascript
详解JavaScript权威指南之对象
Sep 27 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
Mar 15 Javascript
Bootstrap实现的标签页内容切换显示效果示例
May 25 Javascript
JS+canvas动态绘制饼图的方法示例
Sep 12 Javascript
JS库之ParticlesJS使用简介
Sep 12 Javascript
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
Apr 16 Javascript
vue实现修改图片后实时更新
Nov 14 Javascript
javascript正则表达式之分组概念与用法实例
Jun 16 #Javascript
js学习阶段总结(必看篇)
Jun 16 #Javascript
原生js封装二级城市下拉列表的实现代码
Jun 16 #Javascript
jQuery获取剪贴板内容的方法
Jun 16 #Javascript
javascript作用域、作用域链(菜鸟必看)
Jun 16 #Javascript
全面理解JavaScript中的继承(必看)
Jun 16 #Javascript
深入浅析JS的数组遍历方法(推荐)
Jun 15 #Javascript
You might like
JSON在PHP中的应用介绍
2012/09/08 PHP
PHP生成json和xml类型接口数据格式
2015/05/17 PHP
在PHP中使用FastCGI解析漏洞及修复方案
2015/11/10 PHP
PHP请求Socket接口测试实例
2016/08/12 PHP
PHP实现无限分类的实现方法
2016/11/14 PHP
JavaScript 组件之旅(一)分析和设计
2009/10/28 Javascript
js实现多选项切换导航菜单的方法
2015/02/06 Javascript
如何高效率去掉js数组中的重复项
2016/04/12 Javascript
AngularJS应用开发思维之依赖注入3
2016/08/19 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
2016/10/10 Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
2016/11/07 Javascript
设置jquery UI 控件的大小方法
2016/12/12 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
2016/12/28 Javascript
使用yeoman构建angular应用的方法
2017/08/14 Javascript
jqueryUI tab标签页代码分享
2017/10/09 jQuery
原生JS实现Ajax跨域请求flask响应内容
2017/10/24 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
2017/10/26 Javascript
tween.js缓动补间动画算法示例
2018/02/13 Javascript
vue的token刷新处理的方法
2018/07/17 Javascript
详解mpvue中小程序自定义导航组件开发指南
2019/02/11 Javascript
微信小程序 setData 对 data数据影响问题
2019/04/18 Javascript
详解如何在vue+element-ui的项目中封装dialog组件
2020/12/11 Vue.js
Python 经典算法100及解析(小结)
2019/09/13 Python
python 模块导入问题汇总
2021/02/01 Python
python 实现有道翻译功能
2021/02/26 Python
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
2013/01/06 HTML / CSS
FORZIERI福喜利中国官网:奢侈品购物梦工厂
2019/05/03 全球购物
啤酒销售实习自我鉴定
2013/09/24 职场文书
机械化及自动化毕业生的自我评价分享
2013/11/06 职场文书
临床医师专业个人自我评价
2014/01/08 职场文书
理想点亮人生演讲稿
2014/05/21 职场文书
2015年师德表现自我评价
2015/03/05 职场文书
MongoDB日志切割的三种方式总结
2021/09/15 MongoDB
python 离散点图画法的实现
2022/04/01 Python
鲲鹏 CentOS 7 安装Python3.7
2022/05/11 Servers
PostgreSQL出现死锁该如何解决
2022/05/30 PostgreSQL