轮播图--使用原生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 ...
随机推荐
- Ubuntu 18.04安装Samba服务器及配置
Ubuntu 18.04安装Samba服务器及配置 局域网下使用samba服务在Linux系统与Windows系统直接共享文件是一项很方便的操作.以Ubuntu为例配置samba服务,Linux服务器 ...
- LC 984. String Without AAA or BBB
Given two integers A and B, return any string S such that: S has length A + B and contains exactly A ...
- C之指针
什么是指针 * 指针变量:用来存储某种数据在内存中的地址.* 世面上书籍一般把指针和指针变量的概念混在一起了.市面上的书籍说的指针指的就是指针变量 Ø *号的三种含义1. 两个数相乘int i =5; ...
- React开发环境配置
本文以上一篇文章继续配置:npm安装及环境配置<https://www.cnblogs.com/hzb462606/p/11565275.html> 使用 create-react-app ...
- 原生js实现深复制
function deepClone (obj) { if (obj === null) { // 如果是null则直接返回 return obj; } let copy = Array.isArra ...
- Spring Aop（十一）——编程式的创建Aop代理之ProxyFactory
转发地址:https://www.iteye.com/blog/elim-2397388 编程式的创建Aop代理之ProxyFactory Spring Aop是基于代理的,ProxyFactory是 ...
- Spring Aop（六）——@DeclareParents介绍
转发:https://www.iteye.com/blog/elim-2395410 6 @DeclareParents介绍 @DeclareParents注解也是Aspectj提供的,在使用基于As ...
- Python3 Selenium自动化web测试 ==>FAQ：日期格式和日期字符串格式相互转换
学习目的: 掌握python的基础应用 场景: 生成的测试日报需要加上时间戳作为唯一标志,免得文件覆盖,过往的文件丢失 因为os.rename方法要求文件名必须拼接的都是字符串 代码释义: # 日期转 ...
- 【Matlab开发】函数bsxfun的使用
[Matlab开发]函数bsxfun的使用 标签:[Matlab开发] 版权声明:本文为博主原创文章,转载请注明出处http://blog.csdn.net/lg1259156776/. 说明:当我们 ...
- U盘自动复制文件
1.建立一个文本文档,WIN+R 里面打NOTEPAD ,或者自己新建一个都一样. 2.把下面的代码复制进去 set fso=createobject("scripting.filesyst ...