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. ...
随机推荐
- 特种部队（codevs 1427）
题目描述 Description 某特种部队接到一个任务,需要潜入一个仓库.该部队士兵分为两路,第一路士兵已经在正面牵制住了敌人,第二路士兵正在悄悄地从后方秘密潜入敌人的仓库.当他们到达仓库时候,发现 ...
- Linux下汇编语言学习笔记35 ---
这是17年暑假学习Linux汇编语言的笔记记录,参考书目为清华大学出版社 Jeff Duntemann著 梁晓辉译<汇编语言基于Linux环境>的书,喜欢看原版书的同学可以看<Ass ...
- php处理管道文件流
<?php #!/usr/local/bin/php -q function read(){ $fp = fopen("php://stdin", "r" ...
- 【CV论文阅读】Rank Pooling for Action Recognition
这是期刊论文的版本,不是会议论文的版本.看了论文之后,只能说,太TM聪明了.膜拜~~ 视频的表示方法有很多,一般是把它看作帧的序列.论文提出一种新的方法去表示视频,用ranking function的 ...
- ECMAScript 对象类型
ECMAScript:本地对象.内置对象.宿主对象 一.本地对象: 定义:ECMA-262(ECMAScript语言规范) 定义其为“独立于宿主环境的 ECMAScript 实现提供的对象”.它是由 ...
- 怎样设置mysql远程訪问
Mysql默认是不能够通过远程机器訪问的,通过以下的配置能够开启远程訪问 在MySQL Server端: 运行mysql 命令进入mysql 命令模式, mysql> use mysql; ...
- 微软将支持.net开源并跨平台,新特性会体现于VS2015
http://news.microsoft.com/2014/11/12/microsoft-takes-net-open-source-and-cross-platform-adds-new-dev ...
- python库学习笔记——Pandas数据索引：ix、loc、iloc区别
Different Choices for Indexing 1. loc--通过行标签索引行数据 1.1 loc[1]表示索引的是第1行(index 是整数) import pandas as pd ...
- TS流解析 四
一 从TS流开始 数字电视机顶盒接收到的是一段段的码流,我们称之为TS(Transport Stream,传输流),每个TS流都携带一些信息,如Video.Audio以及我们需要学习的PAT.PMT等 ...
- Kafka VS Flume
(1)kafka和flume都是日志系统.kafka是分布式消息中间件,自带存储,提供push和pull存取数据功能.flume分为agent(数据采集器),collector(数据简单处理和写入) ...