原生JS实现旋转木马轮播图特效
大概是这个样子：
首先来简单布局一下（emm...随便弄一下吧，反正主要是用js来整的）
<!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>旋转木马轮播图</title>
<script src="js/index.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
ul, li {
list-style: none;
}
.wrap {
margin: 0 auto;
width: 1050px;
}
.slider {
position: relative;
margin: 50px auto;
height: 400px;
}
.slider li {
position: absolute;
}
.slider li img {
width: 100%;
}
.slider .arrow-l,
.slider .arrow-r{
position: absolute;
top: 0;
display: none;
width: 80px;
height: 400px;
background-size: 80px;
cursor: pointer;
opacity: 0.8;
z-index: 99;
}
.arrow-r {
right: 80px;
background: url(img/next.png) no-repeat 0;
}
.arrow-l {
left: 80px;
background: url(img/prev.png) no-repeat 0;
}
</style>
</head>
<body>
<div class="wrap">
<div class="slider">
<ul>
<li><img src="img/img1.jpg" alt=""></li>
<li><img src="img/img2.jpg" alt=""></li>
<li><img src="img/img3.jpg" alt=""></li>
<li><img src="img/img4.jpg" alt=""></li>
<li><img src="img/img5.jpg" alt=""></li>
</ul>
<div class="arrows">
<i class="arrow arrow-l"></i>
<i class="arrow arrow-r"></i>
</div>
</div>
</div>
</body>
</html>
下边来进入主要部分
其实主要就是动画函数的封装以及对数组的改变
动画函数部分的注释，博主的上一篇博客有写：原生JS实现动画函数的封装。这里就不重复啦~
将图片相关样式（大小、定位、透明度等）存放到arr数组里。
当用户点击左右箭头时，让数组进行相应变化（如果点击右箭头，就删除数组最后那个元素，把它添加到最前边；如果点击左箭头，就删除数组最前边那个元素，把它添加到最后边），改变完数组再调用一下move()函数（让图片轮播）
详细代码如下
window.addEventListener("load", function() {
var arr = [
{ //
width: 450,
top: 60,
left: 0,
opacity: 40,
zIndex: 2
},
{ //
width: 550,
top: 30,
left: 100,
opacity: 70,
zIndex: 3
},
{ // 3 中间图片
width: 650,
top: 0,
left: 200,
opacity: 100,
zIndex: 4
},
{ //
width: 550,
top: 30,
left: 400,
opacity: 70,
zIndex: 3
},
{ //
width: 450,
top: 60,
left: 600,
opacity: 40,
zIndex: 2
}
];
var slider = document.querySelector(".slider");
var lis = slider.querySelectorAll("li");
var arrow_l = slider.querySelector(".arrow-l");
var arrow_r = slider.querySelector(".arrow-r");
// 鼠标移入移出箭头显示隐藏
slider.addEventListener("mouseover", function() {
arrow_l.style.display = 'block';
arrow_r.style.display = 'block';
});
slider.addEventListener("mouseout", function() {
arrow_l.style.display = 'none';
arrow_r.style.display = 'none';
});
var flag = true; // flag节流阀 为了解决点击过快而产生bug
move(); // 先调用一下，为了刚打开浏览器时渲染页面
// 点击左右箭头轮播图片
arrow_r.addEventListener("click", function() {
if(flag) {
flag = false; // 关闭节流阀 等到动画结束了才能继续执行点击操作
arr.unshift(arr.pop()); // 将数组最后边的元素删除，添加到最前边
move(); // 轮播图片
}
});
arrow_l.addEventListener("click", function() {
if(flag) {
flag = false;
arr.push(arr.shift()); // 将数组最前边的元素删除，添加到最后边
move();
}
});
// 让每个图片执行动画
function move() {
for(var i = 0; i < lis.length; i++) {
animate(lis[i], arr[i], function() {
flag = true; // 回调函数，当动画执行完 再把节流阀打开
});
}
}
// 动画函数
function animate(obj, json, callback) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var bool = true;
for(var attr in json) {
var icur = 0;
if(attr == 'opacity') {
icur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
} else {
icur = parseInt(getStyle(obj, attr));
}
var speed = (json[attr] - icur) / 10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if(icur != json[attr]) {
bool = false;
}
if(attr == 'opacity') {
obj.style.filter = 'alpha(opacity = '+ (icur + speed) +')';
obj.style.opacity = (icur + speed) / 100;
} else if(attr == 'zIndex') {
obj.style.zIndex = json[attr];
} else {
obj.style[attr] = icur + speed + 'px';
}
}
if(bool) {
clearInterval(obj.timer);
callback && callback();
}
},15);
}
// 获取属性函数
function getStyle(obj, attr) {
if(obj.currentStyle){ //IE浏览器
return obj.currentStyle[attr];
}else{ //chrome、firefox等浏览器
return getComputedStyle(obj,null)[attr];
}
}
});
原生JS实现旋转木马轮播图特效的更多相关文章
- jQuery与原生js实现banner轮播图
jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...
- 原生JS实现简易轮播图
原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...
- 自己用原生JS写的轮播图，支持移动端触屏滑动，面向对象思路。分页器圆点支持click和mouseover。
自己用原生javascript写的轮播图,面向对象思路,支持移动端手指触屏滑动.分页器圆点可以选择click点击或mouseover鼠标移入时触发.图片滚动用的setInterval,感觉setInt ...
- 自己用原生JS写的轮播图，支持移动端触摸滑动，分页器圆点可以支持mouseover鼠标移入和click点击，高手看了勿喷哈
自己用原生JavaScript写的轮播图,分页器圆点按钮可支持click点击,也可支持mouseover鼠标悬浮触发,同时支持移动端触摸滑动,有兴趣的友友可以试试哈,菜鸟一枚,高手看了勿喷,请多多指正 ...
- 原生 js 左右切换轮播图
使用方法: 可能很多人对轮播图感兴趣,下面奉上本人的 原生 js 轮播代码复制 js 到页面的最底部,样式在 css 里改,js 基本不用动,有什么不懂的可以 加本人 QQ172360937 咨询 或 ...
- photoSlider-html5原生js移动开发轮播图-相册滑动插件
简单的移动端图片滑动切换浏览插件 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css" hre ...
- 原生js写简单轮播图方式１－从左向右滑动
轮播图就是让图片每隔几秒自动滑动,达到图片轮流播放的效果.轮播图从效果来说有滑动式的也有渐入式的,滑动式的轮播图就是图片从左向右滑入的效果,渐入式的轮播图就是图片根据透明度渐渐显示的效果,这里说的是实 ...
- 【原生JS】层叠轮播图
又是轮播?没错,换个样式玩轮播. HTML: <!DOCTYPE html> <html lang="en"> <head> <meta ...
- 原生js实现的轮播图，易用+可多用
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- 高通量计算框架HTCondor(六)——拾遗
目录 1. 正文 1.1. 一些问题 1.2. 使用建议 2. 相关 1. 正文 1.1. 一些问题 如果真正要将HTCondor高通量计算产品化还需要很多工作要做,HTCondor并没有GUI界面, ...
- linq和扩展方法
c#的扩展方法 1.必须是在一个非嵌套.非泛型的静态类中的静态方法 2.至少一个参数,第一个参数附加this,不能有其他修饰符如out.ref 3.第一个参数不能是指针类型 上面例子是自定义的一个扩展 ...
- [NOI2015] 品酒大会 - 后缀数组,并查集,STL,启发式合并
[NOI2015] 品酒大会 Description 对于每一个 \(i \in [0,n)\) 求有多少对后缀满足 LCP 长度 \(\le i\) ,并求满足条件的两个后缀权值乘积的最大值. So ...
- LitElement(二)模板编写基本语法
原文:https://lit-element.polymer-project.org/guide/templates 1.定义一个渲染模板 1.1 基本规则 要用LitElement 组件定义一个模板 ...
- PyQt5学习笔记-从主窗体打开一个子窗体
PyQt5学习笔记-从主窗体打开一个子窗体 软件环境: Eric6+Python3.5+PyQt5 试验目标: 1.点击菜单项Open,打开一个子窗体 2.点击按钮Open,打开一个子窗体 主窗体设计 ...
- SpringBoot整合WEB开发--（一）处理JSON返回数据
1.使用默认的json转换HttpessageConverter Json是目前主流的前后端数据传输方式,SpringMVC中使用消息转化器HttpMessageConverter对JSON的转换提供 ...
- 滑动窗口-洛谷T1866（单调队列）
咕咕咕 单调队列板子题 一.基本 1.单调队列: 特殊的双端队列,内部元素.分为最大队列(单调递增)和最小队列(单调递减)两种 二.应用 本题中:大部分单调队列优化的动态规划问题都和定长连续子区间的最 ...
- requests.packages.urllib3.exceptions.ProxySchemeUnknown: Not supported proxy scheme
python3 -m pip install -U requests[socks]
- Apache Kafka（二）- Kakfa 安装与启动
安装并启动Kafka 1.下载最新版Kafka(当前为kafka_2.12-2.3.0)并解压: > wget http://mirror.bit.edu.cn/apache/kafka/2.3 ...
- LED Decorative Light Manufacturer - LED Neon Rope: 5 Advantages
In the past 100 years, lighting has come a long way. Nowadays, the decorative LED lighting design ca ...