轮播图--使用原生js的轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图-不用jquery</title>
<style>
*{
padding:0;
margin:0;
}
.view{
width: 1000px;
height: 600px;
margin: 0px auto;
margin-top:30px;
position: relative;
}
.view > ul{
list-style: none;
width: 100%;
height: 100%;
transform: rotate3d(1,1,0,0deg);
transform-style: preserve-3d; }
.view > ul > li{
width: 20%;
float: left;
height: 100%;
position: relative;
transform-style: preserve-3d;
transition: transform ;
transition-duration: 0.5s; }
.view > ul > li > span{
display: block;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top:0;
}
.view > ul > li > span:nth-of-type(1){
background: url("./img/img1.jpg");
transform: translateZ(300px);
}
.view > ul > li > span:nth-of-type(2){
background: url("./img/img2.jpg");
transform: translateY(-300px) rotate3d(1,0,0,90deg);
}
.view > ul > li > span:nth-of-type(3){
background: url("./img/img3.jpg");
transform: translateZ(-300px) rotate3d(1,0,0,180deg);
}
.view > ul > li > span:nth-of-type(4){
background: url("./img/img4.jpg");
transform: translateY(300px) rotate3d(1,0,0,-90deg);
}
.view > ul > li:nth-of-type(1) > span{
background-position: 0,0;
}
.view > ul > li:nth-of-type(2) > span{
background-position: -100%,0;
}
.view > ul > li:nth-of-type(3) > span{
background-position: -200%,0;
}
.view > ul > li:nth-of-type(4) > span{
background-position: -300%,0;
}
.view > ul > li:nth-of-type(5) > span{
background-position: -400%,0;
}
.view > .button > a{
position: absolute;
top:50%;
transform: translateY(-50%);
display: block;
background: rgba(0,0,0,0.5);
height: 50px;
line-height: 50px;
text-decoration: none;
text-align: center;
width: 50px;
color: #fff;
font-size: 30px;
}
.view > .button > a.pre{
left:5px;
}
.view > .button > a.next{
right:5px;
}
</style>
</head>
<body>
<div class="view">
<ul>
<li>
<span></span>
<span></span>
<span></span>
<span></span>
</li>
<li>
<span></span>
<span></span>
<span></span>
<span></span>
</li>
<li>
<span></span>
<span></span>
<span></span>
<span></span>
</li>
<li>
<span></span>
<span></span>
<span></span>
<span></span>
</li>
<li>
<span></span>
<span></span>
<span></span>
<span></span>
</li>
</ul>
<div class="button">
<a href="javascript:void(0)" class="pre"><</a>
<a href="javascript:void(0)" class="next">></a>
</div>
</div>
<script>
window.onload = function(){
let count = 0 //点击次数，根据这个变化点击角度
let flag = true //防止多次点击
document.querySelector('.next').onclick = function(){ //点击下一页
if(flag){
flag = false
count++
var li = document.querySelectorAll('li')
li.forEach(function(value,key,arr){
value.style.transform = `rotate3d(1,0,0,-${count*90}deg)`
value.style['transition-delay'] = key * 0.1 + 's'
})
setTimeout(function(){
flag = true
},800)
}
}
document.querySelector('.pre').onclick = function(){ //点击上一页
if(flag){
flag = false
count--
var li = document.querySelectorAll('li')
li.forEach(function(value,key,arr){
value.style.transform = `rotate3d(1,0,0,-${count*90}deg)`
value.style['transition-delay'] = key * 0.1 + 's'
})
setTimeout(function(){
flag = true
},800)
}
}
} </script>
</body>
</html>
轮播图--使用原生js的轮播图的更多相关文章
- 原生js焦点轮播图
原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...
- 原生js实现轮播图
原生js实现轮播图 很多网站上都有轮播图,但找到一个系统讲解的却很难,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计 ...
- 封装一个简单的原生js焦点轮播图插件
轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...
- 原生JS实现轮播图的效果
原生JS实现轮播图的效果: 只要缕清了全局变量index的作用,这个轮播图也就比较容易实现了:另外,为了实现轮这个效果,有几处clearInterval()必须写上.废话不多说,直接上代码,修复了几个 ...
- 使用原生js将轮播图组件化
代码地址如下:http://www.demodashi.com/demo/11316.html 这是一个轮播图组件,这里是代码地址,需要传入容器的id和图片地址,支持Internet Explor ...
- 用原生js封装轮播图
原生js封装轮播图 对于初学js的同学来说,轮播图还是一个难点,尤其是原生js封装轮播图代码,下面是我之前做的一个轮播图项目中封装好的一些代码,有需要的同学可以看一下,有什么不懂的可以看注释,注释看不 ...
- 原生js焦点轮播图的实现
继续学习打卡,武汉加油,逆战必胜!今日咱们主要探讨一下原生js写轮播图的问题, 简单解析一下思路: 1,首先写好css样式问题 2,考虑全局变量:自动播放的定时器,以及记录图片位置的角标Index 2 ...
- 原生js手动轮播图
手动轮播图,为轮播图中的一种,轮播图主要有无缝轮播,手动轮播,延迟轮播,切换轮播等等... 轮播图主要用于展现图片,新出商品,词条,又能美观网页.給网页中增加动态效果. 手动轮播,是小编认为最简单的一 ...
- 利用原生JS实现网页1920banner图滚动效果
内容描述:随着PC设备硬件性能的进步和分辨率的不断提高,现在主流网站逐渐开始采用1920banner图,为适应这一趋势,博主设计了1920banner图的滚动效果,代码利用了原生JS实现了1920ba ...
随机推荐
- Zynq_soc学习
Zynq_soc学习 SFP高速串行通信得搞来看看 最小系统 PL端时钟配置: 配置DDR控制器,主要是添加DDR正确的型号 外设电平接口配置: BANK0:LVCMOS3.3 BANK1:LVCMO ...
- 论好的代码习惯的养成/做一个优雅的coder
1.先说一下以前被滴滴大佬教育的事情: 以前写代码的时候,因为只需要取特定的几个字段,所以经常这么写 //Request $request for example $parameters = $req ...
- SQL-W3School-基础：SQL WHERE 语句
ylbtech-SQL-W3School-基础:SQL WHERE 语句 1.返回顶部 1. WHERE 子句用于规定选择的标准. WHERE 子句 如需有条件地从表中选取数据,可将 WHERE 子句 ...
- Swift 常量
常量一旦设定,在程序运行时就无法改变其值. 常量可以是任何的数据类型如:整型常量,浮点型常量,字符常量或字符串常量.同样也有枚举类型的常量: 常量类似于变量,区别在于常量的值一旦设定就不能改变,而变量 ...
- xcode报错: 找不到路径或者资源错误：no such file or directory
报错截图: 出现的问题: 运行项目页面图片不显示. 解决方法: 1>[COMMAND+shift+G],前往文件夹,输入: ~/Library/Developer/Xcode/DerivedD ...
- css解决fixed布局不会出现滚动条的问题
- 前端面试经典题之ES6新特性
ES6 主要是为了解决 ES5 的先天不足,在原先ES5的基础上新增了许多内容,本篇文章将列举出ES6中新增的10大特性. 一. let 和 const 与var不同,let和const都是用于命名局 ...
- elasticsearch备份脚本
1.主要文件 [root@k8s elasticsearch]# tree . ├── backup_es.sh ├── indices_file.txt ├── recover_es.sh └── ...
- redis同步到磁盘
- CentOS7编译安装libc++和libc++abi
本文介绍了如何在CentOS 7中构建C++11构建环境 Clang的定制C++库是libc++(libcxx).然后,libcxx还需要一个ABI库,libc++abi(libcxxabi).不幸的 ...