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的定时器,当然这种方法是可以实现的. ...
随机推荐
- Qt消息机制和事件、事件过滤
一,事件 事件(event)是由系统或者 Qt 本身在不同的时刻发出的.当用户按下鼠标.敲下键盘,或者是窗口需要重新绘制的时候,都会发出一个相应的事件.一些事件在对用户操作做出响应时发出,如键盘事件等 ...
- maven(十)-继承
继承 如果项目划分了多个模块,都需要依赖相似的jar包,只需要创建一个父模块,在它的pom.xml文件中配置依赖jar包.功能模块只需要继承父模块,就可以自动得到其依赖jar包,而不需要在每个模 ...
- Git与Github。
Git是一款免费,开源的分布是版本,用于敏捷高效的处理任何或小或大的项目.分布式相对于集中式的最大区别在于开发者可以提到本地,每个开发者通过克隆,在本地磁盘内拷贝一个完整的GIt仓库. Git的功能特 ...
- hibernate简单入门教程（一）---------基本配置
应用级别所以很粗浅 首先介绍一下hibernate框架: 1.优秀的持久化(通俗讲把内存上的短时间运行信息存储在持久化硬盘上)框架. 2.作用于持久层,因为没什么侵入性,所以同样适用于其他层面上的存储 ...
- CentOS随笔 - 2.CentOS7安装ftp支持(vsftpd)
前言 转帖请注明出处: http://www.cnblogs.com/Troy-Lv5/ 在前一篇文章中介绍了在虚拟机中安装CentOS7, 接下来就要进行配置了, 第一个就是安装ftp支持. 要不然 ...
- 套接字和标准I/O缓冲区
设置标准I/O函数缓冲区的主要目的是为了提高性能.但套接字中的缓冲主要是为了实现TCP协议而设立的.例如,TCP传输中丢失数据时将再次传递,而再次发送数据则意味着在某地保存了数据.存在什么地方呢?套接 ...
- 记录windows下编译chromium，备忘
编译windows下chromium,时间:20170619, 官方地址:https://chromium.googlesource.com/chromium/src/+/master/docs/wi ...
- 浅析VS2010反汇编
第一篇 1. 怎样进行反汇编 在调试的环境下,我们能够很方便地通过反汇编窗体查看程序生成的反汇编信息. 例如以下图所看到的. 记得中断程序的运行,不然看不到反汇编的指令 看一个简单的程序及其生成的汇编 ...
- markdown编辑器安装
打算使用MarkDown了,打算整理自己的知识了. 多年以前,喜欢将自己看到好东西,转载在博客.或者将遇到过的问题以及解决方案,记录在博客.06毕业后为了生活折腾,Tom网上的博客无暇东顾,等稳定闲下 ...
- 理解活在Iphone中的那些App （四）
App生存环境之宿主环境 终于开始说一些技术性的话题了,从这里开始的一些技术细节的东西,以前我也没有太刻意的注意过.为了写这个也是刚刚看了一点资料,如果有纰漏,恳请指出. 一个App生存的宿主环境主要 ...