JS——轮播图简单版
1、小图标版本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
} .scrollImg {
margin: 150px auto;
width: 500px;
height: 200px;
padding: 5px;
border: 1px solid #ccc;
} .scrollContent {
position: relative;
width: 500px;
height: 200px;
overflow: hidden;
} .scrollContent ul {
width: 500%;
position: absolute;
}
.scrollContent ul li{
float: left;
}
.scrollContent ol {
position: absolute;
right: 13px;
bottom: 8px; } .scrollContent ol li {
float: left;
width: 20px;
height: 20px;
font: 500 15px/20px "simsun";
text-align: center;
background-color: #fff;
margin-right: 10px;
cursor: pointer;
} .scrollContent ol li.current {
background-color: yellow;
}
</style>
</head>
<body>
<div class="scrollImg">
<div class="scrollContent" id="scrollContent">
<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>
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
<script>
var scrollContent = document.getElementById("scrollContent");
var scrollUl = scrollContent.children[0];
var icon = scrollContent.children[1];
var iconLiArr = icon.children;
var imgWidth = scrollContent.offsetWidth;
//鼠标放在小图标上，对于图表点亮
for (var i = 0; i < iconLiArr.length; i++) {
iconLiArr[i].index = i;
iconLiArr[i].onmouseover = function () {
for (var j = 0; j < iconLiArr.length; j++) {
iconLiArr[j].className = "";
}
this.className = "current";
animate(scrollUl, -this.index * imgWidth);
}
} //图片移动
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>
</div>
</body>
</html>
2、小图标版本附有定时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
} .scrollImg {
margin: 150px auto;
width: 500px;
height: 200px;
padding: 5px;
border: 1px solid #ccc;
} .scrollContent {
position: relative;
width: 500px;
height: 200px;
overflow: hidden;
} .scrollContent ul {
width: 600%;
position: absolute;
} .scrollContent ul li {
float: left;
} .scrollContent ol {
position: absolute;
right: 13px;
bottom: 8px; } .scrollContent ol li {
float: left;
width: 20px;
height: 20px;
font: 500 15px/20px "simsun";
text-align: center;
background-color: #fff;
margin-right: 10px;
cursor: pointer;
} .scrollContent ol li.current {
background-color: yellow;
}
</style>
</head>
<body>
<div class="scrollImg">
<div class="scrollContent" id="scrollContent">
<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>
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
<script>
var scrollContent = document.getElementById("scrollContent");
var scrollUl = scrollContent.children[0];
var icon = scrollContent.children[1];
var iconLiArr = icon.children;
var imgWidth = scrollContent.offsetWidth;
//1、将第一张图片克隆到最后一张
var imgEle = scrollUl.children[0].cloneNode(true);
scrollUl.appendChild(imgEle);
//2、鼠标放在小图标上，对应图表点亮
//5、因为有定时器，要注意点亮的图标与图片必须要一致
for (var i = 0; i < iconLiArr.length; i++) {
iconLiArr[i].index = i;
iconLiArr[i].onmouseover = function () {
for (var j = 0; j < iconLiArr.length; j++) {
iconLiArr[j].className = "";
}
this.className = "current";
animate(scrollUl, -this.index * imgWidth);
key = square = this.index;
}
}
var key = 0;
var square = 0;
//3、定时器,每隔一秒滚动一次图片,对应的图片被点亮
var timer = setInterval(autoPaly, 1000); function autoPaly() {
key++;
if (key > iconLiArr.length) {
scrollUl.style.left = "0px";
key = 1;
}
animate(scrollUl, -key * imgWidth);
square++;
if (key > iconLiArr.length - 1) {
square = 0;
}
for (var i = 0; i < iconLiArr.length; i++) {
iconLiArr[i].className = "";
}
iconLiArr[square].className = "current";
} //4、鼠标移动到图片清除定时器，离开开启定时器
scrollContent.onmouseover = function () {
clearInterval(timer);
}
scrollContent.onmouseout = function () {
timer = setInterval(autoPaly, 1000);
} //图片移动
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>
</div>
</body>
</html>
3、箭头版本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
} .scrollImg {
margin: 150px auto;
width: 500px;
height: 200px;
padding: 5px;
border: 1px solid #ccc;
} .scrollContent {
position: relative;
width: 500px;
height: 200px;
overflow: hidden;
} .scrollContent ul {
width: 500%;
position: absolute;
} .scrollContent ul li {
float: left;
} .arrow {
display: none;
} .arrow span {
position: absolute;
top: 50%;
margin-top: -25px;
width: 30px;
height: 50px;
font: 500 40px/50px "simsun";
text-align: center;
background-color: #ccc;
opacity: 0.6;
cursor: pointer;
} .arrow span.arrLeft {
left: 5px;
border-radius: 0 10px 10px 0;
} .arrow span.arrRight {
right: 5px;
border-radius: 10px 0 0 10px;
}
</style>
</head>
<body>
<div class="scrollImg">
<div class="scrollContent" id="scrollContent">
<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>
<div class="arrow">
<span class="arrLeft"><</span>
<span class="arrRight">></span>
</div>
</div>
<script>
var scrollContent = document.getElementById("scrollContent");
var scrollUl = scrollContent.children[0];
var arrow = scrollContent.children[1];
var imgWidth = scrollContent.offsetWidth; //1、鼠标移动到图片显示箭头，离开隐藏箭头
scrollContent.onmouseover = function () {
arrow.style.display = "block";
}
scrollContent.onmouseout = function () {
arrow.style.display = "none";
}
var key = 0;
//2、点击左箭头，图片向右边移动，点击右箭头，图片向左边移动
arrow.children[0].onclick = function () {
key++;
if (key > scrollUl.children.length - 1) {
key = scrollUl.children.length - 1;
}
animate(scrollUl, -key * imgWidth);
}
arrow.children[1].onclick = function () {
key--;
if (key < 0) {
key = 0;
}
animate(scrollUl, -key * imgWidth);
} //图片移动
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>
</div>
</body>
</html>
4、箭头版本附有定时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
} .scrollImg {
margin: 150px auto;
width: 500px;
height: 200px;
padding: 5px;
border: 1px solid #ccc;
} .scrollContent {
position: relative;
width: 500px;
height: 200px;
overflow: hidden;
} .scrollContent ul {
width: 600%;
position: absolute;
} .scrollContent ul li {
float: left;
} .arrow {
display: none;
} .arrow span {
position: absolute;
top: 50%;
margin-top: -25px;
width: 30px;
height: 50px;
font: 500 40px/50px "simsun";
text-align: center;
background-color: #ccc;
opacity: 0.6;
cursor: pointer;
} .arrow span.arrLeft {
left: 5px;
border-radius: 0 10px 10px 0;
} .arrow span.arrRight {
right: 5px;
border-radius: 10px 0 0 10px;
}
</style>
</head>
<body>
<div class="scrollImg">
<div class="scrollContent" id="scrollContent">
<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>
<div class="arrow">
<span class="arrLeft"><</span>
<span class="arrRight">></span>
</div>
</div>
<script>
var scrollContent = document.getElementById("scrollContent");
var scrollUl = scrollContent.children[0];
var arrow = scrollContent.children[1];
var imgWidth = scrollContent.offsetWidth;
//1、复制第一张图片放到最后一张
var imgEle = scrollUl.children[0].cloneNode(true);
scrollUl.appendChild(imgEle);
var key = 0;
//2、定时器,每隔一秒滚动一次图片,对应的图片被点亮
var timer = setInterval(autoPaly, 1000); function autoPaly() {
key++;
if (key > scrollUl.children.length - 1) {
scrollUl.style.left = "0px";
key = 1;
}
animate(scrollUl, -key * imgWidth);
} //3、鼠标移动到图片清除定时器，显示箭头，离开开启定时器，隐藏箭头
scrollContent.onmouseover = function () {
arrow.style.display = "block";
clearInterval(timer);
}
scrollContent.onmouseout = function () {
arrow.style.display = "none";
timer = setInterval(autoPaly, 1000);
} //4、点击左箭头，图片向右边移动，点击右箭头，图片向左边移动
arrow.children[0].onclick = function () {
autoPaly();
}
arrow.children[1].onclick = function () {
key--;
if (key < 0) {
scrollUl.style.left = -(scrollUl.children.length - 1) * imgWidth + "px";
key = scrollUl.children.length - 2;
}
animate(scrollUl, -key * imgWidth);
} //图片移动
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>
</div>
</body>
</html>
JS——轮播图简单版的更多相关文章
- JS——轮播图高级版
需求: 1.页面需要小图标和箭头 2.定时器不断的滑动图片 3.在点击箭头时,图标和图片随即做出响应 核心思想: 1.往左移动到第一张的情况:在第二张移动到第一张时,这个动画效果完成之后,立刻将ul的 ...
- 纯js轮播图练习-1
偶尔练习,看视频自己学着做个简单的纯JS轮播. 简单的纯js轮播图练习-1. 样子就是上面图片那样,先不管好不好看,主要是学会运用和理解轮播的原理 掌握核心的理论知识和技术的操作,其他的都可以在这个基 ...
- JS轮播图（网易云轮播图）
JS 轮播图 写在前面 最聪明的人是最不愿浪费时间的人.--但丁 实现功能 图片自动切换 鼠标移入停止自动播放,显示按钮 点击按钮,实现前后翻 鼠标移入小圆圈,可以跳转到对应图片 点击左右两侧图片部分 ...
- JavaScript的案例（数据校验，js轮播图，页面定时弹窗）
1.数据校验 步骤 1.确定事件(onsubmit)并绑定一个函数 2.书写这个函数,获取数据,并绑定id 3. ...
- 纯js轮播图练习-2，js+css旋转木马层叠轮播
基于css3的新属性,加上js的操作,让现在js轮播图花样越来越多. 而现在出现的旋转木马层叠轮播的轮播图样式,却是得到了很多人都喜爱和投入使用. 尤其是在各大软件中,频繁的出现在大家的眼里,在web ...
- javascript原生js轮播图
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 手把手原生js轮播图
在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...
- JS —— 轮播图中的缓动函数的封装
轮播图的根本其实就是缓动函数的封装,如果说轮播图是一辆跑动的汽车,那么缓动函数就是它的发动机,今天本文章就带大家由简入繁,封装属于自己的缓动函数~~ 我们从需求的角度开始,首先给出一个简单需求: 1. ...
- 原生js轮播图
//用原生js实现了一个简单的轮播图效果 <!DOCTYPE html><html> <head> <meta charset="UTF-8&quo ...
随机推荐
- 母函数（Generating function）详解
母函数(Generating function)详解 在数学中,某个序列的母函数(Generating function,又称生成函数)是一种形式幂级数,其每一项的系数可以提供关于这个序列的信息.使用 ...
- [bzoj1821][JSOI2010]部落划分（贪心）
题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=1821 分析:题目看起来很吊,但只要贪心就行了,每次取相邻最近的两个点所在的集合合并知道 ...
- UnicodeEncodeError: 'gbk' codec can't encode character '\u2022' in position
在GBK解码时忽略掉不能解码的数据 self.file.write(content.encode("gbk", 'ignore').decode("gbk", ...
- SQL SERVE BASE
http://www.cnblogs.com/chillsrc/category/49632.html
- 复习es6-let和const
1.声明变量的方法 es5 : var function es6 : var function let const class 2.let(const)与var 不同 let不能 ...
- Redis: 改变HomeBrew安装的数据库文件目录
vi /usr/local/etc/redis.conf 修改dir "/Volumes/KG's Big YO/Documents/redis_data" 最后,启动Redis: ...
- hdu 4587 推断孤立点+割点+ 删除点之后，剩下多少连通分量
做了非常久...... 题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4587 先枚举删除的第一个点,第二个点就是找割点.没有割点当然也有答案 学到 ...
- 数据切分——Atlas介绍
Atlas是由 Qihoo 360公司Web平台部基础架构团队开发维护的一个基于MySQL协议的数据中间层项目.它在MySQL官方推出的MySQL-Proxy 0.8.2版本号的基础上,改动了大量bu ...
- 进程同步与相互排斥：POSIX有名信号量
在 POSIX 标准中,信号量分两种,一种是无名信号量,一种是有名信号量. 无名信号量一般用于线程间同步或相互排斥,而有名信号量一般用于进程间同步或相互排斥. 它们的差别和管道及命名管道的差别类似.无 ...
- 如何理解Apache License, Version 2.0（整理）
如何理解Apache License, Version 2.0(整理) 问题: 最近看到apache发布了2.0版本的License.而且微软也以此发布了部分源代码.我对OpenSource不是特熟, ...