实现圣诞节活动轮播的页面

最近做了个项目，就是关于圣诞节活动的，里面有抽奖活动，还可以观看圣诞节轮播图，而现在我要讲的恰好正是关于如何实现圣诞节轮播的页面，其中单单只会页面的搭建还不够，还需要用js来实现轮播的效果。现在来看一下效果图，然后再看一下代码的写法。
效果图：
实现圣诞节活动轮播的页面

第一张图片是整体的构造，下面的五张图片分别是轮播图，因为轮播图都是动态图，截图的时候只能截图片，所以没办法了，只能这样截。
看完了效果图，有没有觉得好看？其实你也可以搭建出更好看的图片的。
HTML代码：
步骤：先给页面放一个最大的盒子来装内容，再给一个小的盒子来装轮播图，由于设置轮播图的代码一样，所以我写了一个来做样式，剩下的其他的设置的代码写法都一样的，只是图片不同，所以要改一下图片的名称。
注：写html代码的时候，实际要放五张图片，但是由于我设置轮播效果图的时候的js方法不一样，所以要放七张图片，就是在ul标签里面的第一个li标签里面是装着第五张图片，在第七个li标签里面装着第一张图片，中间的五张图片的顺序不变，从一到五的图片就是第一张图片到第五张图片。

<body style="min-width: 1510px;">
    <div class="container_chm"> 
        <div class="com3">
            @*轮播的大盒子*@
            <div class="showBox" id="showBox">
                <ul class="tupian" id="tupian" style="left:-720px;">
                    <li>
                        <a href="javascript:;">
                            <img src="~/images/4631adb77ae39849f100ad270db11a5c.gif" />
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div> 
</body>

Js代码：
设置轮播自动向左滚动，用定时器来设置图片之间多长时间执行一次。

var transfor = false;
var ind = 1;
var Lunbotimer;
window.onload = function () {
    autoPlay();
};
//图片轮播的代码
function com1Lunbo(offset) {
    transfor = true;
    var tupian = document.getElementById("tupian");
    var time = 300;
    var interval = 10;
    var speed = offset / (time / interval);
    var newLeft = parseInt(tupian.style.left) + offset;
    function go() {
        if ((speed > 0 && parseInt(tupian.style.left) < newLeft) || (speed < 0 && parseInt(tupian.style.left) > newLeft)) {
            tupian.style.left = parseInt(tupian.style.left) + speed + "px";
            setTimeout(go, interval);
        }
        else {
            transfor = false;
            if (newLeft < -3600) {//-720*5
                tupian.style.left = -720 + "px";
            }
            else {
                tupian.style.left = newLeft + "px";
            }
        }
    }
    go();
}
//一张图片轮播的时间和执行下一张图片
function autoPlay() {
    Lunbotimer = setInterval(function () {
        if (transfor) {
            return;
        }
        if (ind === 4) {
            ind = 1;
        }
        else {
            ind++;
        }
        com1Lunbo(-720);
//五秒执行一次
    }, 5000);
}

简单的圣诞节活动的轮播页面就完成了。

实现圣诞节活动轮播的页面

实现圣诞节活动轮播的页面

相关推荐