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 ...
随机推荐
- 这个贴子的内容值得好好学习--实例详解Django的 select_related 和 prefetch_related 函数对 QuerySet 查询的优化
感觉要DJANGO用得好,ORM必须要学好,不管理是内置的,还是第三方的ORM. 最最后还是要到SQL.....:( 这一关,慢慢练啦.. 实例详解Django的 select_related 和 p ...
- LeetCode 21. Merge Two Sorted Lists （合并两个有序链表）
Merge two sorted linked lists and return it as a new list. The new list should be made by splicing t ...
- Struts2之类型转换器的使用
一.学习案例:通过在输入页面(input.jsp)用同一个输入框同一时候输入username和password,通过类型转换器在输出页面(output.jsp)分别输出username和passwor ...
- 关于PROFIBUS Master（H）不能正确识别并处理 DP-Slave 回复的RS帧的一些思考
图1.是在測试过程中,发现PROFIBUS Master(H)不能正确识别并处理 DP-Slave 回复的RS帧.引起Slave回复 RS 帧的操作是"断开Slave与Master之间的PR ...
- CoffeeScript里的字符串插值
拼接字符串是我们常干的事情.与其用很多的 "" + "",不如用一下字符串插值,可读性好些. 方法是在字符串中加入#{ 变量.表达式.函数等} getOther ...
- mac关闭和开启启动声
1 关闭 sudo nvram SystemAudioVolume=%01 2 开启 sudo nvram -d SystemAudioVolume
- Android属性系统简介【转】
本文转载自:http://www.cnblogs.com/l2rf/p/6610348.html 1.简介 在android 系统中,为统一管理系统的属性,设计了一个统一的属性系统.每个属性都有一个名 ...
- RijndaelManaged 加密
public string Encrypt(string str) { string result = null; if (str == null) { return result; } try { ...
- Parlay Wagering
http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=2833 题意:讲述了一种投小钱赢大钱的赌博方式, ...
- 0606-工厂模式、单例模式、DBDA的单例和完整功能
工厂模式:只要指定类名,就可以据此获取一个该类的对象. 单例模式:某个类,只允许其“创建”出一个对象. 单例的方法:三私一公(一个私有化对象,一个私有化构造方法,一个私有化克隆方法,一个公共方法返回对 ...