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 ...
随机推荐
- RSYNC最简实施
只是内网同步,故而可以省略很多安全方面的东东.不需要通过ssh,而是通过rsync协议.不需要用户名认证,保证只读. rsync用standalone的daemon方式,而不用service方式操作. ...
- I/O 模型及其设计模式
来源:伯乐在线 - 咸菜 链接:http://blog.jobbole.com/104638/ 前言 I/O在软件开发中的重要性无需多言,无论是在操作系统.网络协议.DBMS这种底层支撑软件还是在移动 ...
- samba 奇怪问题
有一个centos 7 samba服务器,配置如下: [root@proxy223 20150331]# cat /etc/samba/smb.conf [global] workgroup = W ...
- Java并发：线程安全的单例模式
转载请注明出处:jiq•钦'stechnical Blog 1.饿汉式 public class Singleton { private final static Singleton INSTANCE ...
- Solid Edge如何快速装配，如何截取组装关系式
我们点击装配体的任意零件,下方将显示他的装配关系,由于一些零件的装配关系是固定的,比如螺栓,肯定要做一个面贴和,再做一个同轴,所以我们可以保存这些固有的步骤,不用再每次挨个点击这些装配关系. 点击 ...
- 躁动不安的const
就是用来恐吓你的 我能想到的,最短的.且const最多的一个语句是: int const * fun(int const*const a[],const int index)const; 而这个语句还 ...
- 解析java中volatilekeyword
在java多线程编程中常常volatile,有时候这个keyword和synchronized 或者lock常常有人混淆.详细解析例如以下: 在多线程的环境中会存在成员变量可见性问题: java的每一 ...
- BNU 13064 Dice (I) 前缀和优化DP
Dice (I) You have N dices; each of them has K faces numbered from 1 to K. Now you have arranged th ...
- POJ 3221 Diamond Puzzle.
~~~~ 题目链接:http://poj.org/problem? id=3221 显然是BFS找最优解.但是终止条件不好写.看到有一仅仅队交上去一直TLE. 比赛完了看题解原来是以目标状态为起点,B ...
- Codeforces Round #119 (Div. 2)A. Cut Ribbon
A. Cut Ribbon time limit per test 1 second memory limit per test 256 megabytes input standard input ...