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. ...
随机推荐
- 采药 2005年NOIP全国联赛普及组&疯狂的采药
时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Description 辰辰是个天资聪颖的孩子,他的梦想是成为世界上最伟大的医师.为此,他想拜附近最有威望 ...
- 回文质数 USACO
时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Description 因为 151 既是一个质数又是一个回文数(从左到右和从右到左是看一样的),所以 15 ...
- 【BZOJ4398】福慧双修（二进制，最短路）
题意: 此题中S=1 思路:Orz ManGod秒切此题 我觉得出入边权互换不太直观,就改了一下写法 第一次默认与1有关的第一条出边只出不入,第二次默认只入不出 ..]of longint; head ...
- 洛谷—— P2658 汽车拉力比赛
https://www.luogu.org/problem/show?pid=2658 题目描述 博艾市将要举行一场汽车拉力比赛. 赛场凹凸不平,所以被描述为M*N的网格来表示海拔高度(1≤ M,N ...
- Bestcoder #92
A =w= B 计数题,枚举A.C,算B.D的个数,注意减去重复的 我当时是f[1][n]->f[2][n]->f[3][n]->f[4][n]递推的 C 题意:长为n的字符串仅由' ...
- endWith is not a function
解决方法,增加String的扩展 String.prototype.endWith = function(suffix) { return this.indexOf(suffix, this.leng ...
- 自由宣言--《I Have a Dream》(马丁.路德.金)
I Have a Dream by Martin Luther King, Jr. I am happy to join with you today in what will go down in ...
- OpenCV2马拉松第17圈——边缘检測(Canny边缘检測)
计算机视觉讨论群162501053 转载请注明:http://blog.csdn.net/abcd1992719g 收入囊中 利用OpenCV Canny函数进行边缘检測 掌握Canny算法基本理论 ...
- C#实现马尔科夫模型例子
已知条件:三个缸N状态,每个缸中不同颜色球的个数M状态值,时间轴T,观察值序列O 参数:状态值序列,转移概率序列 求:概率 后台代码如下 , M = ;//N状态,M状态值 (0橙色,1绿色,2蓝色, ...
- _stdcall与_cdecl
_cdecl(C Declaration的缩写)是C/C++和MFC程序默认使用的调用约定,因此可以省略,也可以在函数声明时加上_cdecl关键字来手工指定.采用_cdecl约定时,函数参数按照从右到 ...