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插件imgAreaSelect基础讲解
May 26 jQuery
jQuery实现下拉菜单的实例代码
Jun 19 jQuery
jquery+css实现简单的图片轮播效果
Aug 07 jQuery
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 jQuery
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
jquery图片预览插件实现方法详解
Jul 18 jQuery
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 jQuery
Jquery让form表单异步提交代码实现
Nov 14 jQuery
jQuery 实现扁平式小清新导航
Jul 07 jQuery
jQuery实现回到顶部效果
Oct 19 jQuery
jquery实现拖拽添加元素功能
Dec 01 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
在PHP中使用模板的方法
2008/05/24 PHP
php 判断访客是否为搜索引擎蜘蛛的函数代码
2011/07/29 PHP
php 抽象类的简单应用
2011/09/06 PHP
理解PHP中的stdClass类
2014/04/18 PHP
Windows下php+mysql5.7配置教程
2017/05/16 PHP
ThinkPHP5&amp;5.1框架关联模型分页操作示例
2019/08/03 PHP
让IE6支持min-width和max-width的方法
2010/06/25 Javascript
JavaScript中的Math.atan2()方法使用详解
2015/06/15 Javascript
JavaScript学习总结之JS、AJAX应用
2016/01/29 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
2017/12/01 Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
2018/03/06 Javascript
详解vuex的简单使用
2018/03/12 Javascript
vue使用echarts图表的详细方法
2018/10/22 Javascript
教你使用vue-cli快速构建的小说阅读器
2019/05/13 Javascript
移动端底部导航固定配合vue-router实现组件切换功能
2019/06/13 Javascript
关于angular浏览器兼容性问题的解决方案
2020/07/26 Javascript
js获取url页面id,也就是最后的数字文件名
2020/09/25 Javascript
简单谈谈python的反射机制
2016/06/28 Python
Python 常用 PEP8 编码规范详解
2017/01/22 Python
python妙用之编码的转换详解
2017/04/21 Python
numpy 计算两个数组重复程度的方法
2018/11/07 Python
使用Python实现跳一跳自动跳跃功能
2019/07/10 Python
Python通过递归获取目录下指定文件代码实例
2019/11/07 Python
Python创建一个元素都为0的列表实例
2019/11/28 Python
python selenium 获取接口数据的实现
2020/12/07 Python
Get The Label中文官网:英国运动时尚购物平台
2017/04/19 全球购物
主管职责范文
2013/11/09 职场文书
汽车制造与装配专业自荐信范文
2014/01/02 职场文书
目标管理责任书
2014/04/15 职场文书
交通安全标语
2014/06/06 职场文书
教师党员自我评价范文
2015/03/04 职场文书
幼儿园家长工作总结2015
2015/04/25 职场文书
幼儿园大班开学寄语(2016秋季)
2015/12/03 职场文书
2015元旦感言
2015/12/09 职场文书
Navicat for MySQL的使用教程详解
2021/05/27 MySQL
MYSQL如何查看进程和kill进程
2022/03/13 MySQL