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的定时器,当然这种方法是可以实现的. ...
随机推荐
- centos虚拟机网卡配置
连接模式为NAT
- Scratch3.0——项目层次结构
原文地址:https://blog.csdn.net/weiwoyonzhe/article/details/86603757 简要介绍: 本文旨在介绍scratch3.0项目层次结构及关键功能. 源 ...
- AD账户锁定策略
AD账户锁定策略在一个域中可以有多套,密码策略只能有一套
- Centos7下面安装eclipse
下载Eclipse压缩包 下载路径 http://mirrors.neusoft.edu.cn/eclipse/technology/epp/downloads/release/luna/SR2/ec ...
- [EffectiveC++]item23：Prefer non-member non-friend functions to member functions
99页 导致较大封装性的是non-member non-friend函数,因为它并不增加“能否访问class内之private成分”的函数数量.
- Android Studio Git .gitignore文件配置忽略不需要的文件
转载请标明出处: http://www.cnblogs.com/why168888/p/6440805.html 本文出自:[Edwin博客园] # Built application files * ...
- PhoneGap检测设备网络连接情况
一.网络连接状态列表 Phonegap 网络连接通过 navigator.network.connection.type 来获取,一般有一下几种状态 1. Connection.UNKNOWN ...
- POJ-2452 Sticks Problem 二分+RMQ
题目链接: https://cn.vjudge.net/problem/POJ-2452 题目大意: 给出一个数组a,求最大的j-i满足 i<j && a[i] ... a[j] ...
- keepalived.md
配置文件说明 global_defs区域 global_defs { notification_email { acassen@firewall.loc failover@firewall.loc s ...
- - (void)addConstraints:(NSArray<__kindof NSLayoutConstraint *> *)constraints
Adds multiple constraints on the layout of the receiving view or its subviews. All constraints mus ...