轮播图--使用原生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 ...
随机推荐
- 002-多线程-JUC集合-List-CopyOnWriteArrayList
一.概述 CopyOnWriteArrayList是Java并发包中提供的一个并发容器,它是个线程安全且读操作无锁的ArrayList,写操作则通过创建底层数组的新副本来实现,是一种读写分离的并发策略 ...
- 阶段5 3.微服务项目【学成在线】_day05 消息中间件RabbitMQ_8.RabbitMQ研究-工作模式-发布订阅模式-生产者
Publish/subscribe:发布订阅模式 发布订阅模式: 1.每个消费者监听自己的队列. 2.生产者将消息发给broker,由交换机将消息转发到绑定此交换机的每个队列,每个绑定交换机的队列都将 ...
- 数学建模python matlab 编程(喷泉模拟)
在无风情况下的喷泉模拟 我的python代码 import numpy as np import random import matplotlib matplotlib.rcParams['font. ...
- C# Winform中WebBrowser给网页中的input控件赋值/设置值
订阅WebBrowser的DocumentCompleted事件,在里面写入 private void browser_DocumentCompleted(object sender, WebBrow ...
- http://www.cda.cn/view/25735.html
通过实例浅析Python对比C语言的编程思想差异 我一直使用 Python,用它处理各种数据科学项目. Python 以易用闻名.有编码经验者学习数天就能上手(或有效使用它). 听起来很不错,不过,如 ...
- [System Design] Design a distributed key value caching system, like Memcached or Redis
https://www.interviewbit.com/problems/design-cache/ Features: This is the first part of any system d ...
- C语言的灵魂——指针基础
一.什么是指针 1.指针的定义:地址形象化为指针,通过指针能够找到内存单元. 指针变量就是地址变量,变量的值为指针. 指针其实是我们将变量名和地址的关系显化(独立)出来的一种形式,是为了我们更加方便的 ...
- 在Ubuntu里搭建spark环境
注意:1.搭建环境:Ubuntu64位,Linux(也有Windows的,我还没空试) 2.一般的配置jdk.Scala等的路径环境是在/etc/profile里配置的,我自己搭建的时候发 ...
- Redis 常用命令学习一：通用的基本命令
1-链接,如果需要的 Redis 部署在远程机器上,可以通过以下命令链接,其中-h后面跟着主机名,-p后面跟端口名 redis-cli -h 233.2.2.4 -p 666 2-PING 命令用来测 ...
- linux命令（ubuntu18）记录...
1.解压.zip文件unzip unzip studentCRUD-master.zip 2.读写权限chmod指令 r表是读 (Read) .w表示写 (Write) .x ...