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 相关文章推荐
js 通用javascript函数库整理
Aug 14 Javascript
js中substr,substring,indexOf,lastIndexOf的用法小结
Dec 27 Javascript
用C/C++来实现 Node.js 的模块(二)
Sep 24 Javascript
jQuery实现的tab标签切换效果示例
Sep 05 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
Dec 20 Javascript
微信小程序 PHP后端form表单提交实例详解
Jan 12 Javascript
jquery实现放大镜简洁代码(推荐)
Jun 08 jQuery
微信小程序页面生命周期详解
Jan 31 Javascript
JS在if中的强制类型转换方式
Jul 15 Javascript
JavaScript循环遍历你会用哪些之小结篇
Sep 28 Javascript
JavaScript遍历数组的方法代码实例
Jan 14 Javascript
Three.js实现雪糕地球的使用示例详解
Jul 07 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
php adodb分页实现代码
2009/03/19 PHP
IP138 IP地址查询小偷实现代码
2010/02/15 PHP
解决PHP超大文件下载,断点续传下载的方法详解
2013/06/06 PHP
PHP利用header跳转失效的解决方法
2014/10/24 PHP
CI框架中类的自动加载问题分析
2016/11/21 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
索趣科技的答案
2007/02/07 Javascript
JavaScript 获得选中文本内容的方法
2009/02/15 Javascript
javascript replace()正则替换实现代码
2010/02/26 Javascript
JS基础之undefined与null的区别分析
2011/08/08 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
2015/05/19 Javascript
js数组去重的方法汇总
2015/07/29 Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
2016/08/01 Javascript
AngularJS表格详解及示例代码
2016/08/17 Javascript
JS随机排序数组实现方法分析
2017/10/11 Javascript
对vue v-if v-else-if v-else 的简单使用详解
2018/09/29 Javascript
vue中keep-alive组件的入门使用教程
2019/06/06 Javascript
Vue axios获取token临时令牌封装案例
2020/09/11 Javascript
使用webpack和rollup打包组件库的方法
2021/02/25 Javascript
[02:54]DOTA2英雄基础教程 撼地者
2014/01/14 DOTA
Windows系统下安装Python的SSH模块教程
2015/02/05 Python
Python中join和split用法实例
2015/04/14 Python
django实现用户登陆功能详解
2017/12/11 Python
python中正则表达式的使用方法
2018/02/25 Python
python使用RNN实现文本分类
2018/05/24 Python
python调试神器PySnooper的使用
2019/07/03 Python
python3.7将代码打包成exe程序并添加图标的方法
2019/10/11 Python
python实现广度优先搜索过程解析
2019/10/19 Python
Python模拟登录之滑块验证码的破解(实例代码)
2019/11/18 Python
关于windows下Tensorflow和pytorch安装教程
2020/02/04 Python
美国快时尚彩妆品牌:Winky Lux(透明花瓣润唇膏)
2018/11/06 全球购物
牧马人澳大利亚官网:Wrangler澳大利亚
2019/10/08 全球购物
2015年119消防宣传日活动总结
2015/03/24 职场文书
2015年机关党委工作总结
2015/05/23 职场文书
七年级作文之秋游
2019/10/21 职场文书
Java并发编程之原子性-Atomic的使用
2022/03/16 Java/Android