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的定时器,当然这种方法是可以实现的. ...
随机推荐
- net 4.0+EF6+Sqlite 使用，安装，打包
开发 1.因为EF不支持Codefirst,开始可以使用SQL来进行开发. 部署安装 2.然后可以找到SQL转Sqlite工具(http://www.cnblogs.com/walkingp/arch ...
- 安装Xcode主题
安装Xcode主题 下载地址 https://github.com/YouXianMing/Xcode-Themes 安装教程 1. 安装文件夹中的字体 2. 如下图,执行 ./cp_themes.s ...
- [翻译] DXPopover
DXPopover A Popover mimic Facebook app popover using UIKit. 使用UIKit框架写了一个类似于Facebook的pop效果的动画. The c ...
- Python学习---django模板继承180123
django模板继承 --20180123 a.include 模板标签 b.extend(继承)模板标签 ------include 模板标签 该标签允许在(模板中)包含其它的模板的内容. 标签的 ...
- Permission Denial: opening provider 隐藏的android:exported属性的含义
Permission Denial: opening provider 隐藏的android:exported属性的含义 2013-03-07 13:17 227人阅读 评论(0) 收藏 举报 场景: ...
- 一次失败的尝试hdfs的java客户端编写（在linux下使用eclipse）
一次失败的尝试hdfs的java客户端编写(在linux下使用eclipse) 给centOS安装图形界面 GNOME桌面环境 https://blog.csdn.net/wh211212/artic ...
- codeforces 388D Fox and Perfect Sets（线性基+数位dp）
#include<bits/stdc++.h> using namespace std; #define fi first #define se second #define mp mak ...
- Alpha Scrum2
Alpha Scrum2 牛肉面不要牛肉不要面 Alpha项目冲刺(团队作业5) 各个成员在 Alpha 阶段认领的任务 林志松:督促和监督团队进度.协调组内合作,前端页面编写,博客发布 林书浩.陈远 ...
- Oracle Golden Gate概要
Oracle GoldenGate简介 Oracle Golden Gate用于源数据库与目标数据库的数据复制备份:可以在异构的环境(各种操作系统和数据库)之间实现数据亚秒级的实时复制备份:以及可以在 ...
- mac使用指南--软件安装部分
最近因为开发需要,换了个mac,发现和Windows下面的操作和习惯真是千差万别啊,在这里记录一下,有需要的也可以参考一下. 安装前强烈建议根据个人习惯设置好触控板!!!什么单击双击选中拖拽的统统设好 ...