廣告輪播是網頁設計中使用較多的一種效果。下面將介紹一種使用HTML制作廣告輪播的方法。
<html>
<head>
<style>
#slider {
overflow: hidden;
width: 500px;
height: 300px;
margin: auto;
}
#slider ul {
list-style: none;
}
#slider ul li {
float: left;
width: 500px;
height: 300px;
position: relative;
}
</style>
</head>
<body>
<div id="slider">
<ul>
<li><img src="image1.jpg"></li>
<li><img src="image2.jpg"></li>
<li><img src="image3.jpg"></li>
<li><img src="image4.jpg"></li>
<li><img src="image5.jpg"></li>
</ul>
</div>
<script>
var slider = document.getElementById("slider");
var inner = slider.getElementsByTagName("ul")[0];
var img = inner.getElementsByTagName("img");
var count = img.length;
var duration = 1;
var interval = 5000;
var timer;
function animate(obj, target) {
clearInterval(obj.timer);
var speed = target >obj.offsetLeft ? duration : -duration;
obj.timer = setInterval(function () {
if (Math.abs(target - obj.offsetLeft)<= Math.abs(speed)) {
obj.style.left = target + "px";
clearInterval(obj.timer);
} else {
obj.style.left = obj.offsetLeft + speed + "px";
}
}, 10);
}
function play() {
var currentIndex = 0;
img[0].parentNode.setAttribute("class", "active");
timer = setInterval(function () {
var nextIndex = (currentIndex + 1) % count;
inner.style.left = -nextIndex * 500 + "px";
animate(inner, -nextIndex * 500);
img[currentIndex].parentNode.removeAttribute("class");
img[nextIndex].parentNode.setAttribute("class", "active");
currentIndex = nextIndex;
}, interval);
}
play();
</script>
</body>
</html>以上就是使用HTML制作廣告輪播的全部代碼。需要注意的是，在CSS樣式中設置了#slider的寬度為500px和高度為300px，因此在body中放置的圖片的尺寸應該也是500px*300px。JS部分是通過修改inner的left值實現圖片輪播的。其中duration為每次輪播的距離，interval為輪播間隔。最后通過play函數實現動態輪播效果。
上一篇c json開源庫
下一篇c json常用操作