JavaScript--轮播图_带计时器
轮播图效果：
实现的功能：
1.鼠标移入，左右按钮显示
2.右下叫小圆点鼠标移入，进入下一张图
3.左右按钮点击，右下小圆点页跟随变更
4.自动开启计时器，鼠标移入右下叫小圆点区，计时器停止，鼠标移出小圆点区，计时器继续（自动下一张图片）
5.移入左右按钮，计时器消失，移出左右按钮计时器出现，封装了公共切换图片
实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>总有人比你富有，却比你更聪明更努力！</title>
<style type="text/css">
/* css 重置 */
* {
margin: 0;
padding: 0;
list-style: none;
} body {
background: #fff;
font: normal 12px/22px 宋体;
} img {
border: 0;
} a {
text-decoration: none;
color: #333;
} /* 本例子css */
.slideBox {
width: 790px;
height: 340px;
overflow: hidden;
position: relative;
border: 1px solid #ddd;
margin: 50px auto;
} .bd .hd {
height: 20px;
overflow: hidden;
position: absolute;
right: 5px;
bottom: 5px;
z-index: 1;
} .bd .hd ul {
overflow: hidden;
zoom: 1;
float: left!important;
} .bd .hd ul li {
float: left;
margin-right: 5px!important;
width: 20px;
height: 20px;
line-height: 20px;
font-weight: bold;
text-align: center;
background: #fff;
cursor: pointer;
border-radius: 50%;
} .bd .hd ul li.on {
background: #f00;
color: #fff;
} .slideBox .bd {
position: relative;
height: 100%;
z-index: 0;
} /* ----------------------- */
.slideBox .bd li {
zoom: 1;
vertical-align: middle;
left: 0;
top: 0;
} .slideBox .bd li.first {
z-index: 1;
} /* ----------------------- */
.slideBox .bd img {
width: 790px;
height: 340px;
display: block;
} .slideBox .prev,
.slideBox .next {
position: absolute;
left: 0;
top: 50%;
margin-top: -25px;
display: none;
width: 32px;
height: 40px;
background: rgba(0,0,0,0.3);
filter: alpha(opacity=50);
opacity: 0.5;
text-align: center;
font-size: 30px;
font-weight: bold;
color: #fff;
line-height: 40px;
} .slideBox .next {
left: auto;
right: 0;
background-position: 8px 5px;
} .slideBox .prev:hover,
.slideBox .next:hover {
filter: alpha(opacity=100);
opacity: 1;
} </style>
</head>
<body>
<div id="slideBox" class="slideBox"> <div class="bd" id="bd">
<div class="hd">
<ul id="control">
<li class="on"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div> <ul>
<li><a href="#"><img id="bigImg" src="data:images/01.jpg"/></a></li>
</ul>
<a class="prev" id="prev" href="javascript:;" ><</a>
<a class="next" id="next" href="javascript:;">></a>
</div> </div>
</body>
</html>
<script> // 公共获取事件源函数
function $(id) {
return document.getElementById(id);
}
// 切换轮播图
function changImg(imgIndex) {
$('bigImg').src= imgArr[imgIndex];
console.log(imgIndex);
// 排他思想
for(var j = 0 ; j < liBtns.length ; j++) {
liBtns[j].className = "";
}
// 设置小红点样式
liBtns[imgIndex].className = 'on';
}
// 功能需求类似tab栏，也可参考线上轮播图效果
// 获取轮播图区
// 获取轮播图
var imgArr = [
"images/01.jpg",
"images/02.jpg",
"images/03.jpg",
"images/04.jpg",
"images/05.jpg"
];
// 前后按钮功能：1.鼠标移入轮播图区，显示前后按钮，移出消失前后按钮
$('bd').onmouseover = function () {
$('prev').style.display = "block";
$('next').style.display = "block";
}
$('bd').onmouseout = function () {
$('prev').style.display = "none";
$('next').style.display = "none";
}
// 记录当前图片下标-- 为了图片索引值同步
var imgIndex = 0; /* 计时器,3秒切换到下一张轮播图*/
var t; // 计时器变量
function interval() {
t = setInterval(
function () {
imgIndex+1 == imgArr.length ? imgIndex = 0:imgIndex ++;
// 设置下一张图片
changImg(imgIndex);
}
,3000);
} // 鼠标移入圆点区，关闭计时器
$('control').onmouseover = function () {
clearInterval(t);
}
// 鼠标移开圆点区，开启计时器自动切换轮播图
$('control').onmouseout = function () {
interval();
}
// 鼠标移入上，下一张图片的按钮是关闭计时器
$('next').onmouseover = function () {
clearInterval(t);
}
$('prev').onmouseover = function () {
clearInterval(t);
} // 把鼠标移出上下一张图片区域,开启计时器
$('next').onmouseout = function () {
interval();
}
$('prev').onmouseout = function () {
interval();
}
interval(); // 圆点鼠标移到上面图片轮播
var liBtns = $('control').getElementsByTagName('li');
for (var i = imgIndex ; i < liBtns.length ; i++) {
// 设置当前按钮下标
liBtns[i].index = i;
liBtns[i].onmouseover = function () {
changImg(this.index);
imgIndex = this.index;
}
} /*上下轮播图*/
// 下一张轮播图
$('next').onclick = function () {
// 下一张图片的地址是当前图片地在数组中的下标加1,并且在图片下标等于数组长度的时，重调图片数组下标为0，完成循环轮播
imgIndex+1 == imgArr.length ? imgIndex = 0:imgIndex ++;
// 设置下一张图片
changImg(imgIndex); }
// 上一张轮播图
$('prev').onclick = function () {
// 下一张图片的地址是当前图片地在数组中的下标减1，并且在图片下标小于0时，重调数组下标为图片数组最后一张图片，完成循环轮播
imgIndex-1 < 0 ? imgIndex = imgArr.length-1 :imgIndex --;
// 设置上一张轮图片
changImg(imgIndex);
} </script>
下面是轮播图的小红点是JS动态生成的：
主要与上面代码的区别是： 灰色代码区的HTML结构部分 黄色代码区域的JS部分
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>总有人比你富有，却比你更聪明更努力！</title>
<style type="text/css">
/* css 重置 */
* {
margin: 0;
padding: 0;
list-style: none;
} body {
background: #fff;
font: normal 12px/22px 宋体;
} img {
border: 0;
} a {
text-decoration: none;
color: #333;
} /* 本例子css */
.slideBox {
width: 790px;
height: 340px;
overflow: hidden;
position: relative;
border: 1px solid #ddd;
margin: 50px auto;
} .bd .hd {
height: 20px;
overflow: hidden;
position: absolute;
right: 5px;
bottom: 5px;
z-index: 1;
} .bd .hd ul {
overflow: hidden;
zoom: 1;
float: left!important;
} .bd .hd ul li {
float: left;
margin-right: 5px!important;
width: 20px;
height: 20px;
line-height: 20px;
font-weight: bold;
text-align: center;
background: #fff;
cursor: pointer;
border-radius: 50%;
} .bd .hd ul li.on {
background: #f00;
color: #fff;
} .slideBox .bd {
position: relative;
height: 100%;
z-index: 0;
} /* ----------------------- */
.slideBox .bd li {
zoom: 1;
vertical-align: middle;
left: 0;
top: 0;
} .slideBox .bd li.first {
z-index: 1;
} /* ----------------------- */
.slideBox .bd img {
width: 790px;
height: 340px;
display: block;
} .slideBox .prev,
.slideBox .next {
position: absolute;
left: 0;
top: 50%;
margin-top: -25px;
display: none;
width: 32px;
height: 40px;
background: rgba(0,0,0,0.3);
filter: alpha(opacity=50);
opacity: 0.5;
text-align: center;
font-size: 30px;
font-weight: bold;
color: #fff;
line-height: 40px;
} .slideBox .next {
left: auto;
right: 0;
background-position: 8px 5px;
} .slideBox .prev:hover,
.slideBox .next:hover {
filter: alpha(opacity=100);
opacity: 1;
} </style>
</head>
<body>
<div id="slideBox" class="slideBox"> <div class="bd" id="bd">
<div class="hd">
<ul id="control"> </ul>
</div> <ul>
<li><a href="#"><img id="bigImg" src="data:images/01.jpg"/></a></li>
</ul>
<a class="prev" id="prev" href="javascript:;" ><</a>
<a class="next" id="next" href="javascript:;">></a>
</div> </div>
</body>
</html>
<script>
// 记录当前图片下标-- 为了图片索引值同步
var imgIndex = 0;
var t; // 计时器变量
// 公共获取事件源函数
function $(id) {
return document.getElementById(id);
}
// 切换轮播图
function changImg(imgIndex) {
$('bigImg').src= imgArr[imgIndex];
console.log(imgIndex);
// 排他思想
for(var j = 0 ; j < liBtns.length ; j++) {
liBtns[j].className = "";
}
// 设置小红点样式
liBtns[imgIndex].className = 'on';
}
// 功能需求类似tab栏，也可参考线上轮播图效果
// 获取轮播图区
// 获取轮播图
var imgArr = [
"images/01.jpg",
"images/02.jpg",
"images/03.jpg",
"images/04.jpg",
"images/05.jpg"
]; //自动生成li
// 默认设置第一个li的className是on
// 生成第一个默认li带并设置className = "on"
var liArr = [];
for(var i = 0 ; i < imgArr.length ; i++ ) {
liArr.push('<li></li>')
}
// 转换成字符串
$('control').innerHTML = liArr.join('');
// 设置属性
$('control').children[0].setAttribute("class","on") // 前后按钮功能：1.鼠标移入轮播图区，显示前后按钮，移出消失前后按钮
$('bd').onmouseover = function () {
$('prev').style.display = "block";
$('next').style.display = "block";
}
$('bd').onmouseout = function () {
$('prev').style.display = "none";
$('next').style.display = "none";
} //下一张图片函数提取
function nextImg() {
imgIndex+1 == imgArr.length ? imgIndex = 0:imgIndex ++;
// 设置下一张图片
changImg(imgIndex);
} /* 计时器,3秒切换到下一张轮播图*/ function interval() {
t = setInterval(nextImg,3000);
} // 鼠标移入圆点区，关闭计时器
$('control').onmouseover = function () {
clearInterval(t);
}
// 鼠标移开圆点区，开启计时器自动切换轮播图
$('control').onmouseout = function () {
interval();
}
// 鼠标移入上，下一张图片的按钮是关闭计时器
$('next').onmouseover = function () {
clearInterval(t);
}
$('prev').onmouseover = function () {
clearInterval(t);
} // 把鼠标移出上下一张图片区域,开启计时器
$('next').onmouseout = function () {
interval();
}
$('prev').onmouseout = function () {
interval();
}
interval(); // 圆点鼠标移到上面图片轮播
var liBtns = $('control').getElementsByTagName('li');
for (var i = imgIndex ; i < liBtns.length ; i++) {
// 设置当前按钮下标
liBtns[i].index = i;
liBtns[i].onmouseover = function () {
changImg(this.index);
imgIndex = this.index;
}
} /*上下轮播图*/
// 下一张轮播图
$('next').onclick = nextImg;
// 上一张轮播图
$('prev').onclick = function () {
// 下一张图片的地址是当前图片地在数组中的下标减1，并且在图片下标小于0时，重调数组下标为图片数组最后一张图片，完成循环轮播
imgIndex-1 < 0 ? imgIndex = imgArr.length-1 :imgIndex --;
// 设置上一张轮图片
changImg(imgIndex);
} </script>
JavaScript--轮播图_带计时器的更多相关文章
- JavaScript 轮播图
这是我自己做的一个轮播图,大家可以看看 ,我还没进行优化.有改进的地方可以私聊 布局什么的你们自己搞定吧 <div class="slider" id="circl ...
- 练习:javascript轮播图效果
javascript轮播自动播放切换滑过停止,上一页/下一页 <!DOCTYPE html> <html lang="en"> <head> & ...
- JavaScript轮播图
需求: 鼠标移动到下标页码时,也转换到相对应的图片: 多张图片可以自动轮播: 鼠标移动至图片时,停止自动轮播: 可以手动左右调节: <!DOCTYPE html> <html lan ...
- 超详细的原生JavaScript轮播图（幻灯片）的制作
本次轮播图的制作主要分为3个部分,分别是:设置定时器自动轮播:点击左右切换按钮轮播:下方点击按钮轮播.具体实现步骤如下: (效果图) html部分代码如下: <div class="s ...
- JavaScript 轮播图实例
HTML代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...
- JavaScript 自适应轮播图
代码 话不多说,先上代码,方便复制粘贴.演示 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- 带轮播图、导航栏、商品的简单html，以及轮播图下边数字随轮播图的改变而改变
---恢复内容开始--- 在做这个的时候,最不会的是中间轮播图下边的数字是如何实现转变的,后来加入了jQuery就能实现了. css部分: <style type="text/css& ...
- 自己用原生JS写的轮播图，支持移动端触摸滑动，分页器圆点可以支持mouseover鼠标移入和click点击，高手看了勿喷哈
自己用原生JavaScript写的轮播图,分页器圆点按钮可支持click点击,也可支持mouseover鼠标悬浮触发,同时支持移动端触摸滑动,有兴趣的友友可以试试哈,菜鸟一枚,高手看了勿喷,请多多指正 ...
- jquery 广告轮播图
轮播图 /*轮播图基本功能: * 1图片切换 * 1.1图片在中间显示 * 1.2图片淡入淡出 * 2左右各有一个按钮 * 2.1点击左按钮,图片切换上一张 * 2.2点击右按钮,图片切换下一张 * ...
随机推荐
- Java虚拟机系列（三）---内存溢出情况及解决方法
因为Java虚拟机内存有堆内存.方法区.虚拟机栈.本地方法栈和程序计数器五部分组成,其中程序计数器是唯一一块不会发生内存溢出异常的内存区,所以只有四类内存区可能发生内存溢出异常,其中虚拟机栈和本地方法 ...
- oracel 管理维护
共享池中的缓存: 绑定变量是一种优化执行的方式. lgwr 重做日志进程dbwr 数据写进程smon 系统监督进程pmon 进程监督进程ckpt 校验点进程 arch 归档日志进程 spool 命令可 ...
- Java程序员面试题收集（5）
Java基础方面: 1.作用域public,private,protected,以及不写时的区别 答:区别如下: 作用域 当前类 同一package 子孙类 其他package public √ √ ...
- iOS学习笔记-084.粒子效果——路径移动
https://blog.csdn.net/qiwenmingshiwo/article/details/75806637 粒子效果路径移动一说明1 效果2 步骤分析二代码1 VCViewh2 VCV ...
- 【python之路26】模块
模块简介 一.time模块二.sys模块三.datetime模块四.pickle模块 五.json模块六.OS模块七.hashlib加密模块八.第三方模块的安装方法九.requests模块十.XML模 ...
- TZ_16_Vue定义全局组件和局部组件
1.定义全局组件 我们通过Vue的component方法来定义一个全局组件. <div id="app"> <!--使用定义好的全局组件--> <co ...
- TZ_05_Spring_annotation常见注解
Spring常用的注解大全和解释 注解 解释 @Controller 组合注解(组合了@Component注解),应用在MVC层(控制层),DispatcherServlet会自动扫描注解了此注解的类 ...
- web前端学习（四）JavaScript学习笔记部分（7）-- JavaScript DOM对象控制HTML元素详解
1.方法 getElementsByName() 获取name 可以获取一个数组类型数据(参数加引号) getElementsByTagName() 获取元素 getAttribute() 获取元 ...
- [转]JS设计模式-单例模式(二)
单例模式是指保证一个类仅有一个实例,并提供一个访问它的全局访问点. 单例模式是一种常用的模式,有一些对象往往只需要一个,比如线程池.全局缓存.浏览器中的window对象等.在javaScript开发中 ...
- 八大 IoT 安全关键技术解析
IoT 设备的增长也伴随着网络攻击的风险的增长,因此在设计产品时就必须考虑到系统的安全. 高德纳咨询公司最近的报告预测,到 2020 年,全世界将有 200.4 亿的物联网设备相互连接,且平均每天约还 ...