javascript - 轮播图的制作原理？-PHP中文网问答

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

最近更新

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

javascript - 轮播图的制作原理？

黄舟 2017-04-11 11:41:15

[JavaScript讨论组]

982

如上图设计原型，网上找不到类似的轮播插件。
尝试自己制作，没有较好的js思路。
毕竟它跟大多数的轮播图有点差距：
1、首屏显示了三张图片。
2、左右图片仅显示一部份，如左图隐藏了左边部分，右图隐藏了右边部份。
3、每张图片之间均有一定的间距。
4、中间的大图比两边的图片显示尺寸变大。（所有图片都是16:9)

黄舟

人生最曼妙的风景，竟是内心的淡定与从容！

全部回复(11)

迷茫2017-04-11 11:43:15 11楼

唉~ 写了半天~ 累啊

<!DOCTYPE html><html>
<head>
  <meta http-equiv="Cache-Control" content="no-transform " /> 
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="chrome=1" />
  <meta name="renderer" content="webkit" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>轮播图 | 杰凯寇赞</title>
  <style>
  html,body {height: 100%}
  html {background: #222;color:#fff;} body {margin: 0;font-family: Roboto,Helvetica,Arial,Microsoft JhengHei,sans-serif}

  .viewport {width: 944px;height:283px;position: relative;overflow: hidden;}
  .father {width:3000%;height:100%;padding: 20px 0;box-sizing: border-box;transition: transform 0.6s ease-in-out;transform: translate3d(0,0,0);background: #ff5252;}
  .father.moving {transition-duration: 0s;}
  .father > p {width: 432px;height: 243px;margin: 0 20px;opacity:0.6;transition: all 0.6s ease-in-out;background: #2dbe60;float: left;}
  .father.moving > p {transition-duration: 0s;}
  .father > p.showing {opacity: 1;transform: scale3d(1.1, 1.1, 1);}

  .left, .right {width: 30px;height: 100%;line-height: 283px;user-select:none;text-align: center;cursor: pointer;background: rgba(0,0,0,0.15);position: absolute;top: 0;}
  .left {left: 0;} .right {right: 0;}
  </style>
</head>
<body>
  <p class="viewport">
    <p class="father" id="father">
      <p>A</p><!-- 1 -->
      <p>B</p>
      <p>C</p><!-- 3 -->
      <p>D</p>
      <p>E</p><!-- 5 -->
      <p>F</p>
      <p>G</p><!-- 7 -->
<!-- ^…^ -->
      <p>A</p><!-- 1 -->
      <p>B</p>
      <p>C</p><!-- 3 -->
      <p>D</p>
      <p>E</p><!-- 5 -->
      <p>F</p>
      <p>G</p><!-- 7 -->
<!-- Counting is too hard. -->
      <p>A</p><!-- 1 -->
      <p>B</p>
      <p>C</p><!-- 3 -->
      <p>D</p>
      <p>E</p><!-- 5 -->
      <p>F</p>
      <p>G</p><!-- 7 -->
    </p>
    <p class="left" id="left">:-o</p>
    <p class="right" id="right">:-)</p>
  </p>
<script type="text/javascript">
var father=document.getElementById("father"),
  sons=father.children,
  sonsLength=sons.length/3,
  showWidth=432+20*2, //432: width; 20*2: margin*2
  showingId=parseInt(sonsLength/2)+sonsLength-1,
  transform=-showingId*showWidth+showWidth/2,
  checkTime=new Date()

father.style.transform=`translate3d(${transform}px, 0, 0)`
sons[showingId].className="showing"

function go(nowShowingId, direction) {
  // Direction: "-1" stands for left, "1" stands for right.
  //+ Avoid continuous sliding
  if(new Date()-checkTime<700)return
  checkTime=new Date()
  //+ Standard show change
  sons[nowShowingId].className=""
  //- Change here
  nowShowingId=nowShowingId+direction
  showingId=nowShowingId;
  transform=nowShowingId*showWidth-showWidth/2
  father.style.transform=`translate3d(-${transform}px, 0, 0)`
  sons[nowShowingId].className="showing"
  //+ Special show change
  if(nowShowingId==1){
    showingId=sonsLength*2+1 // How does it works?
  }
  else if(nowShowingId==sonsLength*2+2){
    showingId=1+1 // Imagine the answer. (Use DevTools!
  }
  else {return}
  //- change here
  setTimeout(function(){
    father.classList.add("moving")
    sons[showingId].className="showing"
    setTimeout(function(){
      father.style.transform=`translate3d(-${showingId*showWidth-showWidth/2}px, 0, 0)`
      sons[nowShowingId].className=""
      setTimeout(function(){
        father.classList.remove("moving")
      },50) // =1.
    },530) // =2.
  },100) // =3. /= 1,2,3: Specified like that because of setTimeout's time error
}

document.getElementById("left").onclick=function (){go(showingId, -1)}
document.getElementById("right").onclick=function (){go(showingId, 1)}
</script>
</body></html>

原理可以参考随后这篇文章新货！如何制作一个高效轮播图？

赞 +0

添加回复

巴扎黑2017-04-11 11:43:15 10楼

思路和普通轮播是一样的
想办法给居中图片加上scale()

赞 +0

添加回复

PHP中文网2017-04-11 11:43:15 9楼

http://www.jsdaima.com/p-340....

http://www.zhangxinxu.com/stu...

http://www.zhangxinxu.com/wor...
这个是现实

赞 +0

添加回复

PHP中文网2017-04-11 11:43:15 8楼

轮播图插件的话，可以百度swiper，设置slidesPerView，来确定图片显示个数。额，设置两边显示部分图片？可以参考swiper源码，应该是设置 loop模式，slidesPerView设为auto吧。。。记不太清楚了，可以去swiper中文官网看一下

赞 +0

添加回复

迷茫2017-04-11 11:43:15 7楼

轮播图网上有很多插件可以去找找

像swipe swiper superSlide 等等有很多

轮播图原理都是一样的你只要会写一种另一种也就会了

网上如果没有你需要的这种插件的话你可以自己写一个轮播图

这个也就是一个大的p包含一个ul 然后显示几个li

每个li里边有一张图片

然后在设置初始位置的时候

你设置整个ul的left为li的(-width/2) 也就是整个ul向左挪动一段距离

然后再用按照常规的轮播图的做法

用setInterval控制运动就可以了

赞 +0

添加回复

阿神2017-04-11 11:43:15 6楼

插件到处都是自己找不要说没有

赞 +0

添加回复

伊谢尔伦2017-04-11 11:43:15 5楼

网上各种轮播图的源码都有很多啊，php中文网下载站

赞 +0

添加回复

ringa_lee2017-04-11 11:43:15 4楼

1、首屏显示3张图片

说明显示内容块的宽度大于一张图片的宽度

2、左右各显示一部分

说明当前显示的图片居中，这样两边还有空位，而图片与图片的距离不足以填满空白距离，因此下一张图片和前一张图片会显示部分出来。

3、每一张图片有间距

这里可以是margin，也可以是在做定位后left的时候，就把这个距离算进去了。

4、中间的大图

中间的大图没有透明度，表示它是当前显示的图片，因而会以完整图的形式显示，自然要比旁边的只有部分且带有透明的图要大。

总的来说，如果能在看到多张图片，那么它的margin或者是left的值比较小，使得非当前图片也会看到；如果值比较大，已经超过内容块了，那么你始终只有看到一张图片。

赞 +0

添加回复

PHP中文网2017-04-11 11:43:15 3楼

现在用纯css就可以实现了

赞 +0

添加回复

巴扎黑2017-04-11 11:43:15 2楼

思路：

1、确定总数：
你需要复制藏在背后的图片，比如轮播三张，这样是为了应付左右移动时图片过渡的情景，在左右要各自多复制一张图片。顺序是 3,1,2,3,1；

2、图片布局：
第一张图片的定位，每一张的间隔控制好，上面说的三张图片，最左的3和最右的1隐掉这样只能看到中间的，1,2,3;

3、动画控制：
在图片上做一个框，框内的显示，框外的不显示；
用css3的动画控制移动动画，动画要控制要做的最主要是对当前索引的控制；当前是什么，上一张是什么，下一张是什么，每次动画左右肯定有一张图片移动，比如，3,1,2,3,1 变成 1,2,3,1,2 或 2,3,1,2,3。这其中开始、中间、结束都有状态变化，这时候做好状态以及doc的控制。

做好以上三步差不多就出来这个效果，后期就是一些微调，比如动画时间快慢等细节的控制；

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>