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点击右按钮,图片切换下一张 * ...
随机推荐
- pycharm 安装与激活
---恢复内容开始--- 环境:Windows 专业版 1.下载安装 1.到官网下载专业版(专业版功能更全(但要激活码),社区版免费) 2.下载完后双击.exe 文件进行安装 NEXT 下一步 NEX ...
- IDEA快速定位错误快捷键
- Spring Cloud Security&Eureka安全认证（Greenwich版本）
Spring Cloud Security&Eureka安全认证(Greenwich版本) 一·安全 Spring Cloud支持多种安全认证方式,比如OAuth等.而默认是可以直接添加spr ...
- scrapy中的Request和Response对象
前言: 如果框架中的组件比做成是人的各个器官的话,那个Request和Response就是血液,Item就是代谢产物 Request对象: 是用来描述一个HTTP请求,其构造参数有 url 请求的UR ...
- TZOJ 3042 切蛋糕(并查集)
描述 KK是个心灵手巧的好姑娘,她做了一个大蛋糕请她的好朋友们来品尝.这个蛋糕分成n×n个正方形小格,每个小格包含一块水果.KK要把蛋糕切成若干块,显然她不会破坏任意一个小格.无聊的某同学在她切蛋糕时 ...
- vim编辑器操作②
本文主要介绍vim的常用编辑命令: 字符编辑: x:删除光标所在处的字符: #x:删除光标所在处起始的#个字符: 替换命令: r:替换光标所在处的字符: rCHAR; 例如:替换list中的l为大写L ...
- htmlunit学习之java.lang.NoSuchMethodError: com.gargoylesoftware.htmlunit.WebClient.getOptions()Lcom/gargoylesoftware/htmlunit/WebClientOptions;
运行到这里就报错 java.lang.NoSuchMethodError: com.gargoylesoftware.htmlunit.WebClient.getOptions()Lcom/gargo ...
- CentOS7 安装 Nginx 1.12.1
安装准备: nginx 依赖的一些 lib 库: yum install gcc-c++ yum install pcre pcre-devel yum install zlib zlib-devel ...
- 洛谷P2347 砝码称重 [2017年4月计划 动态规划01]
P2347 砝码称重 题目描述 设有1g.2g.3g.5g.10g.20g的砝码各若干枚(其总重<=1000), 输入输出格式 输入格式: 输入方式:a1 a2 a3 a4 a5 a6 (表示1 ...
- node中__dirname、__filename表示的路径
__dirname 表示当前文件所在的目录的绝对路径__filename 表示当前文件的绝对路径module.filename ==== __filename 等价process.cwd() 返回运行 ...