javascript编写的一个完整全方位轮播图效果
1 <!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
} #box {
position: relative;
width: 1000px;
height: 358px;
margin: 100px auto;
} #left {
background-image: url("images/shutter_prevBtn.png");
display: inline-block;
z-index: 5;
width: 50px;
height: 50px;
position: absolute;
left: 0;
top: 50%;
margin-top: -25px;
} #left:hover {
background-position: 0 -48px;
} #right {
background-image: url("images/shutter_prevBtn.png");
display: inline-block;
z-index: 5;
width: 50px;
height: 50px;
position: absolute;
right: 0;
transform: rotate(180deg);
top: 50%;
margin-top: -25px;
} #right:hover {
background-position: 0 -48px;
} #box1 {
width: 200px;
position: absolute;
bottom: 0px;
right: 50%;
margin-right: -100px;
display: flex;
justify-content: space-between;
} span {
display: inline-block;
width: 20px;
height: 20px;
background: white;
border-radius: 50%;
}
</style>
</head> <body>
<div id="box">
<img src="data:images/shutter_1.jpg" alt="">
<i id="left"></i>
<i id="right"></i>
<div id="box1">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<script>
let a = 0, timer;
let img = document.querySelector("img");
let span = document.querySelectorAll("span");
let arr = ['images/shutter_1.jpg', 'images/shutter_2.jpg', 'images/shutter_3.jpg', 'images/shutter_4.jpg'];
function off(num) {//如果a==i那就改变它的颜色，其它不等于那么就 变成白色；
for (let i = 0; i < span.length; i++) {
if (i == num) {
span[i].style["background"] = "red";
} else {
span[i].style["background"] = "white";
}
}
}
function off1() {//间隔性函数封装
timer = setInterval(function () {
off(a);//调用函数
a++;
if (a > arr.length - 1) {//如果a大于了数组的下标减1，那么就进入循环恢复a==0；
a = 0;
}
img.src = arr[a];
}, 1000);
}
function left1() {//调用左边按钮封装函数
left.onmouseover = function () {
clearInterval(timer);
left.onclick = function () {
off(a);
a--;
if (a < 0) {
a = arr.length - 1;
}
img.src = arr[a];
}
}
left.onmouseout = function () {
off1();
}
}
function right1() {//调用右边按钮封装函数
right.onmouseover = function () {
clearInterval(timer);
right.onclick = function () {
off(a);
a++;
if (a >= arr.length) {
a = 0;
}
img.src = arr[a];
}
}
right.onmouseout = function () {
off1();
}
}
function span1() {//调用span圆点封装函数
for (let i = 0; i < span.length; i++) {
span[i].onmouseover = function () {
clearInterval(timer);
a = i;
img.src = arr[a];
off(a);
}
span[i].onmouseout = function () {
off1();
}
}
}
off1();//这调用封装函数来实现间隔性
left1();//调用左边按钮封装函数
right1();//调用右边按钮封装函数
span1();//调用span圆点封装函数
</script>
</body> </html>
javascript编写的一个完整全方位轮播图效果的更多相关文章
- 使用JavaScript制作一个好看的轮播图
目录 使用JavaScript制作出好看的轮播图效果 准备材料 1.图片若干张(包括轮播图和按钮的图片) 2.将按钮的图片应用到按钮上的CSS样式文件 3.实现轮播和点击跳转的JavaScript代码 ...
- 云南农职《JavaScript交互式网页设计》 综合机试试卷②——实现轮播图效果
一.语言和环境 实现语言:HTML,CSS,JavaScript,JQuery. 开发环境:HBuilder. 二.题目(100分): 使用JQuery淡入淡出动画,实现轮播图效果 每隔2秒钟切换一张 ...
- JavaScript实现轮播图效果
我又来了,同志们.老想你们了 捕获小可爱一枚. 下面进入正题:用JavaScript原生代码写轮播图效果. 具体效果就不多说了,网站上面的轮播效果我们都知晓.下面是展示代码 html代码: <d ...
- JS---案例：完整的轮播图---重点！
案例:完整的轮播图 思路: 分5部分做 1. 获取所有要用的元素 2. 做小按钮,点击移动图标部分 3. 做右边焦点按钮,点击移动图片,小按钮颜色一起跟着变 (克隆了第一图到第六图,用索引liObj. ...
- HTML+CSS+Javascript实现轮播图效果
HTML+CSS+Javascript实现轮播图效果 注意:根据自己图片大小来更改轮播图大小. <!doctype html> <html> <head> < ...
- js 实现淘宝无缝轮播图效果，可更改配置参数 带完整版解析代码[slider.js]
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写淘宝无缝轮播图效果 需求分析: ...
- js实现轮播图效果(附源码)--原生js的应用
1.js实现轮播图效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...
- 小程序实践（二）：swiper组件实现轮播图效果
swiper组件类似于Android中的ViewPager,实现类似轮播图的效果,相对于Android的Viewpager,swiper实现起来更加方便,快捷. 效果图: 首先看下swiper支持的属 ...
- 纯CSS实现轮播图效果，你不知道的CSS3黑科技
前言 轮播图已经是一个很常见的东西,尤其是在各大App的首页顶部栏,经常会轮番显示不同的图片. 一提到轮播图如何实现时,很多人的第一反应就是使用Javascript的定时器,当然这种方法是可以实现的. ...
随机推荐
- SVN的正确提交方式
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/Rundy_Deng/article/details/80338093 也会让我们百思不得其解,甚至耽 ...
- HTML 的 style 属性
style 属性用于改变 HTML 元素的样式. This text is in Verdana and red This text is in Times and blue This text is ...
- Linux下部署配置Nginx
1.安装工具包 yum install -y wget 下载工具 yum install -y vim-enhanced vim编辑器 yum install -y make cmake gcc gc ...
- 7、ORM
CRUD(create.retrieve.update.delete) left join right join inner join one2one one2many many2many 1.For ...
- Source InSight context 窗口丢失的解决办法
我没关si的情况下强制关机导致的 Source InSight context 窗口丢失的解决办法 (2010-09-03 13:35:45) 转载▼ 今天早晨改改CLI,上了趟WC,回来发现 ...
- TCP/IP 协议图--计算机网络体系结构分层
计算机网络体系结构分层 计算机网络体系结构分层 不难看出,TCP/IP 与 OSI 在分层模块上稍有区别.OSI 参考模型注重“通信协议必要的功能是什么”,而 TCP/IP 则更强调“在计算机上实 ...
- Asp.net & Aspose.cells 导出
protected void btnExport_Click(object sender, EventArgs e) { DataTable tbBooks = (DataTable)Session[ ...
- 关于数据库SQL优化
1.数据库访问优化 要正确的优化SQL,我们需要快速定位能性的瓶颈点,也就是说快速找到我们SQL主要的开销在哪里?而大多数情况性能最慢的设备会是瓶颈点,如下载时网络速度可能会是瓶颈点,本地复制文件 ...
- Ubuntu root 密码忘记-恢复
@Ubuntu root 密码忘记-恢复 2012-04-27 11:09:22 方法一: 如果用户具有sudo权限,那么直接可以运行如下命令: #sudo su root #passwd #更改密码 ...
- python,dict的setdefault方法
@dict的setdefault方法 先看看文档中的解释 setdefault(...) D.setdefault(k[,d]) -> D.get(k,d), also set D[k]= ...