轮播图--使用原生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 ...
随机推荐
- Node.js与VUE安装及环境配置之Windows篇
Node.js安装及环境配置之Windows篇 https://www.cnblogs.com/zhouyu2017/p/6485265.html Node.js安装及环境配置之Windows篇htt ...
- kotlin中this 表达式
this表达式,可以表示当前函数的接收者,在类的成员函数中,this 指向这个类的当前对象实例,在扩展函数中或带有接收者数字面值,this代表调用函数时,在点号左侧传递的接收者参数 如果this没有限 ...
- 阶段5 3.微服务项目【学成在线】_day04 页面静态化_01-页面静态化需求分析
上半部分就是静态化 业务流程如下: 1.获取模型数据 2.制作模板 3.对页面进行静态化 4.将静态化生成的html页面存放文件系统中 5.将存放在文件系统的html文件发布到服务器
- MLN 讨论 —— 基础知识
一. MLN相关知识的介绍 1. First-order logic A first-order logic knowledge base (KB) is a set of formulas in f ...
- 【leetcode_easy】557. Reverse Words in a String III
problem 557. Reverse Words in a String III solution1:字符流处理类istringstream. class Solution { public: s ...
- Docker使用Portainer搭建可视化界面
Portainer介绍 Portainer是Docker的图形化管理工具,提供状态显示面板.应用模板快速部署.容器镜像网络数据卷的基本操作(包括上传下载镜像,创建容器等操作).事件日志显示.容器控制台 ...
- Flutter打包release版本安卓apk包真机安装无法请求网络的解决方法
今天flutter build apk打包了一个release.apk包,在真机上安装后网络数据都不显示,但是在模拟器上没问题,然后又连接真机开debug各种测试,一切都正常!那这会是什么问题呢? 查 ...
- SpringCloud 与 Dubbo区别
总览 Dubbo SpringCloud 服务注册中心 Zookeeper Spring Cloud Netfix Eureka 服务调用方式 RPC REST API 服务监控 Dubbo-mo ...
- Hyperledger Fabric 安全基础：身份系统 PKIs
什么是身份系统 区块链网络中的角色包括对等节点(peer),订购着,客户端应用程序,管理员等等.这些参与者的身份都封装在X.509数字证书中.这些身份信息真的非常重要,因为他们决定了在网络中参与者具体 ...
- Android开发环境搭建（eclipse版）
1.下载安装JDK 网址:http://www.oracle.com/technetwork/java/javase/downloads/index.html