歌词的无缝滚动
<!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>