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 相关文章推荐
javascript处理table表格的代码
Dec 06 Javascript
一个基于jQuery的树型插件(OrangeTree)使用介绍
May 03 Javascript
js正则表达式中test,exec,match方法的区别说明
Jan 29 Javascript
一个简单的全屏图片上下打开显示网页效果示例
Jul 08 Javascript
Bootstrap Table使用方法详解
Aug 01 Javascript
老生常谈原生JS执行环境与作用域
Nov 22 Javascript
javascript回调函数的概念理解与用法分析
May 27 Javascript
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
Sep 19 Javascript
微信小程序实现页面下拉刷新和上拉加载功能详解
Dec 03 Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
Nov 24 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
Sep 21 Javascript
Vue OpenLayer 为地图绘制风场效果
Apr 24 Vue.js
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
常用表单验证类,有了这个,一般的验证就都齐了。
2006/12/06 PHP
php随机生成数字字母组合的方法
2015/03/18 PHP
php实现的一段简单概率相关代码
2016/05/30 PHP
php支付宝在线支付接口开发教程
2016/09/19 PHP
jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
2010/10/20 Javascript
IE6下CSS图片缓存问题解决方法
2010/12/09 Javascript
javascript 常用功能总结
2012/03/18 Javascript
JavaSript中变量的作用域闭包的深入理解
2014/05/12 Javascript
浅谈 jQuery 事件源码定位问题
2014/06/18 Javascript
JavaScript合并两个数组并去除重复项的方法
2015/06/13 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
2016/05/10 Javascript
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
2016/05/31 Javascript
关于Angularjs中跨域设置白名单问题
2018/04/17 Javascript
vue刷新页面时去闪烁提升用户体验效果的实现方法
2018/12/10 Javascript
使用Sonarqube扫描Javascript代码的示例
2018/12/26 Javascript
微信小程序 swiper 组件遇到的问题及解决方法
2019/05/26 Javascript
[46:44]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
Python编写一个闹钟功能
2017/07/11 Python
[原创]教女朋友学Python(一)运行环境搭建
2017/11/29 Python
Python爬虫实现(伪)球迷速成
2018/06/10 Python
Python json模块dumps、loads操作示例
2018/09/06 Python
在PyCharm中控制台输出日志分层级分颜色显示的方法
2019/07/11 Python
python多线程共享变量的使用和效率方法
2019/07/16 Python
对tensorflow中cifar-10文档的Read操作详解
2020/02/10 Python
实现ECharts双Y轴左右刻度线一致的例子
2020/05/16 Python
python使用建议技巧分享(三)
2020/08/18 Python
python进行OpenCV实战之画图(直线、矩形、圆形)
2020/08/27 Python
美国购买肉、鸭、家禽、鹅肝和熟食网站:D’Artagnan
2018/11/13 全球购物
思想品德自我鉴定
2013/10/12 职场文书
旅游管理本科生求职信
2013/10/14 职场文书
电气工程和自动化自荐信范文
2013/12/25 职场文书
教师校本培训方案
2014/02/26 职场文书
房屋出租协议书
2014/04/10 职场文书
个人总结与自我评价
2015/02/14 职场文书
立秋之描写立秋的作文(五年级)
2019/08/08 职场文书
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
2021/04/29 HTML / CSS