javascript - 轮播图的制作原理？
本文介绍了javascript - 轮播图的制作原理？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
如上图设计原型，网上找不到类似的轮播插件。
尝试自己制作，没有较好的js思路。
毕竟它跟大多数的轮播图有点差距：
1、首屏显示了三张图片。
2、左右图片仅显示一部份，如左图隐藏了左边部分，右图隐藏了右边部份。
3、每张图片之间均有一定的间距。
4、中间的大图比两边的图片显示尺寸变大。（所有图片都是16:9)
解决方案
唉~ 写了半天~ 累啊
<!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 > div {width: 432px;height: 243px;margin: 0 20px;opacity:0.6;transition: all 0.6s ease-in-out;background: #2dbe60;float: left;}
.father.moving > div {transition-duration: 0s;}
.father > div.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>
<div class="viewport">
<div class="father" id="father">
<div>A</div><!-- 1 -->
<div>B</div>
<div>C</div><!-- 3 -->
<div>D</div>
<div>E</div><!-- 5 -->
<div>F</div>
<div>G</div><!-- 7 -->
<!-- ^…^ -->
<div>A</div><!-- 1 -->
<div>B</div>
<div>C</div><!-- 3 -->
<div>D</div>
<div>E</div><!-- 5 -->
<div>F</div>
<div>G</div><!-- 7 -->
<!-- Counting is too hard. -->
<div>A</div><!-- 1 -->
<div>B</div>
<div>C</div><!-- 3 -->
<div>D</div>
<div>E</div><!-- 5 -->
<div>F</div>
<div>G</div><!-- 7 -->
</div>
<div class="left" id="left">:-o</div>
<div class="right" id="right">:-)</div>
</div>
<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>原理可以参考随后这篇文章新货！如何制作一个高效轮播图？
这篇关于javascript - 轮播图的制作原理？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
