展示页效果制作

嗯、先看一下效果图，大致就是点击图片，让点击的图片到达中间的位置

思路：

1、封装一个tab(n)函数，然图片排成上面的效果，n是几就代表第几张图片在中间的位置

2、封装两个函数，上一个和下一个

3、判断点击div时执行上一个还是下一个操作

     1）、记录鼠标点击时的位置 disX

     2）、封装一个函数计算中间的图片的右边到屏幕左侧的距离 disR

     3）、封装一个函数计算中间的图片的左边到屏幕左侧的距离 disL

     4）、disL>disX执行上一个函数，disR<disX时执行下一个函数

HTML代码：

<div id="wrap">
    <img src="img/0.png"/>
    <img src="img/1.png"/>
    <img src="img/2.png"/>
    <img src="img/3.png"/>
    <img src="img/4.png"/>
    <img src="img/5.png"/>
    <img src="img/6.png"/>
</div>

css代码：

<style>
        body{
            margin: 0;
            background-color: #999;
        }
        #wrap{
            height: 500px;
            background: url(img/bg.png) no-repeat center;
            background-size: 1800px 500px;
            position: relative;
            transform-style: preserve-3d;
            perspective: 800px;
            margin-top: 100px;
        }
        img{
            border: none;
            vertical-align: top;
        }
        #wrap img{
            width: 300px;
            height: 200px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -150px;
            margin-top: -100px;
            transition: .7s ease-in-out;
        }
    </style>

js代码：

<script>
    var imgs = document.getElementsByTagName("img");
    var len  = imgs.length;
    var now = 0 ;
    var target;
    setTimeout(function(){
        tab(now);
    },100)
var disR = disR(imgs[now]);
var disL = disL(imgs[now]);
var timer = null;

    for(let i=0; i<len;i++){
        imgs[i].onclick = function(ev){
            target = i;
            var ev = ev||event;
            var disX = ev.clientX;
            if(disR<disX){
                goNext();
            }else if(disL>disX){
                goPrev();
            }
        }
    }
    function disR(obj){//计算中间的图片右侧距离屏幕左侧的距离
        var left = obj.offsetLeft;
        var width = obj.offsetWidth;
        var dis = left+width;
        return dis;
    }
    function disL(obj){//计算中间的图片左侧距离屏幕左侧的距离
        var left = obj.offsetLeft;
        return left;
    }

    function goNext(){
        clearInterval(timer);//执行下一个函数的时候，要先清除掉上一个函数的定时器
        if(now == target){
            return;
        }
        now++;
        if(now>len-1){
            now = 0;
        }
        tab(now);
      timer = setInterval(function(){
            goNext();
        },500);
    }

    function goPrev(){
        clearInterval(timer);//执行上一个函数的时候，要先清除上一个函数的定时器
        if(now == target){
            return;
        }
        now--;
        if(now<0){
            now = len - 1;
        }
        tab(now);
        timer = setInterval(function(){
            goPrev();
        },500);
    }


    function tab(n){
        for (var i = 0; i < Math.floor(len/2); i++) {
            var Left = n - 1 - i;
            if(Left<0){
                Left = Left + len;
            }
            imgs[Left].style.transform = "translateX("+(-150*(i+1))+"px) translateZ("+(200-i*100)+"px) rotateY(30deg)";
            var Right = n + 1 + i;
            if(Right > len - 1){
                Right = Right - len;
            }
            imgs[Right].style.transform = "translateX("+(150*(i+1))+"px) translateZ("+(200-i*100)+"px) rotateY(-30deg)";
        }
        imgs[n].style.transform = "translateZ(300px)";
    }
</script>