A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始



如何用jQuery实现一个简单的3D轮播图

写功能的时候查了很多的demo。
各有好坏。
项目要求的功能很多、整理的时候把一些特殊功能都去掉了。
只留下轮播的效果。
效果如下:

核心代码
[AppleScript] 纯文本查看 复制代码
.carousel .img{  overflow: hidden;  position: absolute;  transition: width 0.4s,height 0.4s,top 0.4s,left 0.4s,z-index 0.4s;
}

轮播的时候图片移动和缩放、归功于class---img
[AppleScript] 纯文本查看 复制代码
  <div class="carousel">        <!-- 轮播图片数量可变 -->
        <div class="img">
              img/text等        </div>
        <div class="img">
              img/text等        </div>
  </div>
盒子不一定非要用div、用ul、li啥的都一个样。只要class设置成img就行。哪怕你懒得在这里设置、js里循环大盒子carousel去设置img也是一样的。再或者carousel.li{...}设置、总之只要给他动画属性就行了。都一个样
之后、之后设定好各自图片的位置class(img1/2/3/4/5)就好了
在对各自位置class进行重新分配的时候、会由class--img的动画将其过渡到相应的位置。


我们的需求是展示3张图片、所以我只写了3个实体的位置class
反正自己需要啥样的排版、自己写几个class就行了
[AppleScript] 纯文本查看 复制代码
.slide .img1{    width: 0px;    height: 0px;    top: 30%;    left: -50%;    z-index: 1;
}.slide .img2{    width: 500px;    height: 200px;    top: 20%;    left: -20%;    z-index: 2;
}.slide .img3{    width: 840px;    height: 340px;    top: 10%;    left: 15%;    z-index: 3;
}.slide .img4{    width: 500px;    height: 200px;    top: 20%;    left: 60%;    z-index: 2;
}     
.slide .img5{  width: 0px;  height: 0px;  top: 30%;  left: 110%;  z-index: 1;
}

接下来。就交由js进行了
首先。要给每个img添加相应的唯一标记、方便接下来获取。
[AppleScript] 纯文本查看 复制代码
imgNub = $(".carousel .img").size();             
  //获取轮播图片数量
  for(i=0;i<imgNub;i++){
      $(".carousel .img:eq("+i+")").attr("imgId",i);
}

然后为相应位置的img配置初始位置。
我展示出来了3张。img2在左、img3在中间、img4在右侧。img1/5隐藏掉了。(如果你先展示出来5张、就再加个img0、img6。都一个样)
基本就是为了兼容各种数量的图片。给他们一个初始的位置。
嗯、截取一段意思意思。
[AppleScript] 纯文本查看 复制代码
 if(imgNub>3&&imgNub<6){      //img 1、2、3、4、(5)
      for(i=0;i<imgNub;i++){
          $(".carousel .img:eq("+i+")").addClass("img"+(i+1));
      }
  }
经过以上半手动设置。每个img有了自己的位置class以及唯一的标识id。
接下来、只要实现左右滑动就OK了。
[AppleScript] 纯文本查看 复制代码
//右滑动function right(){  var fy = [];  //我们需要将原来的每个位置class。依序放到数组里。
  for(i=0;i<imgNub;i++){      //imgId最初设置的时候是0-X。取出相应位置class的时候自然也是有序的
      fy=$(".carousel .img[imgId="+i+"]").attr("class");
  }  for(i=0;i<imgNub;i++){      if(i==0){          //将最左边图移动到最右边、实现轮播。0->5
          $(".carousel .img[imgId="+i+"]").attr("class",fy[imgNub-1]);
      }else{          //其他依次后(左)移:1->0 2->1....
          $(".carousel .img[imgId="+i+"]").attr("class",fy[i-1]);
      }
  }
  imgClicked();
}

最后就是左右两张图的点击事件、每次移动之后刷一遍就行:
[AppleScript] 纯文本查看 复制代码
$(".carousel .img").removeAttr("onclick");$(".carousel .img2").attr("onclick","left()");$(".carousel .img4").attr("onclick","right()");
最后、虽然我为了易懂把一些与效果无关的代码去掉了。但关于一些其他功能还是可以说两句。
比如文字:
你完全可以在每个img的box里写一个p。然后隐藏掉。
在每次刷新完之后赋值给需要展示的p。(其实点击跳转的事件也是一个道理、把img3--也就是屏幕中央的那个img的跳转单独打开就行了)
[AppleScript] 纯文本查看 复制代码
$('.list_title').html($('.img3').find(".li_title").text())[/i]
[i]$('.list_text').html($('.img3').find(".li_text").text())

自动轮播:
更没说的~加个定时器就行。
如果你要是干活、只想要一段代码。前端效果插件网站上一搜一大片、各种功能各种样式。
但是我看的都是万变不离其宗、所以我也没弄太多的功能上来。
这个demo是我觉得能讲清楚原理最简化的demo了。

9 个回复

倒序浏览
沙发
回复 使用道具 举报
差点看成长沙小姐姐

来自宇宙超级黑马专属苹果客户端来自宇宙超级黑马专属苹果客户端
回复 使用道具 举报
Hp_Yx 发表于 2017-5-7 22:58
差点看成长沙小姐姐

{:8_470:}
回复 使用道具 举报
Hp_Yx 发表于 2017-5-7 22:58
差点看成长沙小姐姐

{:8_470:}
回复 使用道具 举报
学习了   不错不错
回复 使用道具 举报
彭豆豆 发表于 2017-5-8 08:57
学习了   不错不错

回复 使用道具 举报
小姐姐   {:8_474:}
回复 使用道具 举报
{:8_470:}{:8_470:}{:8_470:}
回复 使用道具 举报
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马