文章目录
女神美图循环播放的简单网页
功能陈述:
- 图片会自动循环播放。
- 点击向左向右可以改变图片循环播放的方向。
- 鼠标移到图片上,会暂停播放,移开后继续原方向循环播放。
效果图:
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//at.alicdn.com/t/font_3233091_vbj8k8jhtk.css">
<style>
.clearfix::after{
content: "";
display: block;
clear: both;
}
h1{
text-align: center;
color: pink;
}
#box{
position: fixed;
overflow: hidden;
width: 400px;
height: 500px;
box-sizing: content-box;
border: 20px solid pink;
border-radius: 5px;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
.iconfont{
color: pink;
font-size: 50px;
font-weight: bold;
}
.icon-xiangyou1{
position: fixed;
top: 350px;
right: 490px;
}
.icon-xiangzuo1{
position: fixed;
top: 350px;
left: 490px;
}
#container{
position: absolute;
width: 3200px;
}
img{
float: left;
width: 400px;
}
</style>
<script>
window.onload = function(){
var sContainer = document.getElementById('container');
var sLeft_move = document.getElementById('left_move');
var sRight_move = document.getElementById('right_move');
var left_num = 0;
var preSpeed = 0;
//控制速度,巧妙的一步
var Speed = 1;
//关键步骤之一,用来实现无缝滚动;
sContainer.innerHTML = sContainer.innerHTML + sContainer.innerHTML;
//循环播放定时器
var img_move = setInterval(function(){
left_num -= Speed;
if(left_num < -1600){
left_num = 0;//向左循环播放到最后一张图片后,迅速拉回到第一张图片;
}
else if(left_num>0){
left_num = -1600;//向右循环播放到第一张图片后,迅速拉回到最后一张图片;
}
//改变left值实现动画;
sContainer.style.left = left_num + 'px';
},15)
//向左按钮点击事件
sLeft_move.onclick = function(){
Speed = 1;
}
//点击向右按钮的事件
sRight_move.onclick = function(){
Speed = -1;
}
//鼠标移到图片上事件
sContainer.onmouseover =function(){
preSpeed = Speed;
Speed = 0;
}
// 鼠标移出图片事件
sContainer.onmouseout =function(){
Speed = preSpeed;
}
//用于关闭定时器
// clearInterval(img_move);
}
</script>
</head>
<body>
<h1>最美女神jisoo</h1>
<i class="iconfont icon-xiangzuo1" id="left_move"></i>
<div id="box">
<div id="container" class="clearfix">
<img src="./img/img1.jpg" alt="">
<img src="./img/img2.jpg" alt="">
<img src="./img/img3.jpg" alt="">
<img src="./img/img4.jpg" alt="">
</div>
</div>
<i class="iconfont icon-xiangyou1" id="right_move"></i>
</body>
</html>