3D场景轮播特效

来源：互联网发布：zepto.js鼠标滑动事件编辑：程序博客网时间：2024/05/02 02:59

轮播实现

通过观看腾讯公开课学习制作3D场景轮播特效。

点击左右箭头可实现图片3D效果轮播

HTML代码：

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>3D场景轮播</title>    <link rel="stylesheet" type="text/css" href="css/3d-css.css"></head><body>    <div id="banner">        <ul>            <li class="first">                <img src="images/1.jpg">            </li>            <li class="second secRight">                <img src="images/2.jpg">            </li>            <li class="third thiRight">                <img src="images/3.jpg">            </li>            <li>                <img src="images/4.jpg">            </li>            <li>                <img src="images/5.jpg">            </li>            <li>                <img src="images/6.jpg">            </li>            <li class="third">                <img src="images/7.jpg">            </li>            <li class="second">                <img src="images/8.jpg">            </li>        </ul>        <div class="btn">            <div class="left"> < </div>            <div class="right"> > </div>        </div>    </div><script type='text/javascript' src="js/Jquery.js"></script><script type='text/javascript' src="js/banner.js"></script></body></html>

CSS代码：

* {    margin: 0;    padding: 0;}body {    background: black;}#banner {    position: relative;/*相对定位：参考物*/    width: 990px;    height: 540px;    /*background-color: #d0acac;*/    margin: 100px auto;}#banner ul li {    position: absolute;/*绝对定位*/    top: 190px;    left: 438px;    list-style: none;    width: 115px;    height: 170px;    border: 1px solid #ccc;    z-index: 1;}#banner ul li.first {    left: 315px;    top: 0;    width: 360px;    height: 540px;    z-index: 10;}#banner ul li.second {    left:64px;    top:35px;    width: 320px;    height: 480px;    z-index: 9;}#banner ul li.secRight {    left:606px;}#banner ul li.third {    width: 240px;    height: 320px;    left: 0;    top: 110px;    z-index: 8;}#banner ul li.thiRight {    left: 750px;}#banner ul li img {    width: 100%;    height: 100%;}.btn div {    position: absolute;    top: 50%;    width: 60px;    height: 70px;    background: rgba(0,0,0,.5);    color: #fff;    font-size: 50px;    font-weight: bold;    z-index: 100;    text-align: center;    cursor: pointer;/*鼠标手的形状*/    line-height: 70px;}.btn div.left {    left: 0;}.btn div.right {    right: 0;}

JS代码：

var $li = $("#banner ul li");var n = 0;var nowTime = new Date();$(".btn .left").click(function () {    if(new Date() - nowTime > 500) {        move(0);        nowTime = new Date;    }});$(".btn .right").click(function () {    if(new Date() - nowTime > 500) {        move(1);        nowTime = new Date;    }});function move(direction) {    var arrW = [], arrH = [], arrL = [], arrT = [], arrZ = [];    for(var i = 0; i < $li.length; i++) {        arrW[i] = $li.eq(i).css("width");        arrH[i] = $li.eq(i).css("height");        arrL[i] = $li.eq(i).css("left");        arrT[i] = $li.eq(i).css("top");        arrZ[i] = $li.eq(i).css("z-index");    }    // console.log(arrW);    for(var i = 0; i < $li.length; i++) {        if(direction == 0) {//0代表往左边移动            if(i == 7) {                n = 0;            }else {                n = i + 1;            }        } else if(direction == 1) {            if(i == 0) {                n = 7;            } else {                n = i - 1;            }        }        $li.eq(i).css("z-index", arrZ[n]);        $li.eq(i).animate({            "width" : arrW[n],            "height" : arrH[n],            "left" : arrL[n],            "top" : arrT[n]        }, 500);    }}

阅读全文

1 0