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组件,它是状态操控行为的典型, ...
随机推荐
- 更优雅地关闭资源 - try-with-resource
https://www.cnblogs.com/hihtml5/p/6505317.html
- 基于idea的maven（一）Maven的安装
1.Maven前置依赖 检查电脑是是否安装java 2.下载maven 网址 www.apache.org 解压 maven 压缩包, 并创建相应的maven本地仓库的路径. 打开 conf文件夹中 ...
- 使用SQL批量插入数据到数据库 以及一些SQL函数的语法
批量插入100条记录 set nocount on declare @i int=1; while @i<=100 begin Insert into Client(id,ClientCode, ...
- jquery pageX属性 语法
jquery pageX属性 语法 作用:pageX() 属性是鼠标指针的位置,相对于文档的左边缘. 语法:event.page 参数: 参数 描述 event 必需.规定要使用的事件.这个 ...
- javascript中的原型和原型链(三)
1. 图解原型链 1.1 “铁三角关系”(重点) function Person() {}; var p = new Person(); 这个图描述了构造函数,实例对象和原型三者之间的关系,是原型链的 ...
- 51 Nod 1069 Nim游戏
分析: a1 xor a2 xor a3 ... xor an !=0 则为必胜态 a1 xor a2 xor a3 ... xor an ==0 则为必败态 也就是说只要计算异或值,如果非零则A赢, ...
- hdu 1796 How many integers can you find 容斥第一题
How many integers can you find Time Limit: 12000/5000 MS (Java/Others) Memory Limit: 65536/32768 ...
- pycharm中调用函数方法自动补全p,m,c,v,f分别是什么意思
p:parameter 参数m:method 方法c:class 类v:variable 变量f:function 函数
- AtCoder AGC032D Rotation Sort (DP)
题目链接 https://atcoder.jp/contests/agc032/tasks/agc032_d 题解 又是一道神仙题啊啊啊啊...atcoder题真的做不来啊QAQ 第一步又是神仙转化: ...
- Keil工程Lib库文件的制作和运用
最近看了百度手环开源项目,发现所有的算法都被封装成了一个lib文件在keil中调用 也是第一次学习到. 问题引出:为什么要做成lib库? 1.有些方案公司为了将自己写的关键部分源代码不进行公开,但是同 ...