JavaScript实现简单轮播图动画
运行效果：
源代码:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
</head>
<style type="text/css">
* {
margin: 0px;
padding: 0px
} #container {
margin: 30px auto;
width: 1280px;
height: 720px;
position: relative;
overflow: hidden;
} #inner-list {
width: 400%;
position: absolute;
top: 0;
left: 0;
} #inner-list li {
float: left;
} #dot-list {
position: absolute;
bottom: 20px;
right: 20px; } #dot-list li {
float: left;
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
line-height: 20px;
text-align: center;
background: rgba(255, 255, 255, .3);
cursor: pointer;
margin-right: 10px;
} #dot-list li.cur {
background: rgba(255, 255, 255, .6);
} .btn-ctrl {
position: absolute;
cursor: pointer;
top: 50%;
font-size: 36px;
color: red;
font-weight: 500;
z-index: 2;
} #btn-prev {
left: 0px;
} #btn-next {
right: 0px;
}
</style>
<body>
<div class="container" id="container">
<div id="btn-prev" class="btn-ctrl"><</div>
<div id="btn-next" class="btn-ctrl">></div>
<ul id="inner-list">
<li><img src="https://w.wallhaven.cc/full/nz/wallhaven-nzy6g4.jpg" alt=""/></li>
<li><img src="https://w.wallhaven.cc/full/0w/wallhaven-0w6z64.jpg" alt=""/></li>
<li><img src="https://w.wallhaven.cc/full/42/wallhaven-421zm0.jpg" alt=""/></li>
</ul>
<ul id="dot-list"></ul>
</div> <script type="text/javascript">
window.onload = function () {
var eleInners = document.getElementById('inner-list'),
eleDots = document.getElementById('dot-list'),
liImgs = eleInners.getElementsByTagName('li'),
liDots = eleDots.children,
elePrev = document.getElementById('btn-prev'),
eleNext = document.getElementById('btn-next'),
LI_WIDTH = liImgs[0].offsetWidth,
TIME_DURATION = 3000,
interval = null,
index = 0,
circle = 0;
//首先是克隆
eleInners.appendChild(liImgs[0].cloneNode(true));
//生成小点点
for (var i = 0, len = liImgs.length - 1; i < len; i++) {
var li = document.createElement('li');
li.innerHTML = i + 1;
eleDots.appendChild(li);
}
//第一个点高亮
liDots[0].className = 'cur'; //接着是动画，用差值和offsetLeft值和移动的值，给一个speed让它移动
function animate(obj, targetPlace) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
//判断移动的位置是向左移动还是向右移动
var speed = obj.offsetLeft > targetPlace ? -15 : 15;
var result = targetPlace - obj.offsetLeft;
//只要移动的差值大于speed，那么就一直让obj.style.left 改变
if (Math.abs(result) > Math.abs(speed)) {
obj.style.left = obj.offsetLeft + speed + 'px'
} else {
//否则如果已经移动的，obj.offsetleft与要移动的位置十分接近了，
obj.style.left = targetPlace + 'px';
clearInterval(obj.timer);
}
}, 10) } //接着定时器
interval = setInterval(autoplay, 5000); //向左的autoplay
function autoplay() {
index++;
if (index > liImgs.length - 1) {
eleInners.style.left = 0;//赶快跳回去
index = 1;//找到第二张图片
}
animate(eleInners, -index * LI_WIDTH);
circle++; if (circle >= liImgs.length - 1) {
circle = 0;//circle回到第一个点
}
for (var i = 0, len = liDots.length; i < len; i++) {
liDots[i].className = ''; }
liDots[circle].className = 'cur';
} //向右移动
function moveright() {
index--;
if (index < 0) {
eleInners.style.left = -(liImgs.length - 2) * LI_WIDTH + 'px';
index = liImgs.length - 2;//找到倒数第二张图片
}
animate(eleInners, -index * LI_WIDTH);
circle--;
if (circle < 0) {
circle = liImgs.length - 2;//circle回到最后一个点
}
for (var i = 0, len = liDots.length; i < len; i++) {
liDots[i].className = '';
}
liDots[circle].className = 'cur';
} // 鼠标移入，清除定时器
eleInners.addEventListener('mouseenter', function (event) {
clearInterval(interval);
});
// 鼠标移出，开启定时器
eleInners.addEventListener('mouseleave', function (event) {
interval = setInterval(autoplay, 5000);
});
// 点击dots
eleDots.addEventListener('click', function (event) {
clearInterval(interval);
var target = event.target;
var currentTarget = event.currentTarget;
index = target.innerHTML - 0 - 1;
circle = index;
for (var i = 0, len = liDots.length; i < len; i++) {
liDots[i].className = '';
}
liDots[circle].className = 'cur'
animate(eleInners, -index * LI_WIDTH);
});
elePrev.addEventListener('click', function (event) {
clearInterval(interval);
moveright();
interval = setInterval(autoplay, 5000)
});
eleNext.addEventListener('click', function (event) {
clearInterval(interval);
autoplay();
interval = setInterval(autoplay, 5000);
});
}
</script>
</body>
</html>
JavaScript实现简单轮播图动画的更多相关文章
- JS---案例：简单轮播图
案例:简单轮播图 div叫盒子,里面包了2个小盒子,一个是inner,一个是square inner的div是放ul,里面有li,a,和图片 square的div里面放span,是轮播图的小点 < ...
- javascript原生js轮播图
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- javascript简单轮播图
**轮播图实现原理: 通过多张图片平铺,用overflow:hidden只显示一张图片.其他的隐藏,无缝滚动用定时器改变元素的left值让图片呈现左右滚动的效果.** HTML布局和内容: 1.容器c ...
- （新手向）基于Bootstrap的简单轮播图的手机实现
个人电脑里存了不少适合手机欣赏的图片,但是放手机里看是件很占据资源的事.鉴于家里有一台电脑经常开着,正好用来做家庭局域网共享,于是笔者就设想通过一种比较简单环保的思路.通过手机访问电脑内的图片. 首先 ...
- 手把手原生js简单轮播图
在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...
- js写的简单轮播图
这个轮播图代码是从网上找来的,专门找了个写法简单的,只是作为一个小练习,大概原理如下: 1.首先是图片切换2.自动播放3.调用自动播放4.移动到容器上边停止播放,离开自动播放5.移动到导航上停止播放, ...
- js实现轮播图动画
在网页浏览中,可以看到轮播图是无处不在的,这是一个前端工程最基本的技巧.首先看看几个网页的呈现的效果. QQ音乐: 网易云音乐: 天猫: 接下来将从简到难总结几种实现轮播图的方法. 1.样式一:鼠标滑 ...
- 原生js简单轮播图 代码
在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...
- JavaScript实现动态轮播图效果
功能描述: 1.鼠标经过 左右侧箭头显示,鼠标离开 箭头隐藏 2.动态添加底部小圆圈并绑定单击事件,并且让小圆圈的点击事件和左右箭头点击事件同步 3.拷贝第一张图片添加到ul最后可以实现动态添加图片 ...
随机推荐
- zabbix--客户端部署(新手入门）
zabbix--客户端部署 机器环境部署:我准备的一台zabbix客户端#可以准备多台 ip: 安装软件包 [root@server1 ~]# rpm -Uvh https://repo.zabbix ...
- 七天接手react项目-起步
七天接手react项目-起步 背景 假如七天后必须接手一个 react 项目(spug - 一个开源运维平台),而笔者只会 vue,之前没有接触过 react,此刻能做的就是立刻展开一个"7 ...
- Sublime Text3中文环境设置
Sublime Text3中文环境设置 1.首先打开安装好的的Sublime软件,选择Preferences下面的Package Contorol选项出现弹窗方框 2.在弹窗输入install pac ...
- JavaSE 千寻简学习笔记
JavaSE 千寻简学习笔记 简介 TIOBE:编程语言排行榜 官网:https://hellogithub.com/report/tiobe/ 如何高效的学习Java 多写(代码)多写(笔记)多写( ...
- 问题排查利器：Linux 原生跟踪工具 Ftrace 必知必会
本文地址:https://www.ebpf.top/post/ftrace_tools TLDR,建议收藏,需要时查阅. 如果你只是需要快速使用工具来进行问题排查,包括但不限于函数调用栈跟踪.函数调用 ...
- C++移动语义 详细讲解【Cherno C++教程】
移动语义 本文是对<最好的C++教程>的整理,主要是移动语义部分,包含视频85p左值和右值.89p移动语义与90p stdmove和移动赋值操作符. 移动语义是C++11的新feature ...
- LGP3346题解
广义 SAM 比较简单的题/fad 题意:树上所有路径一共能够组成多少个本质不同子串? 并且数据保证最多只有20个叶子节点. 我们先来考虑一下一种特殊情况: 对于路径 \([u,v]\),\(u\) ...
- 2022年官网下安装Kibana最全版与官网查阅方法（Kibana8.1.0+Elasticsearch8.1.0）
一.环境整合(需要提前装好) 构建工具(参考工具部署方式) 软件名称 版本 相关文章推荐 Elasticsearch ..* https://www.cnblogs.com/liuyangfirst/ ...
- windows 2008 R2磁盘清理
记录一次由于磁盘空间满,IIS使前端程序报500的事故 由于导出Api部署在IIS服务器,在程序调用导出Api会报500 发现windows服务器C盘已满 下面处理过程 只需复制cleanmgr.ex ...
- Git指令小结
一.初始化 git config --global user.name "username" 设置git用户名 git config --global user.email &qu ...