轮播图--使用原生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 ...
随机推荐
- Objective-C中的一些方法命名“潜规则”
在基于Apple Xcode的Objective-C中,有一些方法命名潜规则,比如就property而言,假定你定义了如下property: @interface MyObject @property ...
- Docker save and load,镜像保存
一.起因 docker pull 时发生错误 error pulling image configuration: Get https://dseasb33srnrn.cloudfront.net/r ...
- 仙剑奇侠传1系列:2.编译主程序SDLPAL及SDL
上一篇:仙剑奇侠传1系列:1.本地运行环境及兼容性设置 介绍 仙剑奇侠传1是dos时代的经典游戏,相信以下图片能勾起大家的很多回忆. sdlpal是仙剑奇侠传1的主程序.github项目sdlpa ...
- [Java]1.两数之和 - LeetCode
1 题目 2 思路与代码 思路一:暴力法(两层For循环) 时间复杂度:O(n^2) 对于每个元素,我们试图通过遍历数组的其余部分来寻找它所对应的目标元素,这将耗费 O(n) 的时间.因此时间复杂度为 ...
- Java实现汉诺塔移动，只需传一个int值(汉诺塔的阶）
public class HNT { public static void main(String[] args) { HNT a1 = new HNT(); a1.lToR(10); //给汉诺塔a ...
- 卸载未能成功安装的mysql时的解决方案
在win10系统中,首次未能成功安装mysql,于是试图卸载了mysql相关的应用,结果提示有卸载未完成的应用,无法卸载, 在阅读文档之后发现,可以在任务管理器中的详细信息中找到[dllhost.ex ...
- 生成SSH秘钥连接github（详细教程）
第一步.首先,检查下自己之前有没有已经生成: 在开始菜单中打开git下的git bash(当然,在其他目录下打开git bash也是一样的): 然后执行 cd ~/.ssh 第二步.如果能进入到.ss ...
- js函数（5）
函数属性方法和构造函数 length属性 函数体中,arguments.length表示传入函数的实参个数. prototype属性 指向一个对象的引用 call方法和apply方法 看作是某个对象的 ...
- 生产环境中的 redis 是怎么部署的
redis cluster,10 台机器,5 台机器部署了 redis 主实例,另外 5 台机器部署了 redis 的从实例,每个主实例挂了一个从实例,5 个节点对外提供读写服务,每个节点的读写高峰q ...
- GitLab中批量更换路径并保留历史记录
git-change-path.sh #!/bin/bash cat git-name.txt | while read line do echo $line git clone --mirror g ...