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最后可以实现动态添加图片 ...
随机推荐
- cookie与session(全面了解)
目录 一:cookie与session 1.什么是Cookie? 2.Cookie主要用于以下三个方面 3.什么是Session? 4.Cookie与Session有什么不同? 5.为什么需要Cook ...
- 面向对象编程(C++篇3)——析构
目录 1. 概述 2. 详论 2.1. 对象生命周期 2.2. 不一定需要显式析构 2.3. 析构的必要性 3. 总结 1. 概述 类的析构函数执行与构造函数相反的操作,当对象结束其生命周期,程序就会 ...
- LGP3790题解
建议改为 省 选 原 题 题意:求所有生成树的边权 \(\gcd\) 之和. 看到 \(\gcd\) 立刻想反演. \[\sum_T\gcd_{e \in T}e_v \] 这里设 \(E=e_v(e ...
- C#/VB.NET 将Html转为Excel
本文介绍通过C#和VB.NET代码展示将Html转为Excel文档的方法. dll引用 方法1 将 Spire.XLS for .NET 下载到本地,解压,安装.完成安装后,在安装路径下找到BIN文件 ...
- WinDbg调试托管程序环境问题总结
基本环境搭建及安装 安装 有2个方式可以安装WinDbg. 新版 安装WinDbg Preview 在商店里搜WinDbg直接就可以安装,这里安装的版本是x64版本.x64版本的WinDbg其实是可以 ...
- Java案例——反转字符串
/*案例:将用户输入的字符串反转并输出 分析:1.使用Scanner 类获取用户输入的字符串 2.定义一个方法将字符串反着遍历并拼接 3.定义变量接受并输出* */public class Strin ...
- java案例—遍历字符串
/*案例:遍历并打印字符串 需求:键盘录入一个字符串,使用程序在控制台遍历该字符串 分析:1.使用Scanner类获取输入的字符串 2.使用public char charAt(int index)方 ...
- 痞子衡嵌入式：IAR内部C-SPY调试组件配套宏文件(.mac)用法介绍
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家分享的是IAR内部C-SPY调试组件配套宏文件(.mac)用法. 痞子衡之前写过一篇 <JLink Script文件基础及其在IAR下调用 ...
- 题解0007：小木棍（P1120）
(错误记录) 题目链接:https://www.luogu.com.cn/problem/P1120 题目描述:几根同样长的木棍,小冥把它们随意砍成了n段: 然后他又吃饱了撑的想把木棍拼上: 但是这个 ...
- 【Mybatis】SQL语句的解析执行过程原理
sqlSession简单介绍 拿到SqlSessionFactory对象后,会调用SqlSessionFactory的openSesison方法,这个方法会创建一个Sql执行器(Executor),这 ...