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组件,它是状态操控行为的典型, ...
随机推荐
- hdu3586 Information Disturbing[二分答案+树形DP]
给定 n 个节点的树,边有权值.1 号点是根,除了 1 号点外的度数为 1 的节点是叶子.要求切断所有叶子和 1 号点之间的联系,切断一条边要花费这条边上权值对应的代价,要求总的代价不超过 m.在满足 ...
- 换个眼界看IE，它真的有那么可恶吗？
一说到IE我想很多web小伙伴都避之不及,对于IE经验不足的同学可以说更是恨之入骨,撕心裂肺般的烦恼与气愤?,被折磨的不要不要的.我感同身受,去年的我的生日愿望就是,我希望IE浏览器在这世界上没有一个 ...
- Visual Studio开发首选！DevExtreme v19.1.6全新来袭
DevExtreme Complete Subscription是性能最优的 HTML5,CSS 和 JavaScript 移动.Web开发框架,可以直接在Visual Studio集成开发环境,构建 ...
- Mysql: 开启慢查询日志[ERROR] unknown variable 'log-slow-queries'处理办法
参考: http://www.dataguru.cn/thread-305503-1-1.html # slow query log qjp 20160921 # mysql5.6版本以上,取消了参数 ...
- C# 扩展、常用方法
项目基本做完了,抽空整理下里面用到的扩展方法,以及复用度很高的代码,省的以后到处去找. 一.C#扩展方法——Distinct去重 二.C#扩展方法——获得枚举Description 三.C#扩展方法— ...
- [POI2011]DYN-Dynamite
题目链接:Click here Solution: 直接做似乎不太可行,我们考虑二分 我们设\(f[x]\)表示以\(x\)为根的子树中选择了的节点到\(x\)的距离的最小值,初值为\(inf\) \ ...
- luoguP3353 在你窗外闪耀的星星
P3353 在你窗外闪耀的星星 题目描述 飞逝的的时光不会模糊我对你的记忆.难以相信从我第一次见到你以来已经过去了3年.我仍然还生动地记得,3年前,在美丽的集美中学,从我看到你微笑着走出教室,你将头向 ...
- HGOI 20190708 题解
Problem A 拿出勇气吧 幸运数字每一位是$4$或者$7$,现在给出一个数字每位数位上数的和为n,求出最小的幸运数n 对于100%的数据,$n\leq 10^6$ Sol : 显然本题要求数的长 ...
- Jmeter -- 添加用户自定义变量
步骤: 1. 添加用户自定义变量元件(线程组->配置原件->用户自定义变量) Add --> Config Element --> User Defined Variables ...
- [JZOJ6400]:Game（贪心+线段树+二分）
题目描述 小$A$和小$B$在玩一个游戏,他们两个人每人有$n$张牌,每张牌有一个点数,并且在接下来的$n$个回合中每回合他们两人会分别打出手中的一张牌,点数严格更高的一方得一分,然而现在小$A$通过 ...