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 ...
随机推荐
- vim配置说明20170819
一.修改-/.vim/colors/guodesert.vim " Vim color file " Maintainer: Hans Fugal <hans@fugal.n ...
- 如何取消codeblocks对msvcr100.dll的依赖？
用VS2010或是codeblocks开发的程序,在开发之外的机器上,可能会提前缺少msvcr100.dll之类的文件. 可以用如何设置,取消其对库文件的依赖. 当然,还要注意创建程序的类型.(补) ...
- BC #62 div1 02
/* 数位DP题,设dp[n][k][j]为前n位最后一位是k时mod为j的个数.操作都相同,可以使用矩阵加速.本来对于每一位是7*10,可以把它压向一个向量. 加速矩阵为70*70,再加一维计算前缀 ...
- 1.求整数最大的连续0的个数 BinaryGap Find longest sequence of zeros in binary representation of an integer.
求整数最大的连续0的个数 A binary gap within a positive integer N is any maximal sequence of consecutive zeros t ...
- configure: error: mysql configure failed. Please check config.log for more information.
为php添加mysql模块时报错 configure: error: mysql configure failed. Please check config.log for more informat ...
- 并发数 = QPS*平均响应时间
转:https://blog.csdn.net/luman1991/article/details/70919279 并发数 = QPS*平均响应时间 QPS(TPS):每秒钟request 每秒查询 ...
- 自己动手写reg注册表文件
自己动手写reg注册表文件 2015-01-12 20:23 1161人阅读 评论(1) 收藏 举报 分类: 玩转Windows应用层编程(12) 版权声明:本文为博主原创文章,未经博主允许不得转 ...
- 5分钟Serverless实践 | 构建无服务器的敏感词过滤后端系统
前言 在上一篇“5分钟Serverless实践”系列文章中,我们介绍了什么是Serverless,以及如何构建一个无服务器的图片鉴黄Web应用,本文将延续这个话题,以敏感词过滤为例,介绍如何构建一个无 ...
- java文件和目录的增删复制
在使用java进行开发时常常会用到文件和目录的增删复制等方法.我写了一个小工具类.和大家分享,希望大家指正: package com.wangpeng.utill; import java.io.Fi ...
- remove namespace from xml config file
从xml配置文件中移除命令空间 https://stackoverflow.com/questions/987135/how-to-remove-all-namespaces-from-xml-wit ...