如何使用js实现电影海报画廊特效？

来源：互联网发布：海口关键词优化编辑：程序博客网时间：2024/06/05 06:04

js实现电影海报画廊特效

特效需求：

加载页面依次自动播放下一张海报
点击向前按钮，移动到钱一张海报
点击向后按钮，移动到后一张海报
点击底部圆点按钮，移动到对应的海报

所用重点函数/方法/语句（部分）

setInterval(),间歇调用
offsetWidth
三目运算符
for循环
e.style.left
getAttribute()
setAtribute()

以下是详细代码：

HTML5

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <link type="text/css" rel="stylesheet" href="default.css"></head><body><div id="pasterMovieGrid" >    <div id="paster">       <div id="paster_list">          <ul>            <li id="image_1"><a href="#" title="港囧"><img src="images/0510000056B4B9F167BC3D47E003E7A2.jpg"></a></li>            <li id="image_2"><a href="#" title="神探夏洛克"><img src="images/0510000056B5AE3067BC3D303301CC6D.jpg"></a></li>            <li id="image_3"><a href="#" title="寻龙决" ><img src="images/0510000056B094DB67BC3D5DC801A0AD.jpg"></a></li>            <li id="image_4"><a href="#" title="我是证人"><img src="images/0510000056BD439667BC3D0EDA041950.jpg"></a></li>            <li id="image_5"><a href="#" title="唐人街探案"><img src="images/0510000056BFD9E367BC3D1FC100EC07.jpg"></a></li>            <li id="image_6"><a href="#" title="幸存者"><img src="images/0510000056C1201967BC3D303B0E638E.jpg"></a></li>            <li id="image_7"><a href="#" title="老炮"><img src="images/0510000056C5651267BC3D3376045963.jpg"></a></li>            <li id="image_8"><a href="#" title="混蛋夜"><img src="images/0510000056CAFD6367BC3D4B6E01A52F.jpg"></a></li>          </ul>       </div>    </div>    <div id="pager">           <div  pagenum="1" class="current"></div>           <div  pagenum="2"></div>           <div  pagenum="3"></div>           <div  pagenum="4"></div>           <div  pagenum="5" ></div>           <div  pagenum="6"></div>           <div  pagenum="7"></div>           <div  pagenum="8"></div>    </div>    <div id="btnprev"></div>    <div id="btnnext"></div></div><script type="text/javascript" src="pasterMovieGrid.js"></script></body></html>

CSS3

*{    margin: 0;    padding: 0;}div#pasterMovieGrid{    position: absolute;    top: 100px;    left: 200px;    width: 700px;    height: 300px;}div#paster {    position: absolute;    width: 700px;    height: 300px;    overflow: hidden;}div#paster_list{    position: absolute;    width:5600px;    left: 0;    top: 0;}div#paster_list ul li{    float: left; /*避免html代码中的换行被解释为空格*/    display: inline-block;    width: 700px;    height: 300px;    list-style: none;}div#paster ul li img{    width: 700px;    height: 300px;}#pager{    position: absolute;    text-align: center;    width: 300px;    top: 280px;    left: 200px;}#pager div {    cursor: pointer;    display: inline-block;    width: 10px;    height: 10px;    margin: 0 5px;    border-radius: 10px;    -webkit-border-radius: 10px;    -moz-border-radius: 10px;    background-color: white;}#btnprev {    position: absolute;    top: 130px;    left: 0;    z-index: 100;    width: 45px;    height: 45px;    cursor: pointer;    background:url("images/0510000051AD63E96714C04A1400547A.png") no-repeat;}#btnnext {    position: absolute;    top: 130px;    left: 655px;;    z-index: 100;    width: 45px;    height: 45px;    cursor: pointer;    background:url("images/0510000051AD63F56714C04A1305CFEF.png") no-repeat;}.current{    background-color: cornflowerblue !important;}

/** * Created by 莫修 on 2016/2/10. */window.onload = function () {    var pasterMovieGrid = document.getElementById("pasterMovieGrid");    var paster_list = document.getElementById("paster_list"); //取得海报列表外围div    var li = paster_list.getElementsByTagName("ul")[0].getElementsByTagName("li");    var li_offsetWidth = li[0].offsetWidth; //取得海报列表每个<li></li>标签的offsetWidth    var btnprev = document.getElementById("btnprev"); //取得向前按钮    var btnnext = document.getElementById("btnnext"); //取得向后按钮    var pagenum_list = document.getElementById("pager").getElementsByTagName("div"); //取得底部圆点按钮    var autoMove = null;    //开始自动移动    autoMove=setInterval(function () {        moveNext();    }, 2000);    //当鼠标放在海报上时，停止自动移动    pasterMovieGrid.onmouseover = function () {        clearInterval(autoMove);    };    //当鼠标离开海报时，开始自动移动    pasterMovieGrid.onmouseout = function () {        autoMove = setInterval(function () {    //开始自动移动            moveNext();        }, 2000);    };    //当单击pagenum_list[k]按钮时，停止自动移动，并移动对应的海报    for(var k=0;k<pagenum_list.length;k++){        pagenum_list[k].onclick=function(){            clearInterval(autoMove);            for (var i = 0; i < pagenum_list.length; i++) {                pagenum_list[i].setAttribute("class", "");            }            this.setAttribute("class", "current");            pasterMove(-li_offsetWidth*(this.getAttribute("pagenum") - 1), 10);        };    }    //当单击btnprev按钮时，停止自动移动，并移动上一张海报    btnprev.onclick = function () {        clearInterval(autoMove);        movePrev();    };    //当单击btnnext按钮时，停止自动移动，并移动下一张海报    btnnext.onclick = function () {        clearInterval(autoMove);        moveNext();    };    function movePrev() {            clearInterval(autoMove);        //获得当前显示海报的pagenum属性        var pagenum = document.getElementById("pager").getElementsByClassName("current")[0].getAttribute("pagenum");        for (var i = 0; i < pagenum_list.length; i++) {            pagenum_list[i].setAttribute("class", "");        }        //如果为第一张海报，则单击后跳转到最后一张海报，否则，pagenum--        if (pagenum == 1) {            pagenum = 8;            pagenum_list[7].setAttribute("class", "current");            pasterMove(-4900, 5);        } else {            pagenum--;            var index = pagenum - 1;            pagenum_list[index].setAttribute("class", "current");            pasterMove(-li_offsetWidth*(pagenum - 1), 10);        }    }    function moveNext() {        //获得当前显示海报的pagenum属性        var pagenum = document.getElementById("pager").getElementsByClassName("current")[0].getAttribute("pagenum");        for (var i = 0; i < pagenum_list.length; i++) {            pagenum_list[i].setAttribute("class", "");        }        //如果为最后一张海报，则单击后跳转到第一张海报，否则，pagenum++        if (pagenum == 8) {            pagenum = 1;            pagenum_list[0].setAttribute("class", "current");            pasterMove(0, 5);        } else {            pagenum++;            var index = pagenum - 1;            pagenum_list[index].setAttribute("class", "current");            pasterMove(-li_offsetWidth * (pagenum - 1), 5);        }    }    var varTimer = null;    function pasterMove(destination,speed){        clearInterval(varTimer);        varTimer=setInterval(function(){            var paster_list = document.getElementById("paster_list");//取得海报列表外围div            var varSpeed = (destination - paster_list.offsetLeft) / speed;            varSpeed = varSpeed > 0 ? Math.ceil(varSpeed) : Math.floor(varSpeed);            //到达目的地  清除定时器            if (destination==paster_list.offsetLeft){                clearInterval(varTimer);            }else {paster_list.style.left = paster_list.offsetLeft + varSpeed + "px";}        },10)    }};

1 0