2D轮播图
目录结构
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.population{
width: 600px;
height: 300px;
background: white;
margin-left: auto;
margin-right: auto;
overflow: hidden;
position: relative;
}
.SlideBlock{
width: 600px;
height: 300px;
}
.controlButton{
width: 105px;
height: 20px;
position: absolute;
background:rgba(255,255,255,0.5);
border-radius: 15px 15px 15px 15px;
margin:270px 247px 20px 248px;
z-index: 99;
}
.controlButton ul{
width: 65px;
height: 20px;
margin: 0 auto;
padding: 0px;
}
.controlButtonEach{
background: #ff1d38;
width: 11px;
height: 11px;
border-radius: 50%;
list-style: none;
float: left;
margin-left: 10px;
margin-top: 2px;
cursor: pointer;
border: 2px rgba(255,255,255,1) solid;
}
.changeBlockBefore{
width: 600px;
height: 300px;
float: left;
position: absolute;
margin-left: 600px;
transition: 0.5s;
}
.changeBlockAfter{
width: 600px;
height: 300px;
float: left;
position: absolute;
margin-left: 0px;
transition: 0.5s;
}
.changeButton{
background: white;
width: 11px;
height: 11px;
border-radius: 50%;
list-style: none;
float: left;
margin-left: 10px;
margin-top: 2px;
cursor: pointer;
border: 2px #ff1d38 solid;
}
.LeftControl{
width: 20px;
height: 50px;
background: rgba(0,0,0,0.5);
line-height: 50px;
text-align: center;
float: left;
color: white;
margin:125px 560px 125px 0;
z-index: 99;
position: absolute;
opacity: 0;
transition: 0.5s;
}
.RightControl{
width: 20px;
height: 50px;
background: rgba(0,0,0,0.5);
line-height: 50px;
text-align: center;
float: left;
margin:125px 0 125px 580px;
color: white;
z-index: 99;
position: absolute;
opacity: 0;
transition: 0.5s;
}
</style>
</head>
<body>
<div class="population">
<div class="LeftControl"><</div>
<div class="RightControl">></div>
<div class="controlButton">
<ul>
<li style="margin-left: 0px;" class="changeButton"></li>
<li class="controlButtonEach"></li>
<li class="controlButtonEach"></li>
</ul>
</div>
<div class="SlideBlock">
<div class="changeBlockAfter" style="background-color: red;"><img src="img1.jpg"/></div>
<div class="changeBlockBefore" style="background-color: gray;"><img src="img2.jpg"/></div>
<div class="changeBlockBefore" style="background-color: green;"><img src="img3.jpg"/></div>
</div>
</div>
</body>
<script type="text/javascript">
var childPopulation = document.getElementsByClassName('population')[0];
var childBlock = document.getElementsByClassName('SlideBlock')[0];
var childControlButton = document.getElementsByClassName('controlButton')[0];
var eachBlock = childBlock.getElementsByTagName('div');
var eachButton = childControlButton.getElementsByTagName('li');
var childLeft = document.getElementsByClassName('LeftControl')[0];
var childRight = document.getElementsByClassName('RightControl')[0];
childPopulation.onmousemove = function(){
childLeft.style.opacity = '1';
childRight.style.opacity = '1';
childPopulation.style.cursor = 'pointer';}
childPopulation.onmouseout = function(){
childLeft.style.opacity = '0';
childRight.style.opacity = '0';}
for (var i = 0; i < 3; i++) {
eachButton[i].index = i;
eachButton[i].onmousemove = function(){
num = this.index;
for (var j = 0; j < 3; j++) {
eachBlock[j].className = 'changeBlockBefore';
eachButton[j].className = "controlButtonEach";
}
this.className = 'changeButton';
eachBlock[num].className = 'changeBlockAfter';
}}
var num = 0;
childRight.onclick = function(){
clearInterval(AutoId);
num += 1;
if(num >= 3){
num = 0;
}
for (var j = 0; j < 3; j++) {
eachBlock[j].className = 'changeBlockBefore';
eachButton[j].className = "controlButtonEach";
}
eachButton[num].className = 'changeButton';
eachBlock[num].className = 'changeBlockAfter';}
childRight.onmousemove = function(){
childRight.style.background = 'rgba(0,0,0,0.8)'
}
childRight.onmouseout = function(){
childRight.style.background = 'rgba(0,0,0,0.5)'
clearInterval(AutoId);
AutoPlay();};
childLeft.onclick = function(){
clearInterval(AutoId);
num -= 1;
if(num <= -1){
num = 2;
}
for (var j = 0; j < 3; j++) {
eachBlock[j].className = 'changeBlockBefore';
eachButton[j].className = "controlButtonEach";
}
eachButton[num].className = 'changeButton';
eachBlock[num].className = 'changeBlockAfter';;};
childLeft.onmousemove = function(){
childLeft.style.background = 'rgba(0,0,0,0.8)'
}
childLeft.onmouseout = function(){
childLeft.style.background = 'rgba(0,0,0,0.5)'
clearInterval(AutoId);
AutoPlay();}
var AutoChange = function (){
num ++;
if(num > 2){
num = 0;
}
for (var k = 0; k < 3; k++) {
eachButton[k].className = "controlButtonEach";
eachBlock[k].className = 'changeBlockBefore';
}
eachButton[num].className = "changeButton";
eachBlock[num].className = 'changeBlockAfter';}
function AutoPlay(){
AutoId = setInterval(AutoChange,2500);
};
AutoPlay();
childBlock.onmousemove = function(){
clearInterval(AutoId);
}
childBlock.onmouseout = function(){
clearInterval(AutoId);
AutoPlay();
}
</script>
</html>
运行结果
2D轮播图的更多相关文章
- bootstrap轮播图--兼容IE7
<!DOCTYPE html> <html> <head> <title>Bootstrap轮播</title> <meta char ...
- mobile_轮播图_transform 版本_transform 读写二合一
轮播图_transform 版本 关键点: 2D 变换 transform 不会改变 元素 在 文档流 中的位置 定位 position 会改变 元素 在 文档流 中的位置 语句解析太快,使用 set ...
- JavaScript+HTML+CSS 无缝滚动轮播图的两种方式
第一种方式 在轮播图最后添加第一张,一张重复的图片. 点击前一张,到了第一张,将父级oList移动到最后一张(也就是添加的重复的第一张),在进行后续动画. 点击下一张,到了最后一张(也就是添加的重复的 ...
- js 基础篇（点击事件轮播图的实现）
轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现 首 ...
- 实现下来ScrollView放大轮播图
创建工程,创建一个UIScrollView属性,并遵循其协议: #define kWidth self.view.frame.size.width//屏幕宽 #define kHeight self. ...
- ViewPager轮播图
LoopViewPagerLayout无限轮播 项目地址:https://github.com/why168/LoopViewPagerLayout 支持三种动画: 支持修改轮播的速度: 支持修改滑动 ...
- CSS-用伪类制作小箭头（轮播图的左右切换btn）
先上学习地址:http://www.htmleaf.com/Demo/201610234136.html 作者对轮播图左右按钮的处理方法一改往常,不是简单地用btn.prev+btn.next的图片代 ...
- phpcms首页实现轮播图
1.在你想要加轮播图的位置加入以下 <div id="flowDiagram" > <div id="button"> <span ...
- React视角下的轮播图
天猫购物网站最显眼的就是轮播图了.我在学习一样新js库,一个新框架或新的编程思想的时候,总是感叹"入门必做选项卡,进阶须撸轮播图."作为一个React组件,它是状态操控行为的典型, ...
随机推荐
- Avro从入门到入土
avro官网 1.Avro历史 Avro是Hadoop的一个数据序列化系统,由Hadoop的创始人Doug Cutting(也是Lucene,Nutch等项目的创始人)开发,设计用于支持大批量数据交换 ...
- 2019ICPC南京网络赛总结
这次是在学校打的,总体不算好,过两题校排200多..很惨. 开场一段时间没人过题,但是很多人交I, 我也就再看,看着看着发现不可做,这时候转F,花了半天读懂题意的时候想到主席树查找.但是主席树这种查找 ...
- [大数据] hadoop伪分布式安装
注意:节点主机的hostname不要带"_"等字符,否则会报错. 一.安装jdk rpm -i jdk-7u80-linux-x64.rpm 配置java环境变量: vi + /e ...
- H5+JAVA的文件上传,断点续传
这里只写后端的代码,基本的思想就是,前端将文件分片,然后每次访问上传接口的时候,向后端传入参数:当前为第几块文件,和分片总数 下面直接贴代码吧,一些难懂的我大部分都加上注释了: 上传文件实体类: 看得 ...
- Gene co-expression analysis for functional classification and gene–disease predictions
- 论文阅读：NETFPGA SUME: TOWARD 100 GBPS AS RESEARCH COMMODITY
摘要: 数据中心网络的需求增长意味着许多组成技术不在研究社区的预算之内. NETFPGA SUME是基于FPGA的PCI Express板,具有I / O功能,可作为网络接口卡,多端口开关,防火墙或测 ...
- Linux命令-文件传输
Linux命令-文件传输 Linux lprm命令 Linux lprm命令用于将一个工作由打印机贮列中移除 尚未完成的打印机工作会被放在打印机贮列之中,这个命令可用来将常未送到打印机的工作取消.由于 ...
- 自定义IPython提示符
首先创建IPython的自定义配置文件 $ ipython profile create 可以看到在HOME目录下: 多了两个配置文件 我们修改~/.ipython/profile_default/i ...
- Java程序,JVM之间的关系
java程序是跑在JVM上的,严格来讲,是跑在JVM实例上的.一个JVM实例其实就是JVM跑起来的进程,二者合起来称之为一个JAVA进程.各个JVM实例之间是相互隔离的. 每个java程序都运行于某个 ...
- tps吞吐量映射的问题
tps随着时间增加,吞吐量增加,但到达一定时间,吞吐不变,出现瓶颈,可能是以下原因 1/反应宽带问题 2/连接数释放问题 3/cpu占有率超出问题 4/内存不够问题 5/数据库连接屏蔽 用jmeter ...