单张滑动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 ...
随机推荐
- java反射（转）
作者:奋斗的小子链接:https://www.zhihu.com/question/24304289/answer/38218810来源:知乎著作权归作者所有,转载请联系作者获得授权. 反射之中包含了 ...
- flask中的session,render_template()第二和参数是字典
1. 设置一个secret_key 2.验证登入后加上session,这是最简单,不保险 . 3.注意render_template传的参数是字典
- python __getattr__ 巧妙应用
在之前的文章有提到__getattr__函数的作用: 如果属性查找(attribute lookup)在实例以及对应的类中(通过__dict__)失败, 那么会调用到类的__getattr__函数, ...
- idea和Webstorm上使用git和github,码云
由于之前一直使用svn,现在项目使用git,顾根据网上找的学习资料,自己梳理了下,收获蛮多,这里做个记录,如果能帮助到您那是最好不过的. 1.大致步骤 使用工具:idea,github,码云 webs ...
- WebUploader分片断点上传文件（二）
写在前面: 这几天,有去研究一下WebUploader上传文件,前面的博客有记录下使用WebUploader简单上传文件的例子,今天就把分片断点上传的例子也记录下吧,在博客园中,也查看了一些资料,基本 ...
- iOS OC应用异常捕获，崩溃退出前返回信息给后台
第三方的了,有友盟,腾讯的bugly 查了一下网上类似的代码很多,在借鉴前辈的代码后,组合了一下: 1.捕获异常信息 2.获得当前日期,版本,系统 3.获得出bug的视图控制器转为字符串 4.将前3条 ...
- XMPP协议的基本理解
即时通讯技术简介 即时通讯技术(IM)支持用户在线实时交谈.如果要发送一条信息,用户需要打开一个小窗口,以便让用户及其朋友在其中输入信息并让交谈双方都看到交谈的内容.大多数常用的即时通讯发送程序都会提 ...
- python模拟shell执行脚本
工作时候需要模拟shell来执行任务,借助包paramkio import paramiko class ShellExec(object): host = '127.0.0.1' port = 36 ...
- P、NP、NP完全问题
如果一个算法的最差时间效率属于O(p(n)),则该算法可以在多项式的时间内对问题进行求解,其中p(n)是输入规模n的一个多项式函数. 可以在多项式时间内求解的问题是易解的.不能在多项式时间内求解的问题 ...
- bzoj 3717: [PA2014]Pakowanie
Description 你有n个物品和m个包.物品有重量,且不可被分割:包也有各自的容量.要把所有物品装入包中,至少需要几个包? Input 第一行两个整数n,m(1<=n<=24,1&l ...