单张滑动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 ...
随机推荐
- Eclipse中Spring插件的安装
java中为了方便学习使用SSH框架,框架插件的安装是非常必要的. 本博文记录了自己安装Spring插件的过程: 本机环境:win8 64bit eclipse版本:4.5.2 MARS 插件版本:S ...
- java前后端分离是否会成为趋势
现在项目当中使用的是springboot+springcloud,这套框架也用了半年了,springboot是spring4.0的升级版,简化了springmvc的xml配置,是spring家族中目前 ...
- 【CSS3】盒模型
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 垃圾回收机制GC知识再总结兼谈如何用好GC（转）
作者:Jeff Wong 出处:http://jeffwongishandsome.cnblogs.com/ 本文版权归作者和博客园共有,欢迎围观转载.转载时请您务必在文章明显位置给出原文链接,谢谢您 ...
- Python学习日记：day4
列表 li=['alex',[1,2,3] ,'wusir','egon','女神','taibai']#列表 l1 = li[0] print(l1)#alex l2 = li[1] print ( ...
- 创建一个可用的简单的SpringMVC项目，图文并茂
转载麻烦注明下来源:http://www.cnblogs.com/silentdoer/articles/7134332.html,谢谢. 最近在自学SpringMVC,百度了很多资料都是比较老的,而 ...
- Spring入门篇总结：
本文是对慕课网上"搞定SSM开发"路径的系列课程的总结,详细的项目文档和课程总结放在github上了.点击查看 视频传送门:Spring入门篇 该门课程主要从Spring的Bean ...
- bzoj 1570: [JSOI2008]Blue Mary的旅行
Description 在一段时间之后,网络公司终于有了一定的知名度,也开始收到一些订单,其中最大的一宗来自B市.Blue Mary决定亲自去签下这份订单.为了节省旅行经费,他的某个金融顾问建议只购买 ...
- cat/tac/more/less 命令详解
cat:(http://www.cnblogs.com/peida/archive/2012/10/30/2746968.html) *cat主要有三大功能:1.一次显示整个文件:cat filena ...
- lesson - 4 Linux目录文件管理
内容概要:1. 和目录相关的几个命令mkdir 关注-p选项 rmdir 同样也有一个-p选项rm -r -f 两个常用选项cp -r 针对目录, 有时我们使用/bin/cpmv 重命名或者移动, 有 ...