单张滑动tab 组件
/*
CSS重置
* */ body,
ul,
ol {
margin: 0px;
padding: 0px;
} .flash {
width: 300px;
height: 420px;
position: relative;
overflow: hidden;
} /*图片css*/
ul{
width: 300%;
position: absolute;
left: 0px;
top: 0px;
transition: 0.5s;
}
ul,
ol {
list-style: none;
} ul li {
width: 300px;
height: 420px;
float: left;
transition: 0.5s;
} ul li:nth-of-type(1) {
background: green;
} ul li:nth-of-type(2) {
background: blue;
} ul li:nth-of-type(3) {
background: red;
} ul li.now {
z-index: 1;
opacity: 1;
} /*箭头css*/ nav a {
position: absolute;
top: 100px;
z-index: 999;
font-size: 36px;
width: 40px;
height: 60px;
line-height: 60px;
text-align: center;
text-decoration: none;
} nav a:hover {
background: #333;
color: white;
} nav a:nth-of-type(1) {
left: 0px;
} nav a:nth-of-type(2) {
right: 0px;
} /*原点css*/ ol {
position: absolute;
bottom: 50px;
right: 50px;
z-index: 99;
} ol li {
float: left;
width: 12px;
height: 12px;
border: 2px solid #333;
background: #ccc;
border-radius: 50%;
margin: 0px 5px;
} ol li.nowx {
background: white;
border-color: red;
box-shadow: 0px 0px 3px black;
} <!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="flash.css" />
<style type="text/css">
#s1,
#s2,
#s3 {
float: left;
margin-left: 10px;
}
</style>
</head> <body> <!--
分析功能：
1、左右箭头切换图功能
切换小圆点。
onclick 2、单击小原点时候也能换图
点击哪个小圆点，哪个小圆点对应图片显示。
onclick 3、淡入淡出效果。
left
transition -->
<section id="s1">
<div class="flash">
<ul>
<li class="now">A</li>
<li>B</li>
<li>C</li>
</ul>
<ol>
<li class="nowx"></li>
<li></li>
<li></li>
</ol>
<nav>
<a href="#"> < </a>
<a href="#"> > </a>
</nav>
</div>
</section> <section id="s2">
<div class="flash">
<ul>
<li class="now">A</li>
<li>B</li>
<li>C</li>
</ul>
<ol>
<li class="nowx"></li>
<li></li>
<li></li>
</ol>
<nav>
<a href="#"> < </a>
<a href="#"> > </a>
</nav>
</div>
</section> <section id="s3">
<div class="flash">
<ul>
<li class="now">A</li>
<li>B</li>
<li>C</li>
</ul>
<ol>
<li class="nowx"></li>
<li></li>
<li></li>
</ol>
<nav>
<a href="#"> < </a>
<a href="#"> > </a>
</nav>
</div>
</section>
<script type="text/javascript">
function myMove(_id) {
var arrs = document.querySelectorAll(_id + " nav a");
var lisx = document.querySelectorAll(_id + " ol li");
var ul = document.querySelector(_id + " ul");
var lis = document.querySelectorAll(_id + " ul li");
var flash = document.querySelector(_id + " .flash");
var i = 0;
//单击左边
arrs[0].onclick = Pre;
//单击右边箭头
arrs[1].onclick = Next function Next() {
i < (lis.length - 1) ? i++ : null;
ul.style.left = -i * 300 + "px";
MyIni(i)
} function Pre() {
i >= 1 ? i-- : null;
ul.style.left = -i * 300 + "px";
MyIni(i)
} function MyIni(k) {
for(var j = 0; j < lisx.length; j++) {
lisx[j].className = "";
}
lisx[k].className = "nowx";
} } myMove("#s1");
myMove("#s2");
myMove("#s3");
</script>
</body> </html>
单张滑动tab 组件的更多相关文章
- 基于vue与vux做的可滑动tab组件（附源码）
背景 前不久,刚完成了一个商品列表+购物车功能的页面,因为一级商品分类在顶部tab中显示,可滑动,间距可定制,如下图所示: 定制的tab需求如下: 1. 每个tab-item的间距是相同的,可定制 2 ...
- Android开发之ViewPager+ActionBar+Fragment实现响应式可滑动Tab
今天我们要实现的这个效果呢,在Android的应用中十分地常见,我们可以看到下面两张图,无论是系统内置的联系人应用,还是AnyView的阅读器应用,我们总能找到这样的影子,当我们滑动屏幕时,Tab可 ...
- JGUI源码：Tab组件实现（9）
程序界面效果如下 Tab组件由多个TabItem组成,超出部分隐藏,可以通过左右按钮滑动显示出来 1.封装 // 初始化内容 $(function () { J.JTab($(".jgui- ...
- Qt qml pageview 左右滑动分页组件
[先看效果] [下载]http://download.csdn.net/detail/surfsky/8516949 [调用] 分页视图 左右分页滑动列表组件 示例 PageView{ id: pv ...
- Slider( 滑动条) 组件
本节课重点了解 EasyUI 中 Slider(滑动条)组件的使用方法,这个组件依赖于Draggable(拖动)组件. 一． 加载方式//class 加载方式<input class=" ...
- 巧用tab组件实现APP的布局效果
1. 版本说明 iOS/Android支持版本 jar包版本 8.4及往后版本 2017年4月1日 2. 描述 tab布局能避免多层次钻取与返回,可以在一个报表内部进行切换,钻取层数如果过多的话,看报 ...
- 一个 Vue 的滑动按钮组件
git 地址:https://github.com/SyMind/vue-sliding-button vue-better-slider 一个 Vue 的滑动按钮组件,有关滑动方面的处理借鉴 bet ...
- 自己开发的 vue 滑动按钮组件 vue-better-slider
写在前面的 这个人第一次尝试开发并发布一个 vue 的组件,该组件实现了类似 ios 手机淘宝客户端 -> 消息界面中消息的滑动删除功能等,如下为该组件的文档. 一个 Vue 的滑动按钮组件,有 ...
- 关于elementUi tab组件路由跳转卡死问题
好久没来了,周五项目终于要上线了(*^▽^*),上线之前测出一个很恶心的bug真真是... 项目:Vue + elementUi 后台管理项目 问题描述:登录后首次通过侧边栏路由跳转到主页面有ta ...
随机推荐
- ML01 机器学习后利用混淆矩阵Confusion matrix 进行结果分析
目标: 快速理解什么是混淆矩阵, 混淆矩阵是用来干嘛的. 首先理解什么是confusion matrix 看定义,在机器学习领域,混淆矩阵(confusion matrix),又称为可能性表格或是 ...
- 基于Metronic的Bootstrap开发框架经验总结（18）-- 在代码生成工具Database2Sharp中集成对Bootstrap-table插件的分页及排序支持
在我们开发系统界面,包括Web和Winform的都一样,主要的界面就是列表展示主界面,编辑查看界面,以及一些辅助性的如导入界面,选择界面等,其中列表展示主界面是综合性的数据展示界面,一般往往需要对记录 ...
- Mac ssh 连接报错 Permission denied (publickey)
用的阿里云服务器,如果直接连接,会报下面错误: $ ssh root@47.94.132.115 Permission denied (publickey). 创建服务器的时候,连接秘钥会生成并下载到 ...
- POST/有道翻译 有bug
1.发现在翻译时地址没有变,那是POST请求. 2.通过fidder抓包工具抓取url 3.对data分析,发现每次salt和sign都在变化. 4.查看源码,先用站长工具http://tool.ch ...
- Eclipse Maven构建WebApp项目资源目录显示不全的原因与解决方式
一.问题展示 1.Eclipse在使用Maven构建WebApp项目的时候,首先Maven的安装和配置都没有问题的,但是构建项目之后,Maven项目要求的几个必须要有的资源目录显示不了: 问题如下图: ...
- 《Netty5.0架构剖析和源码解读》【PDF】下载
<Netty5.0架构剖析和源码解读>[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230062545 内容简介 Netty 是个异步的 ...
- js 数组的常用方法归纳
数组的常用方法归纳 slice(start,end) 传参:start代表从哪里开始截取,end代表截取结束的地方 var a = [1,2,3]a.slice(1);//[2,3] pop() 可以 ...
- 环链表相关的题目和算法[LeetCode]
这篇文章讨论一下与链表的环相关的题目,我目前遇到的一共有3种题目. 1.判断一个链表是否有环(LeetCode相关题目:https://leetcode.com/problems/linked-lis ...
- OC学习14——谓词
一.谓词的基本概念与使用 1.谓词(NSPredicate)用于定义一个逻辑条件,通过该条件可执行搜索或内存中的过滤操作.上一篇文章中介绍的集合都提供了使用谓词对集合进行过滤的方法.OC中的谓词操作是 ...
- http性能测试工具wrk源码学习之开篇
1.前言 最近工作需要测试nginx反向代理的性能,于是找了一些http测试工具,例如经典的Apache的ab.siege.wrk.wrk使用多线程事件驱动方式,支持lua脚本扩展.关于wrk介绍可以 ...