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. ...
随机推荐
- A^B Mod C
基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 给出3个正整数A B C,求A^B Mod C. 例如,3 5 8,3^5 Mod 8 = 3. Input 3个正整 ...
- Linux下汇编语言学习笔记72 ---
这是17年暑假学习Linux汇编语言的笔记记录,参考书目为清华大学出版社 Jeff Duntemann著 梁晓辉译<汇编语言基于Linux环境>的书,喜欢看原版书的同学可以看<Ass ...
- gogs: 如何恢复repository
当某天gogs的数据库突然崩溃,配置数据全部消失后,要如何将之前git的repository重新加入到gogs中呢?(别问了,那个倒霉的人就是我) step 1, 2, 3, go... 1. 进入g ...
- Android从源码看ListView的重用机制
不管是android还是iOS,列表视图应该是最复杂的控件了.android中的listview从命名能够看出是个一维数组,而iOS中的tableview则是二维数组.但事实上须要注意的地方是差点儿相 ...
- 关于NSString,NSMutableString,NSArray,NSMutableArray,NSDictionary,NSMutableDictionary
NSString,NSMutableString,NSArray,NSMutableArray,NSDictionary,NSMutableDictionary 在 OC 中我们天天都要用,而我们要怎 ...
- MVC三层架构模式编程思想 JSP-Servlet-JavaBean
MVC(Mdodel-View-Controller)编程模式.把一个Java应用分成三层:模型层.视图层.控制层,各层分别实现各层的功能,整个过程见下图就一目了然了. watermark/2/tex ...
- 设置IIS 兼容32位DLL
限Win7/Windows servser 2008 IIS的设置: 1.选择引用程序池 2.选择公布网站的.点击高级设置 3.启用32位应用程序属性改为True
- 【OpenGL】Shader实例分析（九）- AngryBots中的主角受伤特效
转发请保持地址:http://blog.csdn.net/stalendp/article/details/40859441 AngryBots是Unity官方的一个非常棒的样例.非常有研究价值. 曾 ...
- 将分布式-队列的实现交给redis
import requestsimport reimport timefrom redis import Redisimport threading REDIS_HOST, REDIS_PORT, P ...
- 浅析Netty原理