前端新手记录自己在网络上找到的前端练习项目。
项目简介
5个广告轮流播放，鼠标放上去会停止切换，鼠标移开继续轮播，也可以通过手动点击进行切换。
广告轮播.gif
html部分
html部分是一个盒子里面放一个列表，列表中是5个图片，并且图片的大小直接写在了里面。
<body>
<div id="box">
<div class="list">
<ul>
<li><img src="img/01.jpg" width="490" height="170" /></li>
<li><img src="img/02.jpg" width="490" height="170" /></li>
<li><img src="img/03.jpg" width="490" height="170" /></li>
<li><img src="img/04.jpg" width="490" height="170" /></li>
<li><img src="img/05.jpg" width="490" height="170" /></li>
</ul>
</div>
</div>
</body>
CSS部分
CSS部分通过将盒子大小恰好能装下一个图片，其余溢出分部隐藏来实现显示当前图片。
<style>
body, div, ul, li {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
body {
background: #000;
text-align: center;
font: 12px/20px Arial;
}
#box {
position: relative;
width: 492px;
height: 172px;
background: #fff;
border-radius: 5px;
border: 8px solid #fff;
margin: 10px auto;
cursor: pointer;
}
#box .list {
position: relative;
width: 490px;
height: 170px;
overflow: hidden;
}
#box .list ul {
position: absolute;
top: 0;
left: 0;
}
#box .list li {
width: 490px;
height: 170px;
overflow: hidden;
}
#box .count {
position: absolute;
right: 0;
bottom: 5px;
}
#box .count li {
color: #fff;
float: left;
width: 20px;
height: 20px;
cursor: pointer;
margin-right: 5px;
overflow: hidden;
background: #F90;
opacity: 0.7;
filter: alpha(opacity=70);
border-radius: 20px;
}
#box .count li.current {
color: #fff;
opacity: 1;
filter: alpha(opacity=100);
font-weight: 700;
background: #f60;
}
#tmp {
width: 100px;
height: 100px;
background: red;
position: absolute;
}
</style>
javascript部分
轮播的实现：定义一个定时器，每个3秒自动切换图片，通过点击也可以手动切换。
切换图片的实现：由于图片列表就在盒子中，通过改变列表的上下位移来改变盒子中显示的图片。位移改变的过程也通过一个定时器实现，感觉构思很好，学到了~~
<script type="text/javascript">
window.onload = function() {
var oBox = document.getElementById("box");
var oList = oBox.getElementsByTagName("ul")[0];
var aImg = oBox.getElementsByTagName("img");
var timer = playTimer = null;
var index = i = 0;
var bOrder = true;
var aTmp = [];
var aBtn = null;
//生成数字按钮
for(i = 0; i < aImg.length; i++) {
aTmp.push("<li>" + (i + 1) + "</li>");
}
var oCount = document.createElement("ul");
oCount.className = "count";
oCount.innerHTML = aTmp.join("");
oBox.appendChild(oCount);
aBtn = oBox.getElementsByTagName("ul")[1].getElementsByTagName("li");
//初始化状态
cutover();
for(i = 0; i < aBtn.length; i++) {
aBtn[i].index = i;
aBtn[i].onmouseover = function() {
index = this.index;
cutover();
}
}
function cutover() {
for(i = 0; i < aBtn.length; i++) {
aBtn[i].className = "";
}
aBtn[index].className = "current";
startMove(-(index * aImg[0].offsetHeight));
}
function next() {
bOrder ? index++ : index--;
if(index <= 0 ) {
index = 0;
bOrder = true;
}
else if(index >= aBtn.length - 1) {
index = aBtn.length - 1;
bOrder = false;
}
cutover();
}
playTimer = setInterval(next, 3000);
oBox.onmouseover = function() {
clearInterval(playTimer);
}
oBox.onmouseout = function() {
playTimer = setInterval(next, 3000);
}
function startMove(iTarget) {
clearInterval(timer);
timer = setInterval(function() {
doMove(iTarget);
}, 30);
}
function doMove(iTarget) {
var iSpeed = (iTarget - oList.offsetTop) / 10;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if(oList.offsetTop == iTarget) {
clearInterval(timer);
}
else {
oList.style.top = oList.offsetTop + iSpeed + "px";
}
}
}
</script>
总结
经常在网上看到轮播的图片，终于学习了一下实现方法。源码可在https://github.com/yunkai123/WebProjectStudy查看。
网友评论