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最后可以实现动态添加图片 ...
随机推荐
- jmeter（二十八）利用beanshell进行多重断言
在接口测试中,我们对返回结果的正确性判断一般是基于响应报文的返回内容进行断言.但有些时候,按照正常的业务逻辑来说,一个请求返回的内容是多种不同的. 比如:用户注册功能,注册成功是正常的返回messag ...
- 安装wkhtmltopdf
思路 在网上查了下前后端都可以将html生成pdf,考虑到实现效果以及效率,最后决定将转化工作在服务端使用PHP完成.本着最好不要额外安装软件的原则,搜索过后分别尝试了 TCPDF MPDF FPDF ...
- 5. 堪比JMeter的.Net压测工具 - Crank 实战篇 - 接口以及场景压测
目录 堪比JMeter的.Net压测工具 - Crank 入门篇 堪比JMeter的.Net压测工具 - Crank 进阶篇 - 认识yml 堪比JMeter的.Net压测工具 - Crank 进阶篇 ...
- ASP.NET Core 6框架揭秘实例演示[23]：ASP.NET Core应用承载方式的变迁
ASP.NET Core应用本质上就是一个由中间件构成的管道,承载系统将应用承载于一个托管进程中运行起来,其核心任务就是将这个管道构建起来.从设计模式的角度来讲,"管道"是构建者( ...
- ArcMap操作随记（2）
1.空间校正 变换-仿射 仅发生偏移 橡皮页变化 形状改变 变换-投影 旋转,改变角度 变换-相似 改变大小.形状不变 2.计算行列号 Int(([POINT_Y]-1273.143242)/30)+ ...
- linux 常用命令：
查看启动进程命令 ps -ef | grep donet 1.vi 进入编辑界面 2.ls,ll 查看命令 3.cd 进入命令 4.i 进入插入界面 5. esc 退出编辑界面 6.输入:冒号,进入 ...
- IEAD关于git配置以及拉代码和提交代码
1.提前安装git客户端,注册码云帐号 注册地址:https://gitee.com/signup 2.新建仓库 3.修改仓库信息 4.从IDEA拉git项目,下面两个地方都可以配置 首次创建需要输入 ...
- 如何防止 IP 被盗用 保护网络正常运行
IP被盗用是指盗用者使用未经授权的IP来配置网上的计算机.目前IP盗用行为非常常见,许多"不法之徒"用盗用地址的行为来逃避追踪.隐藏自己的身份.IP的盗用行为侵害了网络正常用户的权 ...
- Numpy库基础___一
ndarray一个强大的N维数组对象Array •ndarray的建立(元素默认浮点数) 可以利用list列表建立ndarray import numpy as np list =[0,1,2,3] ...
- Ubuntu 16.04 更改系统语言为简体中文
镜像下载.域名解析.时间同步请点击阿里巴巴开源镜像站 一.安装时报错 原因:以访客的身份进入的会报错,改为管理员进入即可. ps:有时候往往一点小细节也会造成大问题,但是我们要善于排错. 注:可以看到 ...