jQuery实现经典的网页3D轮播图封装功能【附源码下载】


Posted in jQuery onFebruary 15, 2019

本文实例讲述了jQuery实现的网页3D轮播图封装功能。分享给大家供大家参考,具体如下:

网页伪3D轮播图,其实就是轮播图旋转木马效果。其实在jquery插件库也有很多旋转木马的插件,但是博主封装的这个新的插件比起以上的都适应性更好。其适应性好表现在:调用灵活性高用法更简单,css样式都封装好了基本不用写,在body里面写ul>li>img标签即可,可设置参数多,甚至不同图片的大小都可以自适应轮播,各个浏览器兼容性好(包括IE,虽然我没测过IE8以下浏览器,不过IE8以上都没问题),好了,以下看代码和用法。

head引入两个文件,第一个是jquery的插件(这是1.11.0版本,当然其他版本也可以哦,不过低版本的相对IE兼容性更好),第二个是我封装好的javascript脚本

<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/Figure_3D.js" type="text/javascript" charset="utf-8"></script>

body里面插入轮播图,ul的id要为pic_play,当然我这里是7张图,你也可以增加减少图片,但是这里有一个重要问题是,图片数量要为单数,不能为偶数,否则会出问题,这是一个小小的bug。当然你也可以在li里面写<a><img src/></a>也是可以的。

<ul id="pic_play">
  <li><img src="img/dc1.jpg"/></li>
  <li><img src="img/dc2.jpg"/></li>
  <li><img src="img/dc3.jpg"/></li>
  <li><img src="img/dc4.jpg"/></li>
  <li><img src="img/dc5.jpg"/></li>
  <li><img src="img/dc6.jpg"/></li>
  <li><img src="img/dc7.jpg"/></li>
</ul>

css基本不用写,不过要习惯性给padding和margin归0

*{
  margin: 0;
  padding: 0;
  list-style: none;
}

重要封装脚本Figure_3D.js

//    ulwidth:父节点ul总宽度(number),
//    height:ul和图片的初始化最大高度(中间)(number),
//    liwidth:图片的初始化最大宽度(中间)(number),
//    minopacity:图片最小透明度(0~1),
//    minscale:图片最小缩放系数(0~1),
//    direction:默认轮播方向("left","right"),
//    speed:动画速度(number),
//    delayed:每张图片延时停留时间(number)(注:delayed>=speed),
//    mousestop:鼠标经过是否停止(false,true),
function init(ulwidth,height,liwidth,minopacity,minscale,direction,speed,delayed,mousestop){
  $("#pic_play").css({"position":"relative","width":ulwidth,"height":height});
  $("#pic_play>li").css({"position":"absolute","width":liwidth,"height":height});
  if($("#pic_play>li>a").size()>0){
    $("#pic_play>li>a").css("display","block");
  }
  if($("#pic_play>li>a>img").size()>0){
    $("#pic_play>li>a>img").css({"display":"block","width":"100%","height":"100%"});
  }else if($("#pic_play>li>img").size()>0){
    $("#pic_play>li>img").css({"display":"block","width":"100%","height":"100%"});
  }else return;
  var len=$("#pic_play>li").size();
  jsonstyle=[];
  var display=-1;
  var minopacity=minopacity;
  var opacitystep=(1-minopacity)/(Math.floor(len/2)-1);
  var minscale=minscale;
  var scalestep=(1-minscale)/(Math.floor(len/2));
  var Dvalue=Math.round((($("#pic_play").innerWidth()-$("#pic_play>li").eq(0).outerWidth())/2)/Math.floor(len/2));
  $("#pic_play>li").each(function(i){
    if(i<Math.floor(len/2)){
      var realoff=i*Dvalue;
      display++;
      var realwidth=Math.round(minscale*$("#pic_play>li").eq(i).outerWidth());
      var realheight=Math.round(minscale*$("#pic_play>li").eq(i).outerHeight());
      var realtop=Math.round(($("#pic_play>li").eq(Math.floor(len/2)).outerHeight()-realheight)/2);
      jsonstyle[i]={"realOff":realoff,"realIndex":display,"realOpacity":minopacity,"realWidth":realwidth,"realHeight":realheight,"realTop":realtop};
      $("#pic_play>li").eq(i).css({"left":realoff,"z-index":display,"opacity":minopacity,"width":realwidth,"height":realheight,"top":realtop});
      minopacity+=opacitystep;
      if(minopacity>=1){
        minopacity=1.0;
      }
      minscale+=scalestep;
    }else if(i==Math.floor(len/2)){
      display++
      var realwidth=Math.round(minscale*$("#pic_play>li").eq(i).outerWidth());
      var realheight=Math.round(minscale*$("#pic_play>li").eq(i).outerHeight());
  var realoff=Math.round(($("#pic_play").innerWidth()-$("#pic_play>li").eq(i).outerWidth())/2);
      jsonstyle[i]={"realOff":realoff,"realIndex":display,"realOpacity":1,"realWidth":realwidth,"realHeight":realheight,"realTop":0};
      $("#pic_play>li").eq(i).css({"left":realoff,"z-index":display,"opacity":1,"width":realwidth,"height":realheight,"top":0});
    }else{
      display--;
      minscale-=scalestep;
      var realwidth=Math.round(minscale*$("#pic_play>li").eq(i).outerWidth());
      var realheight=Math.round(minscale*$("#pic_play>li").eq(i).outerHeight());
      var realoff=Math.round($("#pic_play").innerWidth()-(realwidth+(len-1-i)*Dvalue));
      var realtop=Math.round(($("#pic_play>li").eq(Math.floor(len/2)).outerHeight()-realheight)/2);
      jsonstyle[i]={"realOff":realoff,"realIndex":display,"realOpacity":minopacity,"realWidth":realwidth,"realHeight":realheight,"realTop":realtop};
      $("#pic_play>li").eq(i).css({"left":realoff,"z-index":display,"opacity":minopacity,"width":realwidth,"height":realheight,"top":realtop});
      minopacity-=opacitystep;
    }
  });
  animationPlay(direction,speed,delayed);
  if(mousestop==true){
    animationStop(direction,speed,delayed);
  }
}
//offset:左右按钮分别距离ul左右边距(number),
//top:左右按钮距离ul上边距(number),
//direction:默认轮播方向("left","right"),一般和init里的一样,如果你不想点击后改变运动方向,
//speed:动画速度(number),一般和init里的一样,如果你不想点击后改变动画速度,
//delayed:每张图片延时停留时间(number)(注:delayed>=speed),一般和init里的一样,如果你不想点击后改变延时停留时间,
function btn(offset,top,direction,speed,deleyed){
  var leftbtn=$("<span></span>");
  leftbtn.css({"width":32,"height":32,"display":"inline-block","position":"absolute","left":offset,"top":top,"background":"url(img/slider-arrow.png) no-repeat -100px 0","cursor":"pointer","z-index":100});
  var rightbtn=$("<span></span>");
  rightbtn.css({"width":32,"height":32,"display":"inline-block","position":"absolute","right":offset,"top":top,"background":"url(img/slider-arrow.png) no-repeat 0 0","cursor":"pointer","z-index":100});
  $("#pic_play").append(leftbtn);
  $("#pic_play").append(rightbtn);
  leftbtn.hover(function(){
    $(this).css("background-position","-160px 0");
  },function(){
    $(this).css("background-position","-100px 0");
  });
  rightbtn.hover(function(){
    $(this).css("background-position","-60px 0");
  },function(){
    $(this).css("background-position","0 0");
  });
  leftbtn.click(function(){
    clearInterval(timeplay);
    $("#pic_play>li").stop(true);
    var li=$("#pic_play>li").first();
    $("#pic_play").append(li);
    $("#pic_play>li").each(function(list){
      $("#pic_play>li").eq(list).css("z-index",jsonstyle[list]["realIndex"]).animate({"left":jsonstyle[list]["realOff"],"opacity":jsonstyle[list]["realOpacity"],"width":jsonstyle[list]["realWidth"],"height":jsonstyle[list]["realHeight"],"top":jsonstyle[list]["realTop"]},speed);
    });
    animationPlay(direction,speed,deleyed);
  });
  rightbtn.click(function(){
    clearInterval(timeplay);
    $("#pic_play>li").stop(true);
    var li=$("#pic_play>li").last();
    $("#pic_play").prepend(li);
    $("#pic_play>li").each(function(list){
      $("#pic_play>li").eq(list).css("z-index",jsonstyle[list]["realIndex"]).animate({"left":jsonstyle[list]["realOff"],"opacity":jsonstyle[list]["realOpacity"],"width":jsonstyle[list]["realWidth"],"height":jsonstyle[list]["realHeight"],"top":jsonstyle[list]["realTop"]},speed);
    });
    animationPlay(direction,speed,deleyed);
  });
}
//JSON动画
function animationPlay(direction,speed,deleyed){
  timeplay=setInterval(function(){
    if(direction.toLowerCase()=="left"){
      var li=$("#pic_play>li").first();
      $("#pic_play").append(li);
    }else if(direction.toLowerCase()=="right"){
      var li=$("#pic_play>li").last();
      $("#pic_play").prepend(li);
    }else return;
    $("#pic_play>li").each(function(list){
      $("#pic_play>li").eq(list).css("z-index",jsonstyle[list]["realIndex"]).animate({"left":jsonstyle[list]["realOff"],"opacity":jsonstyle[list]["realOpacity"],"width":jsonstyle[list]["realWidth"],"height":jsonstyle[list]["realHeight"],"top":jsonstyle[list]["realTop"]},speed);
    });
  },deleyed);
}
function animationStop(direction,speed,delayed){
  $("#pic_play").mouseenter(function(){
    clearInterval(timeplay);
  });
  $("#pic_play").mouseleave(function(){
    animationPlay(direction,speed,delayed)
  });
}

脚本的调用方法,调用一个init函数初始化,定义的参数意义是:自定父节点ul总宽度(number),自定ul和图片的初始化最大高度(中间那图)(number),图片的初始化最大宽度(中间那图)(number),图片最小透明度(0~1),图片最小缩放系数(0~1),默认轮播方向("left","right"),动画速度ms(number),轮播图片延时停留时间ms(number)(注:这个参数必须大于动画速度),鼠标经过是否停止(false,true)。

$(function(){
  init(1300,600,600,0.7,0.5,"right",500,3000,false);
});

为了运行效果更为显眼,给ul加个边框居中吧。

#pic_play{
  position: relative;
  border: 1px solid black;
  margin: 30px auto;
}

看以下运行效果:这里其实每张图的大小都不一样啊,都可以自适应轮播了

jQuery实现经典的网页3D轮播图封装功能【附源码下载】

大家会发现没有左右切换的按钮?没关系,我们可以调用btn()函数。btn里面的参数意义分别是:左右按钮分别距离ul左右边距(number),左右按钮距离ul上边距(number),默认轮播方向("left","right")一般和init里的一样如果你不想点击后改变运动方向,动画速度ms(number)一般和init里的一样如果你不想点击后改变动画速度,每张图片延时停留时间ms(number)(注:这个参数必须大于动画速度)一般和init里的一样如果你不想点击后改轮播停留时间。

$(function(){
  init(1000,460,460,0.7,0.5,"right",500,3000,false);
  btn(40,230,"right",500,3000);
});

下面来看效果:

jQuery实现经典的网页3D轮播图封装功能【附源码下载】

如果想用自己的按钮款式,可以直接在我的btn封装函数里面换啊。

附:这里给出了一个完整测试实例(图片替换成了养眼的美女图片),可点击此处本站下载

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery实现的背景颜色渐变动画效果示例
Mar 24 jQuery
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 jQuery
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
学习jQuery中的noConflict()用法
Sep 28 jQuery
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
jQuery 选择器用法实例分析【prev + next】
May 22 jQuery
jQuery实现影院选座订座效果
Apr 13 jQuery
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 #jQuery
Jquery实现无缝向上循环滚动列表的特效
Feb 13 #jQuery
jquery无缝图片轮播组件封装
Nov 25 #jQuery
详解如何使用webpack打包多页jquery项目
Feb 01 #jQuery
JQuery中queue方法用法示例
Jan 31 #jQuery
AJAX在JQuery中的应用详解
Jan 30 #jQuery
jQuery访问json文件中数据的方法示例
Jan 28 #jQuery
You might like
第1次亲密接触PHP5(1)
2006/10/09 PHP
php5 mysql分页实例代码
2008/04/10 PHP
PHP CURL模拟GET及POST函数代码
2010/04/25 PHP
PHP的Yii框架使用中的一些错误解决方法与建议
2015/08/21 PHP
php导出生成word的方法
2015/12/25 PHP
CodeIgniter框架验证码类库文件与用法示例
2017/03/18 PHP
PHP实现的用户注册表单验证功能简单示例
2019/02/25 PHP
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
2010/04/13 Javascript
THREE.JS入门教程(6)创建自己的全景图实现步骤
2013/01/25 Javascript
javascript中的作用域和上下文使用简要概述
2013/12/05 Javascript
浅谈$(document)和$(window)的区别
2015/07/15 Javascript
浅谈JavaScript对象与继承
2016/07/10 Javascript
Vue数据驱动模拟实现1
2017/01/11 Javascript
在JS中如何把毫秒转换成规定的日期时间格式实例
2017/05/11 Javascript
AngularJS页面带参跳转及参数解析操作示例
2017/06/28 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
2018/10/12 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
2018/11/02 Javascript
jquery拖拽自动排序插件使用方法详解
2020/07/20 jQuery
Vue实现可移动水平时间轴
2020/06/29 Javascript
基于Vant UI框架实现时间段选择器
2020/12/24 Javascript
[01:35]辉夜杯战队访谈宣传片—LGD
2015/12/25 DOTA
python抓取某汽车网数据解析html存入excel示例
2013/12/04 Python
Python入门学习之字符串与比较运算符
2015/10/12 Python
python中异常报错处理方法汇总
2016/11/20 Python
python中的for循环
2018/09/28 Python
快速解决vue.js 模板和jinja 模板冲突的问题
2019/07/26 Python
python Django里CSRF 对应策略详解
2019/08/05 Python
浅谈tensorflow使用张量时的一些注意点tf.concat,tf.reshape,tf.stack
2020/06/23 Python
CSS3 完美实现圆角效果
2009/07/13 HTML / CSS
html5模拟平抛运动(模拟小球平抛运动过程)
2013/07/25 HTML / CSS
SQL数据库笔试题
2016/03/08 面试题
党员教师四风自我剖析材料
2014/09/30 职场文书
水电工程师岗位职责
2015/02/13 职场文书
Nginx Rewrite使用场景及配置方法解析
2021/04/01 Servers
python源码剖析之PyObject详解
2021/05/18 Python
java多态注意项小结
2021/10/16 Java/Android