jQuery插件实现图片轮播特效

 <div class="slider">
 <div class="ul-box">
  <ul>
  <li><a href="javascript:;"><img src="/UploadFiles/2021-04-02/1.jpg">

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 "nofollow" target="_blank" href="https://github.com/wwervin72/jQuery/tree/master/slider-2">https://github.com/wwervin72/jQuery/tree/master/slider-2

精彩专题分享：jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。