<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style>

             * {

                 margin: 0px;

                 padding: 0px;

                 list-style: none;

             }

             h2 {

                 margin-bottom: 20px;

                 background: #ccc;

                 display: inline-block;

             }

             h2 span {

                 background: blue;

                 display: inline-block;

                 width: 40px;

                 height: 40px;

                 text-align: center;

                 cursor: pointer;

             }

             div {

                 width: 600px;

                 height: 200px;

                 border: 2px solid blue;

                 overflow: hidden;

                 position: relative;

             }

             ul {

                 width: 1200px;

                 position: absolute;

                 left: 0px;

                 transition: 0.2s linear;

             }

             ul li {

                 width: 200px;

                 height: 200px;

                 background: #eee;

                 float: left;

             }

             ul li:nth-child(even) {

                 background-color: green;

             }

             ul.now1 {

                 left: -600px;

             }

             ul.now2 {

                 left: 0px;

             }

             span.disable {

                 background: #ccc;

                 color: #eee;

                 cursor: default;

             }

         </style>

     </head>

     <body>

         <h2><span>&lt;</span> | <span>&gt;</span> </h2>

         <div>

             <ul>

                 <li>AAA</li>

                 <li>BB</li>

                 <li>CC</li>

                 <li>DD</li>

                 <li>EE</li>

                 <li>FF</li>

             </ul>

         </div>

         <script>

             var btn = document.querySelectorAll("span");

             var ul = document.querySelector("ul");

             var h2 = document.querySelector("h2");

             var i = 0,

                 timer;

             btn[1].onclick = function() {

                 ul.className = "now1";

                 this.className = "disable"

                 this.previousElementSibling.className = "";

                 i = 1;

             }

             btn[0].onclick = function() {

                 ul.className = "now2";

                 this.className = "disable"

                 this.nextElementSibling.className = "";

                 i = 0;

             }

             //自动走动

             function AutoPlay() {

                 if(i == 0) {

                     i = 1;

                     ul.className = "now1";

                     btn[0].className = ""

                     btn[1].className = "disable"

                 } else if(i == 1) {

                     i = 0;

                     ul.className = "now2";

                     btn[0].className = "disable"

                     btn[1].className = "";

                 }

             }

             timer = setInterval(AutoPlay, 2000);

             h2.onmouseover = function() {

                 clearInterval(timer)

             }

             h2.onmouseout = function() {

                 timer = setInterval(AutoPlay, 2000);

             }

         </script>

     </body>

 </html>

明星单品tab的更多相关文章

  1. TensorFlow从1到2（四）时尚单品识别和保存、恢复训练数据

    Fashion Mnist --- 一个图片识别的延伸案例 在TensorFlow官方新的教程中,第一个例子使用了由MNIST延伸而来的新程序. 这个程序使用一组时尚单品的图片对模型进行训练,比如T恤 ...

  2. 在电子商务里，一般会提到这样几个词：商品、单品、SPU、SKU

    简单理解一下,SPU是标准化产品单元,区分品种:SKU是库存量单位,区分单品:商品特指与商家有关的商品,可对应多个SKU. 首先,搞清楚商品与单品的区别.例如,iphone是一个单品,但是在淘宝上当很 ...

  3. (五)Ajax修改购物车单品数量

    需要gson-2.2.4.jar BookServlet.java package com.aff.bookstore.servlet; import java.io.IOException; imp ...

  4. retailMall-vuedemo1

    //home.vue <template> <div class="home"> <div class="top-info"> ...

  5. HTML5学习总结——相关练习与项目

    一.小米商城项目 第一天示例代码: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  6. 仿联想商城laravel实战---1、仿联想商城需求和数据库设计（lavarel如何搭建项目）

    仿联想商城laravel实战---1.仿联想商城需求和数据库设计(lavarel如何搭建项目) 一.总结 一句话总结: composer引入lavarel.配置域名.配置apache 1.项目名 le ...

  7. 关于selenium自动化对窗口句柄的处理

    首先什么是句柄?句柄就是你点击一个页面,跳转了一个新的窗口.你要操作的元素可能在原窗口上,也有可能在新窗口上. 看下图句柄1 句柄2 由这2张图可知,url不一样,证明他们是处于不同的界面,我要操作的 ...

  8. vue的表单编辑删除，保存取消功能

    过年回来第一篇博客,可能说的不是很清楚,而且心情可能也不是特别的high,虽然今天是元宵,我还在办公室11.30在加班,但就是想把写过的代码记下来,怕以后可能真的忘了.(心将塞未塞,欲塞未满) VUE ...

  9. 15 款优化表单的 jQuery 插件

    网页上的表单提供给用户的一种交互的方式,用户输入数据,提交到服务器,等待后续的处理.这些表单在我们浏览的网页中随处可见,也容易被我们忽略. 比如,“联系我们”页面会提供一个表单给用户填写他们的信息和想 ...

随机推荐

  1. 二、spring Boot构建的Web应用中，基于MySQL数据库的几种数据库连接方式进行介绍

    包括JDBC.JPA.MyBatis.多数据源和事务. 一.JDBC 连接数据库 1.属性配置文件(application.properties) spring.datasource.url=jdbc ...

  2. XSS注入,js脚本注入后台

    曾经一度流行sql注入,由于现在技术的更新,已经看不到这问题了,但是又出来新的安全问题,XSS攻击,他的原理就是在前端提交表单的时候,在input标签当中输入js脚本,通过js脚本注入后台,请看下图. ...

  3. 使用angularjs实现注册表单

    本文是在学习angularjs过程中做的相应的练习 github地址 https://github.com/2016Messi/angularjs1.6-form 演示地址 https://2016m ...

  4. Struts2学习---拦截器+struts的工作流程+struts声明式异常处理

    这一节我们来看看拦截器,在讲这个之前我是准备先看struts的声明式异常处理的,但是我发现这个声明式异常处理就是由拦截器实现的,所以就将拦截器的内容放到了前面. 这一节的内容是这样的: 拦截器的介绍 ...

  5. NFV、DPDK以及部分用户态协议研究

    本文为作者原创,转载请注明出处(http://www.cnblogs.com/mar-q/)by 负赑屃 对我而言,这是一个新的领域,很有意思. 一.解释名词: NFV(Network Functio ...

  6. HTML的三种布局：DIV+CSS、FLEX、GRID

    Div+css布局 也就是盒子模型,有W3C盒子模型,IE盒子模型.盒子模型由四部分组成margin.border.padding.content. 怎么区别这两种模型呢,区别在于w3c中的width ...

  7. 阿里云 Angular 2 UI框架 NG-ZORRO介绍

    说明: Angular2出来后,一直想找个基于Angular2的前端后台管理框架,但一直没有找到比较适合的.前段时间在Angular官网资源无意之间看到NG-ZORRO,NG-ZORRO由阿里计算平台 ...

  8. ArcGIS 网络分析[8.5] 资料5 网络分析拓展模块及各种接口说明

    说完了网络数据集如何用AO来创建,接下来就说说如何用另一个类库--NetworkAnalyst来做网络分析. 区别于NetworkAnalysis,这个是几何网络分析用的类库. 本篇先做类库和有关接口 ...

  9. bzoj 4289: PA2012 Tax

    Description 给出一个N个点M条边的无向图,经过一个点的代价是进入和离开这个点的两条边的边权的较大值,求从起点1到点N的最小代价.起点的代价是离开起点的边的边权,终点的代价是进入终点的边的边 ...

  10. php-自动生成sql语句

    前两天学习到的知识,挺有用的,因此这里做个分享 function AutoCreateSql($tab,$dataarr,$mode='insert',$where=' 1 and 1 limit 1 ...