jQuery插件animateSlide制作多点滑动幻灯片


Posted in Javascript onJune 11, 2015

首页banner的酷炫效果多来自全屏大图的幻灯片动画,下面提供一种完美兼容的jquery动画特效:全新jquery多点滑动幻灯片——全屏动画animateSlide(代码完全原创)。

直接上代码,把html、css和jquery代码copy到页面上即可呈现完美画面。

html代码如下:

<div class="animateSlide">
  <div class="animateSlideImgWrap">
    <div class="animateSlideImgBox present">
      <p class="text1">亲,这是第一行标题</p>
      <p class="text2">AAAAAAAAAAAAAAAAAAAAA</p>
      <!--<img class="img" alt="" src="img/1.png" />-->
      <div class="img" style="width: 500px; height: 390px; background: #ffaeae; opacity: 0.6;"></div><!-- 实际项目中用上面注释的半透明png图片,目前临时用div代替图片 -->
    </div>
    <div class="animateSlideImgBox">
      <p class="text1">亲,这是一行宣传语</p>
      <p class="text2">BBBBBBBBBBBBBBBBBBBBB</p>
      <!--<img class="img" alt="" src="img/2.png" />-->
      <div class="img" style="width: 500px; height: 390px; background: #aeffb2; opacity: 0.6;"></div><!-- 实际项目中用上面注释的半透明png图片,目前临时用div代替图片 -->
    </div>
    <div class="animateSlideImgBox">
      <p class="text1">亲,这是一个奇迹啊</p>
      <p class="text2">CCCCCCCCCCCCCCCCCCCCC</p>
      <!--<img class="img" alt="" src="img/3.png" />-->
      <div class="img" style="width: 500px; height: 390px; background: #aebdff; opacity: 0.6;"></div><!-- 实际项目中用上面注释的半透明png图片,目前临时用div代替图片 -->
    </div>
  </div>
  <div class="animateSlideBtnL"><</div>
  <div class="animateSlideBtnR"><</div>
</div>

css代码如下:

.animateSlide {width: 100%; height: 390px; position: relative; background: #f5f5f5;}
.animateSlideImgWrap {width: 100%; height: 390px; position: absolute; z-index: 1; overflow: hidden;}
.animateSlideImgWrap .present {display: block;}
.animateSlideImgBox {width: 100%; height: 390px; position: absolute; z-index: 1; display: none;}
.animateSlideImgBox .text1 {font-family: Microsoft YaHei; font-size: 36px; line-height: 1.2em; color: #384cd0; position: absolute; top: 120px; z-index: 3; white-space: nowrap;}
.animateSlideImgBox .text2 {font-family: Microsoft YaHei; font-size: 26px; line-height: 1.2em; color: orange; position: absolute; top: 200px; z-index: 3; white-space: nowrap;}
.animateSlideImgBox .img {position: absolute; left: 470px; top: 0; z-index: 2;}
.animateSlideBtnL,
.animateSlideBtnR {
  width: 30px; height: 60px; line-height: 60px; font-size: 20px; font-weight: 700; text-align: center; background: #ddd;
  position: absolute; left: 30px; top: 150px; z-index: 6; cursor: pointer; display: none;
}
.animateSlideBtnR {left: auto; right: 20px;}

jquery代码如下:

(function($) {
  $.fn.animateSlide = function(options) {
    var defaults = {
      btnL: ".animateSlideBtnL",
      btnR: ".animateSlideBtnR",
      imgBox: ".animateSlideImgBox",
      animateTime: 500,
      delayTime: 5000,
      density: 1
    };
    var opts = $.extend(defaults, options);
    var widthWin = $(window).width();
    $(window).resize(function() {
      widthWin = $(window).width();
    });
    //
    this.on("mouseenter", function() {
      $(this).find(".animateSlideBtnL, .animateSlideBtnR").stop().fadeIn(400);
    }).on("mouseleave", function() {
      $(this).find(".animateSlideBtnL, .animateSlideBtnR").stop().fadeOut(400);
    });
    return this.each(function() {
      var _this = $(this);
      var _btnL = _this.find(opts.btnL);
      var _btnR = _this.find(opts.btnR);
      var _imgBox = _this.find(opts.imgBox);
      var _imgBoxCur = _imgBox.filter(".present");
      var _curText1 = _imgBoxCur.find(".text1"), _curText2 = _imgBoxCur.find(".text2"), _curImg = _imgBoxCur.find(".img");
      var _imgBoxNext = null, _nextText1 = null, _nextText2 = null, _nextImg = null;
      var index = _imgBox.index(_imgBoxCur) || 0;
      var size = _imgBox.size();
      var start = null;
      index++;
      if(index >= size) {
        index = 0;
      }
      _imgBoxNext = _imgBox.eq(index);
      _nextText1 = _imgBoxNext.find(".text1");
      _nextText2 = _imgBoxNext.find(".text2");
      _nextImg = _imgBoxNext.find(".img");
      _imgBox.find(".text1, .text2, .img").css("left", widthWin);
      _imgBoxCur.find(".text1, .text2").css("left", (widthWin - 980) / 2 + "px");
      _imgBoxCur.find(".img").css("left", (widthWin - 980) / 2 + 470 + "px");
      _btnR.on("click", function() {
        animateSlideFn();
      });
      _btnL.on("click", function() {
        animateSlideFn();
      });
      start = setTimeout(function() {
        animateSlideFn();
        start = setTimeout(arguments.callee, opts.delayTime);
      }, opts.delayTime);
      function animateSlideFn() {
        if(!(_imgBoxCur.find(".text1, .text2, .img").is(":animated") || _imgBoxNext.find(".text1, .text2, .img").is(":animated"))) {
          //当前帧动画
          _curText1.animate({
            left: parseInt(_curText1.css("left")) + 100
          }, opts.animateTime * 0.6, function() {
            _curText1.animate({
              left: "-510px"
            }, opts.animateTime);
          });
          setTimeout(function() {
            _curText2.animate({
              left: parseInt(_curText2.css("left")) + 100
            }, opts.animateTime * 0.6, function() {
              _curText2.animate({
                left: "-510px"
              }, opts.animateTime);
            });
          }, 200);
          setTimeout(function() {
            _curImg.animate({
              left: parseInt(_curImg.css("left")) + 200
            }, opts.animateTime * 0.6, function() {
              _curImg.animate({
                left: "-510px"
              }, opts.animateTime, function() {
                _imgBox.find(".text1, .text2, .img").css("left", widthWin);
                _imgBoxCur.removeClass("present");
              });
            });
          }, 400);
          //下一帧动画
          setTimeout(function() {
            _imgBoxNext.addClass("present");
            _nextText1.animate({
              left: (widthWin - 980) / 2 - 100
            }, opts.animateTime, function() {
              _nextText1.animate({
                left: (widthWin - 980) / 2
              }, opts.animateTime * 0.6);
            });
            setTimeout(function() {
              _nextText2.animate({
                left: (widthWin - 980) / 2 - 100
              }, opts.animateTime, function() {
                _nextText2.animate({
                  left: (widthWin - 980) / 2
                }, opts.animateTime * 0.6);
              });
            }, 200);
            setTimeout(function() {
              _nextImg.animate({
                left: (widthWin - 980) / 2 + 370
              }, opts.animateTime, function() {
                _nextImg.animate({
                  left: (widthWin - 980) / 2 + 470
                }, opts.animateTime * 0.6, function() {
                  index++;
                  if(index >= size) {
                    index = 0;
                  }
                  _imgBoxCur = _imgBox.filter(".present");
                  _imgBoxNext = _imgBox.eq(index);
                  _curText1 = _imgBoxCur.find(".text1");
                  _curText2 = _imgBoxCur.find(".text2");
                  _curImg = _imgBoxCur.find(".img");
                  _nextText1 = _imgBoxNext.find(".text1");
                  _nextText2 = _imgBoxNext.find(".text2");
                  _nextImg = _imgBoxNext.find(".img");
                });
              });
            }, 400);
          }, opts.density * 1200);
        }
      }
    });
  };
})(jQuery);

$(function() {
  $(".animateSlide").animateSlide({
    btnL: ".animateSlideBtnL",
    btnR: ".animateSlideBtnR",
    imgBox: ".animateSlideImgBox",
    animateTime: 500,
    delayTime: 6000,
    density: 0.9
  });
});
Javascript 相关文章推荐
window.showModalDialog使用手册
Jan 11 Javascript
(function(){})()的用法与优点
Mar 11 Javascript
JavaScript 事件系统
Jul 22 Javascript
Javascript表达式中连续的 &amp;&amp; 和 || 之赋值区别
Oct 17 Javascript
JS实现自动切换文字的导航效果代码
Aug 27 Javascript
JavaScript编程学习技巧汇总
Feb 21 Javascript
Javascript中级语法快速入手
Jul 30 Javascript
Bootstrap 实现查询的完美方法
Oct 26 Javascript
纯jQuery实现前端分页功能
Mar 23 jQuery
详解用函数式编程对JavaScript进行断舍离
Sep 18 Javascript
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
Dec 24 Javascript
javascript的this关键字详解
May 20 Javascript
简介JavaScript中的setDate()方法的使用
Jun 11 #Javascript
JQuery实现样式设置、追加、移除与切换的方法
Jun 11 #Javascript
在JavaScript中操作时间之getYear()方法的使用教程
Jun 11 #Javascript
JavaScript中getUTCSeconds()方法的使用详解
Jun 11 #Javascript
JQuery节点元素属性操作方法
Jun 11 #Javascript
JQuery包裹DOM节点的方法
Jun 11 #Javascript
JQuery替换DOM节点的方法
Jun 11 #Javascript
You might like
thinkPHP中create方法与令牌验证实例浅析
2015/12/08 PHP
php实现批量修改文件名称的方法
2016/07/23 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
fromCharCode和charCodeAt 方法
2006/12/27 Javascript
UpdatePanel和Jquery冲突的解决方法
2013/04/01 Javascript
关于删除时的提示处理(确定删除吗)
2013/11/03 Javascript
防止jQuery ajax Load使用缓存的方法小结
2014/02/22 Javascript
jQuery中ajax的post()方法用法实例
2014/12/26 Javascript
JavaScript的Date()方法使用详解
2015/06/09 Javascript
简介alert()与console.log()的不同
2015/08/26 Javascript
详解JavaScript的变量和数据类型
2015/11/27 Javascript
JQuery学习总结【一】
2016/12/01 Javascript
JavaScript cookie详解及简单实例应用
2016/12/31 Javascript
JS 在数组指定位置插入/删除数据的方法
2017/01/12 Javascript
Angular企业级开发——MVC之控制器详解
2017/02/20 Javascript
vue+iview写个弹框的示例代码
2017/12/05 Javascript
C#实现将一个字符转换为整数
2017/12/12 Javascript
当vue路由变化时,改变导航栏的样式方法
2018/08/22 Javascript
vue基础之事件v-onclick=&quot;函数&quot;用法示例
2019/03/11 Javascript
JavaScript从原型到原型链深入理解
2019/06/03 Javascript
ElementUI Tag组件实现多标签生成的方法示例
2019/07/08 Javascript
vuex的使用步骤
2021/01/06 Vue.js
python3 cvs将数据读取为字典的方法
2018/12/22 Python
Python3 关于pycharm自动导入包快捷设置的方法
2019/01/16 Python
Python分支语句与循环语句应用实例分析
2019/05/07 Python
Python的logging模块基本用法
2020/12/24 Python
Etam艾格英国官网:法国著名女装品牌
2019/04/15 全球购物
大门门卫岗位职责
2013/11/30 职场文书
故宫导游词
2015/01/31 职场文书
杭州黄龙洞导游词
2015/02/10 职场文书
纪委立案决定书
2015/06/24 职场文书
《鸡兔同笼》教学反思
2016/02/19 职场文书
PySwarms(Python粒子群优化工具包)的使用:GlobalBestPSO例子解析
2021/04/05 Python
CocosCreator如何实现划过的位置显示纹理
2021/04/14 Javascript
Pytorch实现图像识别之数字识别(附详细注释)
2021/05/11 Python
ipad隐藏软件app图标方法
2022/04/19 数码科技