图片无缝滚动
2018-03-27 23:48
253 查看
今天给大家做一个简单的图片无缝滚动的教程，代码不多，关键逻辑要想明白，其他的都好做。做好的示例如下：
这是一个动图，主要逻辑如下：
1.刷新页面 自动向左移动
2.点击左右箭头 改变移动方向
3.鼠标移动上去 停止 移开继续移动
逻辑看上去简单，逻辑出来了，代码也就能出来了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无缝滚动</title>
<style type="text/css">
body,
ul {
margin: 0;
padding: 0;
}
.list_con {
width: 1000px;
height: 200px;
border: 1px solid #000;
margin: 10px auto 0;
background-color: #f0f0f0;
position: relative;
overflow: hidden;
}
.list_con ul {
list-style: none;
width: 2000px;
height: 200px;
position: absolute;
left: 0;
top: 0;
}
.list_con li {
width: 180px;
height: 180px;
float: left;
margin: 10px;
}
.btns_con {
width: 1000px;
height: 30px;
margin: 50px auto 0;
position: relative;
}
.left,
.right {
width: 30px;
height: 30px;
background-color: gold;
position: absolute;
left: -40px;
top: 124px;
font-size: 30px;
line-height: 30px;
color: #000;
font-family: 'Arial';
text-align: center;
cursor: pointer;
border-radius: 15px;
opacity: 0.5;
}
.right {
left: 1010px;
top: 124px;
}
</style>
以上这些都是初始化操作
下面的代码就是逻辑了：
<script type="text/javascript">
window.onload = function () {
// 1刷新页面 自动向左移动
// 2.点击左右箭头 改变移动方向
// 3.鼠标移动上去 停止 移开继续移动
// 获取要移动的列表的对象
var oList = document.getElementById("list");
var oBtn01 = document.getElementById("btn01"); //左箭头
var oBtn02 = document.getElementById("btn02");//右箭头
var oSlide = document.getElementById("slide");//大黑框
// 把列表5张图片 添加成2份
oList.innerHTML += oList.innerHTML;
// 开启一个定时器 每10ms执行一个移动
var timerId = setInterval(move, 10);
var left = 0; //初始位置
var speed = -2;//每10ms移动的大小
function move() {
// 每次移动 累加移动的距离
left += speed;
// 当前left向左移动超过-1000时 恢复到0 有循环的效果
if (left < -1000) {
left = 0;
}
// 向右移动 超过0时 恢复到-1000 有循环的效果
if (left > 0) {
left = -1000
}
// 改变列表的位置 就会有移动的效果
oList.style.left = left + 'px';
}
// 2 设置两个按钮点击事件
oBtn01.onclick = function () {
// 点击左箭头
speed = -2;
}
oBtn02.onclick = function () {
// 点击右箭头
speed = 2;
}
//3.鼠标移动上去 停止 移开继续移动
oSlide.onmouseenter = function () {
// 鼠标移动上去
// 把定时器关闭
console.log('1111')
clearInterval(timerId)
}
oSlide.onmouseleave = function () {
// 鼠标移开 重新开启定时器
// 注意timerId前面没有var 使用是上面 的全局变量
timerId = setInterval(move, 10);
}
}
</script>
</head>
<body>
<div class="btns_con">
<div class="left" id="btn01"><</div>
<div class="right" id="btn02">></div>
</div>
<div class="list_con" id="slide">
<ul id="list">
<li><a href=""><img src="images/goods001.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="images/goods002.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="images/goods003.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="images/goods004.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="images/goods005.jpg" alt="商品图片"></a></li>
</ul>
</div>
&l
a93d
t;/body>
代码就是这些，其中主要的部分我都备注了！
大家分析清楚需求，写出逻辑，代码就简单了。
在工作中也是这样，先确定下来需求，分析逻辑，在写代码。希望这篇文章能给刚进入编程界的程序猿们一个良好的启发
这是一个动图，主要逻辑如下：
1.刷新页面 自动向左移动
2.点击左右箭头 改变移动方向
3.鼠标移动上去 停止 移开继续移动
逻辑看上去简单，逻辑出来了，代码也就能出来了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无缝滚动</title>
<style type="text/css">
body,
ul {
margin: 0;
padding: 0;
}
.list_con {
width: 1000px;
height: 200px;
border: 1px solid #000;
margin: 10px auto 0;
background-color: #f0f0f0;
position: relative;
overflow: hidden;
}
.list_con ul {
list-style: none;
width: 2000px;
height: 200px;
position: absolute;
left: 0;
top: 0;
}
.list_con li {
width: 180px;
height: 180px;
float: left;
margin: 10px;
}
.btns_con {
width: 1000px;
height: 30px;
margin: 50px auto 0;
position: relative;
}
.left,
.right {
width: 30px;
height: 30px;
background-color: gold;
position: absolute;
left: -40px;
top: 124px;
font-size: 30px;
line-height: 30px;
color: #000;
font-family: 'Arial';
text-align: center;
cursor: pointer;
border-radius: 15px;
opacity: 0.5;
}
.right {
left: 1010px;
top: 124px;
}
</style>
以上这些都是初始化操作
下面的代码就是逻辑了：
<script type="text/javascript">
window.onload = function () {
// 1刷新页面 自动向左移动
// 2.点击左右箭头 改变移动方向
// 3.鼠标移动上去 停止 移开继续移动
// 获取要移动的列表的对象
var oList = document.getElementById("list");
var oBtn01 = document.getElementById("btn01"); //左箭头
var oBtn02 = document.getElementById("btn02");//右箭头
var oSlide = document.getElementById("slide");//大黑框
// 把列表5张图片 添加成2份
oList.innerHTML += oList.innerHTML;
// 开启一个定时器 每10ms执行一个移动
var timerId = setInterval(move, 10);
var left = 0; //初始位置
var speed = -2;//每10ms移动的大小
function move() {
// 每次移动 累加移动的距离
left += speed;
// 当前left向左移动超过-1000时 恢复到0 有循环的效果
if (left < -1000) {
left = 0;
}
// 向右移动 超过0时 恢复到-1000 有循环的效果
if (left > 0) {
left = -1000
}
// 改变列表的位置 就会有移动的效果
oList.style.left = left + 'px';
}
// 2 设置两个按钮点击事件
oBtn01.onclick = function () {
// 点击左箭头
speed = -2;
}
oBtn02.onclick = function () {
// 点击右箭头
speed = 2;
}
//3.鼠标移动上去 停止 移开继续移动
oSlide.onmouseenter = function () {
// 鼠标移动上去
// 把定时器关闭
console.log('1111')
clearInterval(timerId)
}
oSlide.onmouseleave = function () {
// 鼠标移开 重新开启定时器
// 注意timerId前面没有var 使用是上面 的全局变量
timerId = setInterval(move, 10);
}
}
</script>
</head>
<body>
<div class="btns_con">
<div class="left" id="btn01"><</div>
<div class="right" id="btn02">></div>
</div>
<div class="list_con" id="slide">
<ul id="list">
<li><a href=""><img src="images/goods001.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="images/goods002.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="images/goods003.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="images/goods004.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="images/goods005.jpg" alt="商品图片"></a></li>
</ul>
</div>
&l
a93d
t;/body>
代码就是这些，其中主要的部分我都备注了！
大家分析清楚需求，写出逻辑，代码就简单了。
在工作中也是这样，先确定下来需求，分析逻辑，在写代码。希望这篇文章能给刚进入编程界的程序猿们一个良好的启发
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 图片向左无缝滚动
- Jquery+css实现图片无缝滚动轮播
- JS图片滚动代码（无缝、平滑）
- js实现图片无缝滚动特效
- jQuery动画效果实现图片无缝连续滚动
- js图片无缝滚动代码
- [学习记录]JS图片滚动代码（无缝、平滑）
- 图片横向无缝滚动
- 图片循环滚动代码(无缝滚动)(分别向上、下、左、右)
- javascrip练习——图片的无缝滚动
- 图片无缝滚动js
- 图片无缝滚动代码(DIV+CSS+JavaScript)
- js实现图片无缝滚动
- JS图片无缝滚动
- js:四个方向无跳动/无缝滚动,支持图片/html串,支持延时缓慢翻页,ff/ie测试 -- 2012-1-16改
- 图片无缝滚动修正
- marquee图片无缝拼接滚动
- javascript实现图片无缝滚动（scrollLeft的用法介绍）
- jQuery动画效果实现图片无缝连续滚动
- DIV+CSS+JS实现图片<ul><li></li></ul>无缝滚动代码