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. ...
随机推荐
- CF671C. Ultimate Weirdness of an Array
n<=200000个<=200000的数问所有的f(i,j)的和,表示去掉区间i到j后的剩余的数字中任选两个数的最大gcd. 数论日常不会.. 先试着计算一个数组:Hi表示f(l,r)&l ...
- Spring MVC中@RequestMapping注解使用技巧（转）
@RequestMapping是Spring Web应用程序中最常被用到的注解之一.这个注解会将HTTP请求映射到MVC和REST控制器的处理方法上. 在这篇文章中,你将会看到@RequestMapp ...
- linux top进程状态D
什么是D状态 运行在KVM虚拟机里的一些进程突然出了问题,这些出了问题的进程无法用kill杀掉,使用ps可以看到这些进程处于D状态: [build@kbuild-john ~]$ ps -a -o p ...
- 十进制浮点数转换成IEEE754标准的32浮点数的二进制格式
参考: http://jimmygod.blog.163.com/blog/static/43511339200792605627411/ http://blog.csdn.net/archersab ...
- ubuntu 建立加密分區及其安全刪除
加密分區1: sudo apt-get install cryptsetup2: 用“磁盤實用工具“,建立新的分區 或者 格式化現有分區,且勾選“加密底層設備“,按提示設定密碼3:同時選擇加密條件:i ...
- TreeView获取目录下的所有文件
/// <summary> /// TreeView获取目录下的所有文件 /// </summary> /// <param name="tree"& ...
- 调试JDK源代码-一步一步看HashMap怎么Hash和扩容
调试JDK源代码-一步一步看HashMap怎么Hash和扩容 调试JDK源代码-ConcurrentHashMap实现原理 调试JDK源代码-HashSet实现原理 调试JDK源代码-调试JDK源代码 ...
- ADO.NET .net core2.0添加json文件并转化成类注入控制器使用 简单了解 iTextSharp实现HTML to PDF ASP.NET MVC 中 Autofac依赖注入DI 控制反转IOC 了解一下 C# AutoMapper 了解一下
ADO.NET 一.ADO.NET概要 ADO.NET是.NET框架中的重要组件,主要用于完成C#应用程序访问数据库 二.ADO.NET的组成 ①System.Data → DataTable, ...
- Android CardView使用和导入出错问题
Android CardView使用和导入出错问题 第一部分:导入Android CardView出错的问题. Android CardView是Android在support.v7包里面的一个vie ...
- jquery 推断checkbox 是否选中
这是一个蛋疼的节奏.曾经写的代码如今失效了. jquery 推断checkbox 是否被选中,刚開始我是这样写的,并且没问题 $("#ziduana").attr("ch ...