python软件开发/长沙官网网站推广优化
实现圣诞节活动轮播的页面
最近做了个项目，就是关于圣诞节活动的，里面有抽奖活动，还可以观看圣诞节轮播图，而现在我要讲的恰好正是关于如何实现圣诞节轮播的页面，其中单单只会页面的搭建还不够，还需要用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*5tupian.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);
}简单的圣诞节活动的轮播页面就完成了。