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点击右按钮,图片切换下一张 * ...
随机推荐
- 左神算法书籍《程序员代码面试指南》——2_02在单链表和双链表中删除倒数第k个字节
[题目]分别实现两个函数,一个可以删除单链表中倒数第K个节点,另一个可以删除双链表中倒数第K个节点.[要求]如果链表长度为N,时间复杂度达到O(N),额外空间复杂度达到O(1).[题解]从头遍历链表, ...
- DLINK 企业路由器内网部署web开启端口转发后还需要开启是否支持端口回流功能
跑后台使用的服务器,配置一般都很低,带宽只有2Mb 一些大型文件比如app的更新包使用这种服务器不可行 但是公司的网络是100Mb对等静态ip专线 所以能利用起来,每年将会省下8万块 说干就干,这个步 ...
- Flask中cookie和session设置与csrf原理攻防
Flask之操作cookie app.py from flask import Flask, request, Response app = Flask(__name__) @app.route('/ ...
- 2019.10.29 csp-s模拟测试93 反思总结
T1: 求出前缀和,三维偏序O(nlog2n)CDQ 二维其实就可以 #include<iostream> #include<cstdio> #include<cstri ...
- Java下利用Jackson进行JSON解析和序列化1
Java下常见的Json类库有Gson.JSON-lib和Jackson等,Jackson相对来说比较高效,在项目中主要使用Jackson进行JSON和Java对象转换,下面给出一些Jackson的J ...
- PLSQLDeveloper链接报错 解决办法
PLSQL Developer 9.06.1665中文破解版 亲们,win7 64位系统现在还没有PLSQLDeveloper可以使用,但是怎么办呢.好的,下面教大家怎么在64位系统下安装PLSQLD ...
- id 工具: 查询用户所对应的UID 和GID 及GID所对应的用户组
id 工具是用来查询用户信息,比如用户所归属的用户组,UID 和GID等:id 用法极为简单:我们举个例子说明一下: 语法格式: id [参数] [用户名] 至于有哪些参数,自己查一下 id -- ...
- ubuntu下搜狗输入法待选框中文乱码问题解决（重启搜狗输入法）
简单的三个命令就可以解决 killall fcitx //关闭fcitx killall sogou-qimpanel //关闭搜狗输入法 fcitx //打开fcitx
- git pull拉取远程分支时出现冲突
现象:在git clone一个项目后,默认是master分支,但是如果想要切换到另一个已经存在的dev分支,那么不要先在本地创建dev分支再拉取远程的dev分支,而是应该直接切换到dev分支,然后再拉 ...
- [Array]448. Find All Numbers Disappeared in an Array
Given an array of integers where 1 ≤ a[i] ≤ n (n = size of array), some elements appear twice and ot ...