歌詞的無縫滾動
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>無縫滾動</title>
<style>
#box{
width: 200px;
height: 120px;
margin: 100px auto;
border: 1px solid black;
position: relative;
overflow: hidden;
}
ul{
margin: 0;
padding: 0;
list-style: none;
position: absolute;
width: 100%;
left: 0;
top: 0;
}
li{
text-align: center;
height: 30px;
line-height: 30px;
}
</style>
</head>
<body>
<div id="box">
<ul id="content">
<li>千錘萬鑿出深山</li>
<li>烈火焚燒若等閒</li>
<li>粉身碎骨全不怕</li>
<li>要留清白在人間</li>
<li>千錘萬鑿出深山</li>
<li>烈火焚燒若等閒</li>
<li>粉身碎骨全不怕</li>
<li>要留清白在人間</li>
<li>千錘萬鑿出深山</li>
<li>烈火焚燒若等閒</li>
<li>粉身碎骨全不怕</li>
<li>要留清白在人間</li>
<li>千錘萬鑿出深山</li>
<li>烈火焚燒若等閒</li>
<li>粉身碎骨全不怕</li>
<li>要留清白在人間</li>
</ul>
</div>
<script>
var box = document.getElementById('box');
var ul = document.getElementById('content');
var n = 0;
var key = true;
//鼠標移入指定的區域內,歌詞暫停
box.onmouseenter = function(){
key = false;
};
//鼠標移出指定的區域內,歌詞繼續自動滑動
box.onmouseleave = function(){
key = true;
};
aa();
function aa() {
if(n<=-120){
n=0;
}
if(key){
n -= .2;
}
ul.style.top = n + 'px';
setTimeout(aa,13);
}
// 週期執行函數,每13毫秒就執行一次doit
// setInterval規定動畫的開始時間週期,而不是兩次動畫的間隔。
// 如果動畫本身的執行時間超過13,動畫會出問題。
// setInterval適合時鐘類的動畫
// setInterval(doit,13)
// var key = setInterval(doit,13);
// clearInterval(key);
// 延遲執行函數,等待13毫秒後執行一次doit。
// setTimeout(doit,13)
// 動畫的發動機
// aa();
// function aa() {
// //動畫的內容
// setTimeout(aa,13);
// }
</script>
</body>
</html>
效果圖
2.圖片橫向輪播
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖片輪播</title>
<style>
#box{
width: 400px;
height: 400px;
margin: 50px auto;
border: 1px solid black;
overflow: hidden;
}
ul{
margin: 0;
padding: 0;
list-style: none;
width: 9999px;
}
li{
float: left;
}
img{
width: 400px;
height: 400px;
float: left;
}
</style>
</head>
<body>
<div id="box">
<ul id="ul">
<li><img src="images/a1.jpg"></li>
<li><img src="images/a2.jpg"></li>
<li><img src="images/a3.jpg"></li>
<li><img src="images/a4.jpg"></li>
<li><img src="images/a5.jpg"></li>
<li><img src="images/a6.jpg"></li>
<li><img src="images/a1.jpg"></li>
</ul>
</div>
<script>
var ul = document.getElementById('ul');
var index=0;
var n;
aa();
function aa() {
//用三角函數的速度進行切換圖片
n = Math.PI/2;
setTimeout(bb,5000);
}
function bb() {
if(n > - Math.PI/2){
n -= 0.1;
ul.style.marginLeft = -400*index + (Math.sin(n)-1)*200 + 'px';
setTimeout(bb,13);
}else{
index = ++index%6;
ul.style.marginLeft = -400*index + 'px';
aa();
}
}
</script>
</body>
</html>
效果如圖:
3.圖片淡化切換
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖片輪播2</title>
<style>
#box{
width: 500px;
height: 500px;
border: 1px solid black;
margin: 50px auto;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var box = document.getElementById('box');
var arrImg = [
"images/a1.jpg",
"images/a2.jpg",
"images/a3.jpg",
"images/a4.jpg",
"images/a5.jpg",
"images/a6.jpg"
];
box.style.position = 'relative';
var newImg = document.createElement('img');
var oldImg = new Image();
box.appendChild(newImg);
box.appendChild(oldImg);
newImg.style.position = 'absolute';
newImg.style.left = '0px';
newImg.style.top = '0px';
newImg.style.zIndex = '1';
//自適應
newImg.style.width = box.clientWidth + 'px';
newImg.style.height = box.clientHeight + 'px';
oldImg.style.position = 'absolute';
oldImg.style.left = '0px';
oldImg.style.top = '0px';
oldImg.style.zIndex = '2';
//自適應
oldImg.style.width = box.clientWidth + 'px';
oldImg.style.height = box.clientHeight + 'px';
var index = 0;
var n;
aa();
function aa() {
//重新設置多次循環前的透明度的值爲1.及不透明
n = 1;
//修正舊圖的透明度爲1
oldImg.style.opacity = 1;
//舊圖
oldImg.src = arrImg[index];
//索引值加一
index = ++index % arrImg.length;
//新圖
newImg.src = arrImg[index];
setTimeout(bb,5000);
}
function bb() {
if(n > 0){
n -= 0.01;
//更改圖片的透明度
oldImg.style.opacity = n;
setTimeout(bb,13);
}else{
aa();
}
}
</script>
</body>
</html>
效果如圖;
4.圖片輪縮放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖片輪播3</title>
<style>
#box{
width: 500px;
height: 500px;
border: 1px solid black;
margin: 50px auto;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var box = document.getElementById('box');
var arrImg = [
"images/a1.jpg",
"images/a2.jpg",
"images/a3.jpg",
"images/a4.jpg",
"images/a5.jpg",
"images/a6.jpg"
];
box.style.position = 'relative';
var oldImg = new Image();
box.appendChild(oldImg);
oldImg.style.position = 'absolute';
oldImg.style.left = '0px';
oldImg.style.top = '0px';
oldImg.style.zIndex = '2';
oldImg.style.width = box.clientWidth + 'px';
oldImg.style.height = box.clientHeight + 'px';
var index = 0;
var n;
var key;
aa();
function aa() {
n = 500;
key = false;
oldImg.style.width = '500px';
oldImg.style.height = '500px';
oldImg.style.left = '0px';
oldImg.style.top = '0px';
oldImg.src = arrImg[index];
setTimeout(bb,5000);
}
function bb() {
if(n > -500){
n -= 20;
oldImg.style.width = Math.abs(n) + 'px';
oldImg.style.height = Math.abs(n) + 'px';
oldImg.style.left = Math.abs(Math.abs(n)/2-250) + 'px';
oldImg.style.top = Math.abs(Math.abs(n)/2-250) + 'px';
if(n <= 0 && key == false){
key = true;
index = ++index%arrImg.length;
oldImg.src = arrImg[index];
}
setTimeout(bb,13);
}else{
aa();
}
}
</script>
</body>
</html>