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组件,它是状态操控行为的典型, ...
随机推荐
- __stdcall、__cdcel、__fastcall 调用
常用的调用约定有stdcall,cdecl,fastcall,thiscall,naked call等,以下将 __stdcall.__cdecl和__fastcall三种函数调用协议加以比较,函数调 ...
- k8b部署prometheus+grafana
来源: https://juejin.im/post/5c36054251882525a50bbdf0 https://github.com/redhatxl/k8s-prometheus-grafa ...
- Idea 一个窗口打开多个项目
1.[new] > [Module form Existing Sources] 2.选择导入的项目
- HTML标签与属性
HTML中常用的一些标签和属性. 1.lang属性:搜索引擎 en:英文, zh:中文 2.meta:元数据 charset属性:字符集编码方式 3.h1~h6:标题 一级标题 ...
- Tomcat配置多个文件夹
在Tomcat下,conf/server.xml文件下的 Server/Service/Engine/Host节点下,最后添加上以下语句 <Context path="/myweb ...
- 悲观锁，乐观锁以及MVCC
在上文中,我们探讨了MySQL不同存储引擎中的各类锁,在这篇文章中我们将要讨论的是MySQL是如何实现并发控制的.并发问题有三种,分别为: 读-读,不存在任何问题 读-写,有隔离性问题,可能遇到脏读( ...
- PHP 最完美调用百度翻译接口代码示例 (原)
php调用百度翻译最新接口代码 问 题:写的过程遇到了一个问题,url拼接好的原翻译内容,appid,sign的地址直接输出到浏览器可以打开看到翻译后的返回值,但是各种curl,file_ ...
- java基本数据类型全面总结
Java数据类型(type)可以分为两大类:基本类型(primitive types)和引用类型(reference types).下面是Java团长给大家整理的java基本数据类型相关知识,感兴趣的 ...
- HashMap如何实现序列化
/** * Save the state of the <tt>HashMap</tt> instance to a stream (i.e., * serialize it) ...
- 四、smarty模板的自定义函数
smarty模板的自定义函数(这里介绍的是常用) 分为三个种类: 1. 变量调节器 2. 函数 3. 块函数 三个种类插件的用法: 1. 变量调解器的用法, <{$var|myfun:a ...