JS——轮播图高级版
需求：
1、页面需要小图标和箭头
2、定时器不断的滑动图片
3、在点击箭头时，图标和图片随即做出响应
核心思想：
1、往左移动到第一张的情况：在第二张移动到第一张时，这个动画效果完成之后，立刻将ul的left位置切换到最后一张的位置。
2、往右移动到最后一张的情况：在倒数第二张移动到最后一张时，这个动画效果完成之后，立刻将ul的left位置切换到第一张的位置
3、以上两点效果实现的基础是，第一张图片和最后一张图片是一样的。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
} .box {
width: 500px;
height: 200px;
padding: 5px;
border: 1px solid #ccc;
margin: 150px auto;
} .content {
width: 500px;
height: 200px;
overflow: hidden;
position: relative;
} .content ul {
width: 600%;
position: absolute;
} .content li {
float: left;
} .content ol {
position: absolute;
bottom: 14px;
right: 20px;
} .content ol li {
float: left;
width: 20px;
height: 20px;
background-color: #fff;
font: 500 17px/20px "simsun";
text-align: center;
margin-right: 15px;
cursor: pointer;
} .arrow {
display: none;
} .arrow span {
position: absolute;
top: 50%;
margin-top: -20px;
width: 30px;
height: 40px;
background-color: rgba(255, 228, 206, 0.3);
text-align: center;
font: 400 20px/40px "simsun";
border: 1px solid #fff;
cursor: pointer;
} .arr-left {
left: 5px;
border-radius: 0 5px 5px 0;
} .arr-right {
right: 5px;
border-radius: 5px 0 0 5px;
} .content .current {
background-color: yellow;
}
</style>
</head>
<body>
<div class="box" id="scrollImg">
<div class="content">
<ul>
<li><img src="data:images/1.jpg"></li>
<li><img src="data:images/2.jpg"></li>
<li><img src="data:images/3.jpg"></li>
<li><img src="data:images/4.jpg"></li>
<li><img src="data:images/5.jpg"></li>
</ul>
<ol></ol>
<div class="arrow">
<span class="arr-left"><</span>
<span class="arr-right">></span>
</div>
</div>
</div>
<script>
var divEle = document.getElementById("scrollImg");
var ulEle = divEle.children[0].children[0];
var imgWidth = divEle.children[0].offsetWidth;
var olEle = divEle.children[0].children[1];
var arrEle = divEle.children[0].children[2];
//1、在第五张图片后放置第一张图片
var firstImg = ulEle.children[0].cloneNode(true);
ulEle.appendChild(firstImg);
//2、创建5个小图标
for (var i = 0; i < ulEle.children.length - 1; i++) {
var liEle = document.createElement("li");
liEle.innerHTML = i + 1;
olEle.appendChild(liEle);
}
//3、点亮第一个小图标
olEle.children[0].className = "current";
//4、鼠标放到小图标上轮播图片
var olLiArr = olEle.children;
for (var i = 0; i < olLiArr.length; i++) {
olLiArr[i].index = i;
olLiArr[i].onmouseover = function () {
for (var j = 0; j < olLiArr.length; j++) {
olLiArr[j].className = "";
}
this.className = "current";
animate(ulEle, -imgWidth * this.index);
key = square = this.index;
}
}
//5、添加定时器
var timer = setInterval(autoPaly, 1000);
var key = 0;
var square = 0;
//图片1秒钟滑动一次，并且对应的小图片也随机点亮
//当key=5时是第5张图片向第6张图片移动（第6张也就是第1张）
//当key=6时其实是第1张向第2张图片移动，此时我们立刻更改ul的left值，达到了偷梁换柱的效果
function autoPaly() {
key++;
if (key > olLiArr.length) {//key=6立刻将key=1
ulEle.style.left = 0;
key = 1;
}
animate(ulEle, -imgWidth * key);
square++;
if (key === olLiArr.length) {//当key=5时，此时已经滑动到了第一张图片，所以square=0
square = 0;
}
for (var i = 0; i < olLiArr.length; i++) {
olLiArr[i].className = "";
} olLiArr[square].className = "current";
} //6、鼠标放上去清除定时器，移开后在开启定时器
divEle.onmouseover = function () {
arrEle.style.display = "block";
clearInterval(timer);
}
//在清除定时器时，因为key与square都是全局变量
//所以当再次开启定时器时，函数依然按照原来计划执行
divEle.onmouseout = function () {
arrEle.style.display = "none";
timer = setInterval(autoPaly, 1000);
}
//7、左右箭头切换图片
arrEle.children[0].onclick = function () {
key--;
if (key < 0) {//key=-1时立刻换到最后一张图片，并将key值赋值成倒数第二张图片的数值
ulEle.style.left = -olLiArr.length * imgWidth + "px";
key = olLiArr.length - 1;
}
animate(ulEle, -imgWidth * key);
square--;
if (key < 0) {//当key=5时，此时已经滑动到了第一张图片，所以square=0
square = 4;
}
for (var i = 0; i < olLiArr.length; i++) {
olLiArr[i].className = "";
} olLiArr[square].className = "current";
}
arrEle.children[1].onclick = function () {
autoPaly();
} //图片移动
function animate(ele, target) {
clearInterval(ele.timer);
var speed = ele.offsetLeft < target ? 15 : -15;
ele.timer = setInterval(function () {
ele.style.left = ele.offsetLeft + speed + "px";
var value = ele.offsetLeft - target;
if (Math.abs(value) <= Math.abs(speed)) {
ele.style.left = target + "px";
clearInterval(ele.timer);
}
}, 10);
} </script>
</body>
</html>
JS——轮播图高级版的更多相关文章
- JS——轮播图简单版
1.小图标版本 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- JavaScript的案例（数据校验，js轮播图，页面定时弹窗）
1.数据校验 步骤 1.确定事件(onsubmit)并绑定一个函数 2.书写这个函数,获取数据,并绑定id 3. ...
- 纯js轮播图练习-2，js+css旋转木马层叠轮播
基于css3的新属性,加上js的操作,让现在js轮播图花样越来越多. 而现在出现的旋转木马层叠轮播的轮播图样式,却是得到了很多人都喜爱和投入使用. 尤其是在各大软件中,频繁的出现在大家的眼里,在web ...
- 纯js轮播图练习-1
偶尔练习,看视频自己学着做个简单的纯JS轮播. 简单的纯js轮播图练习-1. 样子就是上面图片那样,先不管好不好看,主要是学会运用和理解轮播的原理 掌握核心的理论知识和技术的操作,其他的都可以在这个基 ...
- javascript原生js轮播图
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS轮播图（网易云轮播图）
JS 轮播图 写在前面 最聪明的人是最不愿浪费时间的人.--但丁 实现功能 图片自动切换 鼠标移入停止自动播放,显示按钮 点击按钮,实现前后翻 鼠标移入小圆圈,可以跳转到对应图片 点击左右两侧图片部分 ...
- 手把手原生js轮播图
在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...
- jquery, js轮播图插件Swiper3
轮播图插件Swiper3 HTML代码 如果只是简单的使用轮播图,直接复制我的html代码就可以. 如果想要高级一些,就自己去看文档吧 <!DOCTYPE html> <html l ...
- JS —— 轮播图中的缓动函数的封装
轮播图的根本其实就是缓动函数的封装,如果说轮播图是一辆跑动的汽车,那么缓动函数就是它的发动机,今天本文章就带大家由简入繁,封装属于自己的缓动函数~~ 我们从需求的角度开始,首先给出一个简单需求: 1. ...
随机推荐
- JSOI最大值 （线段树）
change 单点修改 query 区间最值 Program XJOI2321; ; ..maxn*] of longint; i,m,n,ans,p,x:longint; ch:char; func ...
- [bzoj1574][Usaco2009 Jan]地震损坏Damage_dfs
地震损坏Damage bzoj-1574 Usaco-2009 Jan 题目大意:题目链接. 注释:略. 想法: 显然对于每一个report点,和它直接相连的点都不可能到达1.我们将它打上标记. 然后 ...
- 洛谷—— P1657 选书
https://www.luogu.org/problem/show?pid=1657 题目描述 学校放寒假时,信息学奥赛辅导老师有1,2,3……x本书,要分给参加培训的x个人,每人只能选一本书,但是 ...
- Junit4使用总结
常用注解 @Before:初始化方法,在任何一个测试方法执行之前,必须执行的代码. @After:释放资源,在任何一个测试方法执行之后,需要进行的收尾工作. @Test:测试方法,表明这是一个测试 ...
- js事件捕获和冒泡解析
<div id="box"> <div id="box2"> <p id="test">test< ...
- 插件化开发—动态载入技术载入已安装和未安装的apk
首先引入一个概念,动态载入技术是什么?为什么要引入动态载入?它有什么优点呢?首先要明确这几个问题.我们先从 应用程序入手,大家都知道在Android App中.一个应用程序dex文件的方法数最大不能超 ...
- MapR CEO对2016大数据的5个预測
本文来源于我在InfoQ中文站翻译的文章,原文地址是:http://www.infoq.com/cn/news/2016/02/mapr-ceo-5-big-data-predictions MapR ...
- Codeforces 91C Ski Base 加边求欧拉回路数量
题目链接:点击打开链接 题意: 给出n个点m条无向边的图 開始图里没有边.每次加一条边,然后输出图里欧拉回路的条数. 思路: We will count the number of ski bases ...
- Android高仿UC浏览器和360手机卫士消息常驻栏（通知栏）
之前网上看了下自己定义消息栏,通知栏,了解到了Notification这个控件.发现UC浏览器等都是这样的类型,今天写个demo实现下.如图: 当中每一个button都有不同的功能.代码例如以下: p ...
- LeetCode 451. Sort Characters By Frequency （根据字符出现频率排序）
Given a string, sort it in decreasing order based on the frequency of characters. Example 1: Input: ...