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点击右按钮,图片切换下一张 * ...
随机推荐
- mysql把表的指定字段值赋给本表另一个字段
原本是主键一对一关联的,后来发现这样操作很不方便,改成主外键一对一 所以添加一个外键字段bodyId(文章正文单独存一个表) UPDATE t_article SET bodyId=id; 但是等了半 ...
- 关于使用注解设置token免拦截 和 必要 的权限拦截
先说一下这样子做的原理:将某一个注解配置在方法头部,在spring实例化的时候会将注解以切面的形式注入给方法,在拦截的地方判断当前方法有没有注入指定的注解类. 1.先声明一个注解类(类中不需要做任何逻 ...
- 【One by one系列】一步步开始使用Redis吧(一)
One by one,一步步开始使用Redis吧(一) 最近有需求需要使用redis,之前也是随便用用,从来也没有归纳总结,今天想睡觉,但是又睡不着,外面阳光不错,气温回升了,2019年6月1日,成都 ...
- 彭亮—Python学习
1.1 Python简单介绍 1.2 安装Python和配置环境 1.配置Python 1.1 下载Python(直接去官网下载就可以) 1.2 安装Python(点解默认安装即可 ...
- Leetcode455.Assign Cookies分发饼干
假设你是一位很棒的家长,想要给你的孩子们一些小饼干.但是,每个孩子最多只能给一块饼干.对每个孩子 i ,都有一个胃口值 gi ,这是能让孩子们满足胃口的饼干的最小尺寸:并且每块饼干 j ,都有一个尺寸 ...
- MAC中已有的虚拟环境在pycharm 中进行调用
首先确定虚拟环境的路径: 打开工作环境配置文件,找到工作目录: 在pycharm中解释器中找到工作目录中对应的虚拟环境进行配置就可以了
- 了解真实的『REM』多终端屏幕适配
作者:hbxeagle 链接:github.com/hbxeagle/rem/blob/master/README.md rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用.使 ...
- Eclipse配置Maven详细教程
一.使用eclipse自带的maven插件 首先,现在下载Eclipse Mars之后的版本,基本上都自带了maven插件,无需自己再安装maven. 有几个注意点: 1.默认的本地仓库的目录是在C: ...
- mysql5 msi安装版
有安装版为啥要用解压版? 搞不懂为啥大佬们都喜欢解压版? http://ftp.ntu.edu.tw/MySQL/Downloads/MySQLInstaller/mysql-installer-co ...
- python实例 函数
#! /usr/bin/python # -*- coding: utf8 -*- def sum(a,b): return a+b func = sum r = func(5,6) prin ...