<!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. 自学Zabbix3.6.5-触发器item-Unit symbols单位符号

    在zabbix里面,我们不需要使用大数字来,例如我们可以不使用86400来表示一天,这个数字又不容易理解也容易出错.用什么办法来解决大数字问题呢?我们可以使用单位来简化,例如简化zabbix触发器表达 ...

  2. Android查缺补漏--Service和IntentService

    Service的运行不依赖界面,即使程序被切换到后台,Service仍然能够保持正常运行.当某个应用程序进程被杀掉时,所有依赖于该进程的Service也会停止运行. Service 分为启动状态和绑定 ...

  3. git 设置和取消代理

    # 设置ss git config --global http.proxy 'socks5://127.0.0.1:1080' git config --global https.proxy 'soc ...

  4. KD树小结

    很久之前我就想过怎么快速在二维平面上查找一个区域的信息,思考许久无果,只能想到几种优秀一点的暴力. Kd树就是干上面那件事的. 别的不多说,赶紧把自己的理解写下来,免得凉了. KD树的组成 以维护k维 ...

  5. UVALive 4850 Installations

    题目大意:有若干个任务,每个任务耗时si,期限为di,同一时间只能做一个任务.对于一个任务,惩罚值为max(0,完成时间-期限).问怎么安排,使(最大惩罚值+次大惩罚值)最小,O(n^2). 如果没有 ...

  6. 获取SpringMVC的映射路径

    public String init(HttpServletRequest request, HttpServletResponse response){ List<String> uLi ...

  7. ES6 函数的扩展3

    箭头函数 基本用法 ES6允许使用"箭头"(=>)定义函数 var f = v => v; 上面的箭头函数等同于: var f = function(v) { retu ...

  8. Android测试：Building Local Unit Tests

    原文:https://developer.android.com/training/testing/unit-testing/local-unit-tests.html 如果你的单元测试没有依赖或者只 ...

  9. [编织消息框架][netty源码分析]9 Promise 实现类DefaultPromise职责与实现

    netty Future是基于jdk Future扩展,以监听完成任务触发执行Promise是对Future修改任务数据DefaultPromise是重要的模板类,其它不同类型实现基本是一层简单的包装 ...

  10. c#代码技巧

    1.#region #endregion 1.#region 是一个分块预处理命令,主要用于编辑代码分段,在编译时会自动屏蔽,同时该指令可以使代码在VS代码编辑器中折叠或展开: 2.#region必须 ...