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 拖放dropEvent
1.拖放操作分为两个截然不同的动作: 拖动和放下. 拖动通过 void dragEnterEvent(QDragEnterEvent * event); 来实现. 放下通过 void dropEven ...
- 基于yaf框架和uploadify插件，做的一个导入excel文件，查看并保存数据的功能
思路: 1.首先,页面前端,上传附件,提交给后台,并带一个随机性的参数(可以用时间戳): 2.后端接收附件,做一系列的逻辑处理,无误后,将对应的文件存储在上传的目录下: 3.然后前端,上传附件成功后, ...
- 个人总结-9-session的使用，十天免登陆
昨天查看bootstrap,实现了登录和注册页面的重写. 今天准备加入session实现,十天免登陆等内容. 使用bootstrap直接套用标签页,以实现.
- DNS配置范例
这里使用CentOS 7作为DNS主服务器.(ip:172.18.7.77) 正向解析配置: ]# vim /etc/named.rfc1912.zones zone "opsnote.co ...
- [BZOJ 2763][JLOI 2011] 飞行路线
2763: [JLOI2011]飞行路线 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 3203 Solved: 1223[Submit][Stat ...
- Linux基础入门 - 2
第三节 用户及文件权限管理 3-1.Linux用户管理 Linux 是一个可以实现多用户登陆的操作系统,他们共享一些主机的资源,但他们也分别有自己的用户空间,用于存放各自的文件.但实际上他们的文件都是 ...
- metasploit 渗透测试笔记(基础篇)
0x00 背景 笔记在kali linux(32bit)环境下完成,涵盖了笔者对于metasploit 框架的认识.理解.学习. 这篇为基础篇,并没有太多技巧性的东西,但还是请大家认真看啦. 如果在阅 ...
- 021.11 IO流 序列流
序列流:SequenceInputStream特点:流对象有序排列解决问题:将多个输入流合并成一个输入流,将多个源合并成一个源,对于多个源的操作会变简单. 构造函数参数就是输入流,一初始化就合并了多个 ...
- python面向对象之类成员修饰符
类的所有成员分为: 公有成员,在任何地方都能访问 私有成员,只有在类的内部才能访问 私有成员和公有成员的定义不同:私有成员命名时,前两个字符是下划线.(特殊成员除外,例如:__init__.__c ...
- centos 7.0 查看selinux状态|关闭|开启
Linux在安装好之后通常SELinux都是出于默认开启的状态,开启的情况下会导致一些服务的安装不成功. 在不需要的情况下完全可以关闭掉,下面是在centos 7.0里面如何查看,关闭selinux. ...