全新jquery多点滑动幻灯片——全屏动画animateSlide

首页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  src='/images/loading.gif' data-original="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  src='/images/loading.gif' data-original="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  src='/images/loading.gif' data-original="img/3.png" />-->      <div class="img" style="width: 500px; height: 390px; background: #aebdff; opacity: 0.6;"></div><!-- 实际项目中用上面注释的半透明png图片，目前临时用div代替图片 -->    </div>  </div>  <div class="animateSlideBtnL">&lt;</div>  <div class="animateSlideBtnR">&lt;</div></div>

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：全新jquery多点滑动幻灯片——全屏动画animateSlide

关键词：jquery