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最后可以实现动态添加图片 ...
随机推荐
- 清华大学ucore操作系统课笔记
操作系统 清华大学ucore操作系统课笔记 全文思维导图 1. 操作系统概述 1.1 什么是操作系统? 操作系统的定义 没有公认的精确定义 一个控制程序 一个系统软件 控制程序执行过程,防止错误和计算 ...
- Spring系列16：ApplicationContext扩展国际化
本文内容 BeanFactory对比ApplicationContext ApplicationContext的扩展能力 国际化 BeanFactory对比ApplicationContext 简单点 ...
- CF1017F题解
这种板子题怎么能没有min25筛的题解呢??? 题意:给定一个完全和性函数,求其前缀和.其实普通和性函数也能做就是了 \[\sum_{i=1}^n f(i) \] 类似积性函数,我们把这玩意儿在质数幂 ...
- vscode使用python虚拟环境
vscode使用python虚拟环境 创建好虚拟环境之后,在vscode中配置使用python的虚拟环境. 首先打开设置,然后搜索python venv, 在python: Venv Path中设置为 ...
- 基于EMR离线数据分析-反馈有礼
"云上漫步"第三期-反馈有礼 参与体验产品,提交反馈,就有机会获得定制背包,T恤,超萌虎年鼠标垫,以及5到100元阿里云通用代金券~ 反馈地址: https://developer ...
- Apache HTTPD 未知后缀解析漏洞
环境搭建 https://blog.csdn.net/qq_36374896/article/details/84102101 该环境版本: PHP 7.x 最新版 Apache HTTPD 2.4. ...
- 为什么不建议使用统配符初始化 css 样式
为什么不建议使用统配符初始化 css 样式 * { padding:0; margin:0; } 采用这样的写法好处是写起来很简单,但是通配符,需要把所有的标签都遍历一遍,当网站较大时,样式比较多,这 ...
- 多线程笔记（学习尚硅谷java基础教程）
一.基本概念: 程序: 是为完成特定任务.用某种语言编写的一组指令的集合.即指一段静态的代码,静态对象. 进程: 是程序的一次执行过程,或是正在运行的一个程序.是一个动态的过程:有它自身的产生.存在和 ...
- 安卓开发学习-app结构学习
开发软件:Android Studio 全局分析 gradle与idea是AS自动生成的文件 buid是编译时生成的文件 gradle里面包含gradle wrapper配置文件 gitignore是 ...
- ChIP-seq技术介绍｜易基因
大家好,这里是专注表观组学十余年,多组学科研服务领跑者的易基因. 染色质免疫沉淀后测序(ChIP seq)是一种针对DNA结合蛋白.组蛋白修饰或核小体的全基因组分析技术.由于二代测序技术的巨大进步,C ...