3D图片切换

来源：互联网发布：科尔曼报告的调查数据编辑：程序博客网时间：2024/04/27 14:48

在网页中图片轮换效果有很多，今天分享下这个3d效果的图片轮换；
先给出效果图：
这里写图片描述
HTML代码：

<div class="box">    <div class="list">        <ul>            <li class="p7"><a href="#"><img src="img/1.png" alt="" /></a></li>            <li class="p6"><a href="#"><img src="img/2.png" alt="" /></a></li>            <li class="p5"><a href="#"><img src="img/3.png" alt="" /></a></li>            <li class="p4"><a href="#"><img src="img/44.jpg" alt="" /></a></li>            <li class="p3"><a href="#"><img src="img/55.jpg" alt="" /></a></li>            <li class="p2"><a href="#"><img src="img/66.jpg" alt="" /></a></li>            <li class="p1"><a href="#"><img src="img/77.jpg" alt="" /></a></li>        </ul>    </div>    <a href="javascript:;" class="prev btn"><</a>    <a href="javascript:;" class="next btn">></a>    <div class="buttons">        <a href="javascript:;"><span class="blue"></span></a>        <a href="javascript:;"><span></span></a>        <a href="javascript:;"><span></span></a>        <a href="javascript:;"><span></span></a>        <a href="javascript:;"><span></span></a>        <a href="javascript:;"><span></span></a>        <a href="javascript:;"><span></span></a>    </div></div>

CSS代码：

*{    margin: 0;    padding: 0;}.box{    margin-top: 300px;    width: 100%;    height: 340px;    position: relative;}.list{    width: 1200px;    height: 300px;    overflow: hidden;    position: absolute;    left: 50%;    margin-left: -600px;}.btn{    position: absolute;    top: 50%;    margin-top: -50px;    width: 60px;    height: 100px;    line-height: 100px;    font-size: 30px;    color: white;    text-decoration: none;    text-align: center;    background: rgba(0,255,0,.5);    cursor: pointer;}.next{    right: 0;}li{    position: absolute;    top: 0;    left: 0;    list-style: none;    opacity: 0;    transition: all 0.3s ease-out;}img{    width: 751px;    height: 300px;    border:none;    float: left;}.p1{    transform:translate3d(-224px,0,0) scale(0.81);}.p2{    transform:translate3d(0px,0,0) scale(0.81);    transform-origin:0 50%;    opacity: 0.8;    z-index: 2;}.p3{    transform:translate3d(224px,0,0) scale(1);    z-index: 3;    opacity: 1;}.p4{    transform:translate3d(449px,0,0) scale(0.81);    transform-origin:100% 50%;    opacity: 0.8;    z-index: 2;}.p5{    transform:translate3d(672px,0,0) scale(0.81);}.p6{    transform:translate3d(896px,0,0) scale(0.81);}.p7{    transform:translate3d(1120px,0,0) scale(0.81);}.buttons{    position: absolute;    width: 1200px;    height: 30px;    bottom: 0;    left: 50%;    margin-left: -600px;    text-align: center;    padding-top: 10px;}.buttons a{    display: inline-block;    width: 35px;    height: 5px;    padding-top: 4px;    cursor: pointer;}span{    display: block;    width: 35px;    height: 1px;    background: red;}.blue{    background: blue;}

JS代码：

var $a=$(".buttons a");var $s=$(".buttons span");var cArr=["p7","p6","p5","p4","p3","p2","p1"];var index=0;$(".next").click(    function(){    nextimg();    })$(".prev").click(    function(){    previmg();    })//上一张function previmg(){    cArr.unshift(cArr[6]);    cArr.pop();    //i是元素的索引，从0开始    //e为当前处理的元素    //each循环，当前处理的元素移除所有的class，然后添加数组索引i的class    $("li").each(function(i,e){        $(e).removeClass().addClass(cArr[i]);    })    index--;    if (index<0) {        index=6;    }    show();}//下一张function nextimg(){    cArr.push(cArr[0]);    cArr.shift();    $("li").each(function(i,e){        $(e).removeClass().addClass(cArr[i]);    })    index++;    if (index>6) {        index=0;    }    show();}//通过底下按钮点击切换$a.each(function(){    $(this).click(function(){        var myindex=$(this).index();        var b=myindex-index;        if(b==0){            return;        }        else if(b>0) {            /*             * splice(0,b)的意思是从索引0开始,取出数量为b的数组             * 因为每次点击之后数组都被改变了,所以当前显示的这个照片的索引才是0             * 所以取出从索引0到b的数组,就是从原本的这个照片到需要点击的照片的数组             * 这时候原本的数组也将这部分数组进行移除了             * 再把移除的数组添加的原本的数组的后面             */            var newarr=cArr.splice(0,b);            cArr=$.merge(cArr,newarr);            $("li").each(function(i,e){            $(e).removeClass().addClass(cArr[i]);            })            index=myindex;            show();        }        else if(b<0){            /*             * 因为b<0,所以取数组的时候是倒序来取的,也就是说我们可以先把数组的顺序颠倒一下             * 而b现在是负值,所以取出索引0到-b即为需要取出的数组             * 也就是从原本的照片到需要点击的照片的数组             * 然后将原本的数组跟取出的数组进行拼接             * 再次倒序,使原本的倒序变为正序             */            cArr.reverse();            var oldarr=cArr.splice(0,-b)            cArr=$.merge(cArr,oldarr);            cArr.reverse();            $("li").each(function(i,e){            $(e).removeClass().addClass(cArr[i]);            })            index=myindex;            show();        }    })})//改变底下按钮的背景色function show(){        $($s).eq(index).addClass("blue").parent().siblings().children().removeClass("blue");}//点击class为p2的元素触发上一张照片的函数$(document).on("click",".p2",function(){    previmg();    return false;//返回一个false值，让a标签不跳转});//点击class为p4的元素触发下一张照片的函数$(document).on("click",".p4",function(){    nextimg();    return false;});//          鼠标移入box时清除定时器$(".box").mouseover(function(){    clearInterval(timer);})//          鼠标移出box时开始定时器$(".box").mouseleave(function(){    timer=setInterval(nextimg,4000);})//          进入页面自动开始定时器timer=setInterval(nextimg,4000);

0 0