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 相关文章推荐
JS 常用校验函数
Mar 26 Javascript
js string 转 int 注意的问题小结
Aug 15 Javascript
如何让一个json文件显示在表格里【实现代码】
May 09 Javascript
浅析JavaScriptSerializer类的序列化与反序列化
Nov 22 Javascript
清除浏览器缓存的几种方法总结(必看)
Dec 09 Javascript
基于JavaScript实现复选框的全选和取消全选
Feb 09 Javascript
JavaScript设计模式之代理模式详解
Jun 09 Javascript
详解Vue整合axios的实例代码
Jun 21 Javascript
Node.js中的child_process模块详解
Jun 08 Javascript
express框架下使用session的方法
Jul 31 Javascript
vue如何实现动态加载脚本
Feb 05 Javascript
Java 生成随机字符的示例代码
Jan 13 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
DOTA2 玩家自创拉野攻略 特色英雄快速成长篇
2020/04/20 DOTA
php中使用接口实现工厂设计模式的代码
2012/06/17 PHP
php内存缓存实现方法
2015/01/24 PHP
PHP整合七牛实现上传文件
2015/07/03 PHP
php技术实现加载字体并保存成图片
2015/07/27 PHP
PHPMailer发送邮件
2016/12/28 PHP
PHP实现的权重算法示例【可用于游戏根据权限来随机物品】
2019/02/15 PHP
php实现网页上一页下一页翻页过程详解
2019/06/28 PHP
xtree.js 代码
2007/03/13 Javascript
利用404错误页面实现UrlRewrite的实现代码
2008/08/20 Javascript
9个JavaScript评级/投票插件
2010/01/18 Javascript
JavaScript Distilled 基础知识与函数
2010/04/07 Javascript
iphone safari不支持position fixed的解决方法
2012/05/04 Javascript
在JS数组特定索引处指定位置插入元素
2014/07/27 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
2016/09/22 Javascript
浅谈Angular4中常用管道
2017/09/27 Javascript
生产制造追溯系统之在线打印功能
2019/06/03 Javascript
Vuex 模块化使用详解
2019/07/31 Javascript
vue-cli3.X快速创建项目的方法步骤
2019/11/14 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
2020/01/04 Javascript
[03:36]2014DOTA2 TI小组赛综述 八强诞生进军钥匙球馆
2014/07/15 DOTA
[54:06]OG vs TNC 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
简单解决Python文件中文编码问题
2015/11/22 Python
Python中的探索性数据分析(功能式)
2017/12/22 Python
Python中循环后使用list.append()数据被覆盖问题的解决
2018/07/01 Python
python 可视化库PyG2Plot的使用
2021/01/21 Python
python实现经典排序算法的示例代码
2021/02/07 Python
澳大利亚排名第一的狂热牛仔品牌:ONETEASPOON
2018/11/20 全球购物
写给女生的道歉信
2014/01/14 职场文书
元旦联欢会策划方案
2014/06/11 职场文书
班子查摆四风个人对照检查材料思想汇报
2014/10/04 职场文书
劳动保障个人工作总结
2015/03/04 职场文书
微信小程序和php的登录实现
2021/04/01 PHP
总结Pyinstaller打包的高级用法
2021/06/28 Python
Dashboard管理Kubernetes集群与API访问配置
2022/04/01 Servers
忘记Grafana不要紧2种Grafana重置admin密码方法详细步骤
2022/04/07 Servers