https://www.xuanmo.xin/1159.html

jQuery无缝滚动轮播插件

发布于 分类: Js & Jq案列 4 2312

前言

在平时写特效的时候,喜欢把一些东西封装成一个插件,方便下次使用,不喜欢在特效上边用插件,所以就自己写,这是封装的无缝滚动轮播插件,一共6个非必填参数:

 


// 参数名                      默认参数值
bannerBtnWrap:                $('.banner-btn-wrap'), //banner 中间圆点切换按钮容器
arrowLeftBtn:                 $('.banner-arrow-left'), //banner 左边切换按钮
arrowRightBtn:                $('.banner-arrow-right'), //banner右边切换按钮
wrapWidth:                    window.innerWidth, //banner图片的宽度,默认为window窗口宽度
autoBanner:                   false,  //是否开启自动轮播
time:                         5000, //图片切换间隔时间
transition:                   1000 // 图片过渡时间

 

html结构示例


<!--
    html结构说明,就拿下边的结构解释:
        .banner为整个banner区域的容器
        .banner-wrap为图片列表容器,不需要设置宽度,给子级元素设置好浮动js计算宽度
        .banner-list为图片列表
        .banner-btn-wrap按钮切换的容器
        .banner-arrow-left左边切换按钮
        .banner-arrow-right右边切换按钮
-->
<div id="banenr" class="banner">
    <ul class="banner-wrap clearfix">
        <li class="banner-list">
            <img src="http://file.xuanmo.xin/TT.jpg" width="100%" height="100%" alt="">
        </li>
        <li class="banner-list">
            <img src="http://file.xuanmo.xin/T1-lg.jpg" width="100%" height="100%" alt="">
        </li>
        <li class="banner-list">
            <img src="http://file.xuanmo.xin/T2-lg.jpg" width="100%" height="100%" alt="">
        </li>
    </ul>
    <!-- banner按钮容器 -->
    <ul class="banner-btn-wrap"></ul>
    <!-- banner切换箭头 -->
    <i class="arrow-btn banner-arrow-left">&lt;</i>
    <i class="arrow-btn banner-arrow-right">&gt;</i>
</div>

 

css部分


* {
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
}

li {
    list-style: none;
}

.clearfix::after {
    content: "";
    display: block;
    height: 0;
    clear: both;
}

.banner {
    overflow: hidden;
    position: relative;
    height: 100%;
}

.banner .banner-list {
    float: left;
    position: relative;
    width: 100%;
    height: 100%;
}

.banner .banner-btn-wrap {
    position: absolute;
    top: 90%;
    left: 50%;
}

.banner .banner-btn-wrap li {
    float: left;
    width: 12px;
    height: 12px;
    margin: 0 5px;
    border: 1px solid transparent;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}

.banner .banner-btn-wrap li.on {
    border-color: #fff;
    background: #008dd5;
}

.banner .arrow-btn {
    opacity: .6;
    position: absolute;
    top: 50%;
    margin-top: -29px;
    font-size: 50px;
    font-style: normal;
    color: #fff;
    -webkit-transition: 0.7s;
    -moz-transition: 0.7s;
    -ms-transition: 0.7s;
    -o-transition: 0.7s;
    transition: 0.7s;
    cursor: pointer;
}

.banner .arrow-btn:hover {
    opacity: 1;
}

.banner .arrow-btn.banner-arrow-left {
    left: -5%;
}

.banner .arrow-btn.banner-arrow-right {
    right: -5%;
}

.banner:hover .banner-arrow-left {
    left: 2%;
}

.banner:hover .banner-arrow-right {
    right: 2%;
}

 

js封装插件部分


(function($) {
  function Banner(el, options) {
    this.bannerWrap = el;
    this.bannerList = el.children();
    this.bannerBtnWrap = options.bannerBtnWrap || el.siblings('.banner-btn-wrap');
    this.bannerBtn = this.bannerBtnWrap.children();
    this.arrowLeftBtn = options.arrowLeftBtn;
    this.arrowRightBtn = options.arrowRightBtn;
    this.nTime = options.time;
    this.nTransitionTime = options.transition;
    this.nWindowWidth = options.wrapWidth;
    this.n = 1;
    this.x = 0;
    this._x = 0;
    this.oTimer = null;
    this.bAutoBanner = options.autoBanner;
  }

  Banner.prototype = {
    constrctor: Banner,
    // 初始化轮播
    init: function() {
      var This = this;
      // 生成banner按钮
      This.bannerList.each(function() {
        $(this).width(This.nWindowWidth);
        This.bannerBtnWrap.append('
  • '); }); // 拷贝第一张和最后一张分别到第一张前面和最后一张后边 This.bannerList.first().before(This.bannerList.last().clone().addClass('clone')); This.bannerList.last().after(This.bannerList.first().clone().addClass('clone')); // 重新获取banner This.bannerList = This.bannerWrap.children(); // 获取banner按钮 This.bannerBtn = $('li', This.bannerBtnWrap); // banner盒子计算宽度 This.bannerWrap.css({ width: This.bannerList.length * This.nWindowWidth + 'px', marginLeft: This.n * -This.nWindowWidth + 'px' }); // banner按钮盒子计算宽度 This.bannerBtnWrap.css({ width: This.bannerBtn.length * This.bannerBtn.outerWidth(true) + 'px', marginLeft: function() { return $(this).width() / -2 + 'px' } }).children('li:eq(0)').addClass('on'); // 是否自动轮播 This.bAutoBanner && This.autoBanner(this); This.resize(this).move(this).stop(this); }, resize: function(This) { // 窗口发生改变改变轮播宽度 $(window).on('resize', function() { This.nWindowWidth = This.bannerWrap.parent().width(); This.bannerList.each(function() { $(this).width(This.nWindowWidth); }); This.bannerWrap.css({ width: This.bannerList.length * This.nWindowWidth + 'px', marginLeft: This.n * -This.nWindowWidth + 'px' }); }); return This; }, move: function(This) { // 按钮切换功能 This.bannerBtn.mouseenter(function() { if (!This.bannerWrap.is(':animated')) { This.n = $(this).index() + 1; This.bannerBtn.eq(This.n - 1).addClass('on').siblings().removeClass('on'); This.bannerWrap.animate({ 'marginLeft': This.n * -This.nWindowWidth + 'px' }, This.nTransitionTime); } }); // 向左切换 This.arrowLeftBtn.click(function() { if (!This.bannerWrap.is(':animated')) { This.n--; if (This.n < 0) { This.n = This.bannerList.length - 3; This.bannerWrap.css('marginLeft', (This.bannerList.length - 2) * -This.nWindowWidth + 'px'); } This.bannerBtn.eq(This.n - 1).addClass('on').siblings().removeClass('on'); This.bannerWrap.animate({ 'marginLeft': This.n * -This.nWindowWidth + 'px' }, This.nTransitionTime); } }); // 向右切换 This.arrowRightBtn.click(function() { if (!This.bannerWrap.is(':animated')) { This.n++; if (This.n >= This.bannerList.length - 1) { This.n = 1; This.bannerWrap.css('marginLeft', (This.n - 1) * -This.nWindowWidth + 'px'); } This.bannerBtn.eq(This.n - 1).addClass('on').siblings().removeClass('on'); This.bannerWrap.animate({ 'marginLeft': This.n * -This.nWindowWidth + 'px' }, This.nTransitionTime); } }); // 移动端无缝滚动 This.bannerWrap.on('touchstart', function(e) { This.x = e.originalEvent.touches[0].pageX; }).on('touchmove', function(e) { // e.preventDefault(); This._x = e.originalEvent.touches[0].pageX; var differ = This.x - This._x > 0 ? 1 : 0; if (differ) { // 向左滑动 if (!$(this).is(':animated')) { This.n++; if (This.n >= This.bannerList.length - 1) { This.n = 1; $(this).css('marginLeft', (This.n - 1) * -This.nWindowWidth + 'px'); } This.bannerBtn.eq(This.n - 1).addClass('on').siblings().removeClass('on'); $(this).animate({ 'marginLeft': This.n * -This.nWindowWidth + 'px' }, This.nTransitionTime); } } else { // 向右滑动 if (!$(this).is(':animated')) { This.n--; if (This.n < 0) { This.n = This.bannerList.length - 3; $(this).css('marginLeft', (This.bannerList.length - 2) * -This.nWindowWidth + 'px'); } This.bannerBtn.eq(This.n - 1).addClass('on').siblings().removeClass('on'); $(this).animate({ 'marginLeft': This.n * -This.nWindowWidth + 'px' }, This.nTransitionTime); } } }); return this; }, autoBanner: function(This) { This.oTimer = setInterval(function() { This.arrowRightBtn.click(); }, This.nTime); return this; }, stop: function(This) { // 鼠标移入停止自动轮播 This.bannerWrap.parent().hover(function() { clearInterval(This.oTimer); }, function() { This.autoBanner(This); }); } } // 默认参数 var init = { arrowLeftBtn: $('.banner-arrow-left'), arrowRightBtn: $('.banner-arrow-right'), wrapWidth: window.innerWidth, autoBanner: false, time: 5000, transition: 1000 } $.fn.seamlessBanner = function(options) { if (this.children().length > 1) new Banner(this, $.extend(init, options)).init(); } }(jQuery));

     

    js运行代码

    
    $('.banner-wrap').seamlessBanner();
    

     

    DEMO展示

    作者专栏:Xuanmo

    前端爱好者,热爱前端开发,欢迎和我成为朋友。

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    https://www.xuanmo.xin/wp-content/themes/xuan/expression.php
    表情
    贴图
    表情加载中...

    换一张

    • 胡小乐 河北省保定市 联通

      回复

      很有用,虽然有的地方没有看懂,重要的是您的这个思维。。。非常感谢!!! /微笑 /kiss

      • xuanmo 上海市浦东新区 电信

        回复

        @胡小乐 那是之前写的,有很多地方不是很好

    • 离愁扼喉 黑龙江省齐齐哈尔市 联通

      回复

      /色

    已经没有了!