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 ...
随机推荐
- JAVA学习课本内容总结
二.基本类型 数组 枚举 1.基本类型 逻辑类型 boolean (true/false) 整数类型 byte(8位) short(16) int(32) long(64) 浮点类型 float ...
- 母函数（Generating function）详解
母函数(Generating function)详解 在数学中,某个序列的母函数(Generating function,又称生成函数)是一种形式幂级数,其每一项的系数可以提供关于这个序列的信息.使用 ...
- N - Is It A Tree? 并查集
A tree is a well-known data structure that is either empty (null, void, nothing) or is a set of one ...
- redis sentinel集群配置及haproxy配置
ip分布情况: sentinel-1/redis 主 10.11.11.5 sentinel-2/redis 从 10.11.11.7 sentinel-3/redis 从 10.11.11.8 ha ...
- 使用深度双向LSTM模型构造社区问答系统
所看到的. 首先强调一下,这个结构也是一个解决对照两个句子类似性的通用RNN解决方式,不只能够使用在问答社区.凡是涉及到对照两个句子或者实体关系的场合全然能够套用这个模型来解决.这点希望读者注意. 首 ...
- javaScript 检測 能否够连接指定server
本文主要讲述怎样在js里面从多个服务端servlet中找到可用的地址 一般项目部署到生产环境之后会有一个生产网段(就是你能够在家訪问)和一个办公网段(仅仅能在公司才干訪问). 我们的项目部署好了之后, ...
- POJ 1741 Tree 树形DP（分治）
链接:id=1741">http://poj.org/problem?id=1741 题意:给出一棵树,节点数为N(N<=10000),给出N-1条边的两点和权值,给出数值k,问 ...
- 并发与并行(concurrency vs parallesim)
最近对计算机中并发(concurrency)和并行(parallesim)这两个词的区别很迷惑,将搜索到的相关内容整理如下. http://www.vaikan.com/docs/Concurrenc ...
- Silverlight，Windows 8应用开发实例教程系列汇总
Kevin Fan分享开发经验,记录开发点滴 Silverlight,Windows 8应用开发实例教程系列汇总 2012-06-18 01:05 by jv9, 2145 阅读, 3 评论, 收藏, ...
- Hadoop 的使用
hadoop:hadoop启动:./sbin/start-dfs.shhadoop关闭:./sbin/stop-dfs.shbin文件用于在HDFS创建数据HDFS 中创建用户目录:./bin/hdf ...