<!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. 在Windows上运行Spark程序

    一.下载Saprk程序 https://d3kbcqa49mib13.cloudfront.net/spark-2.1.1-bin-hadoop2.7.tgz 解压到d:\spark-2.1.1-bi ...

  2. Bat脚本命令说明

    命名参考 使用方式如果不知道如何使用就到cmd窗口键入help 命名名 例如:"help del" 命令名 注释 ASSOC 显示或修改文件扩展名关联. ATTRIB 显示或更改文 ...

  3. iOS 蓝牙开发资料记录

    一.蓝牙基础认识:   1.iOS蓝牙开发:  iOS蓝牙开发:蓝牙连接和数据读写   iOS蓝牙后台运行  iOS关于app连接已配对设备的问题(ancs协议的锅)          iOS蓝牙空中 ...

  4. Python学习日记：day9--------函数

    初识函数 1,自定义函数 s ='内容' #自定义函数 def my_len():#自定义函数没有参数 i =0 for k in s: i+=1 print(i) return i #返回值 my_ ...

  5. ASP.NET Cookie 概述

    什么是 Cookie? Cookie 是一小段文本信息,伴随着用户请求和页面在 Web 服务器和浏览器之间传递.Cookie 包含每次用户访问站点时 Web 应用程序都可以读取的信息. 例如,如果在用 ...

  6. 深度搜索DFS-Lake Counting（POJ NO.2386）

    题目链接POJ NO.2386 解题思路: 这个也是一个dfs 的应用,在书上的例子,因为书上的代码并不全,基本都是函数分块来写,通过这个题目也规范了代码,以后能用函数的就都用函数来实现吧.采用深度优 ...

  7. SP的封装(数据持久化方式一)

    1.先看一段描述: Interface for accessing and modifying preference data returned by Context.getSharedPrefere ...

  8. Webpack 2 视频教程 012 - 理解Webpack 中的 CSS 作用域与 CSS Modules

    原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...

  9. Sql 的 RAISERROR用法

    http://www.yesky.com/imagesnew/software/tsql/ts_ra-rz_5ooi.htm RAISERROR 返回用户定义的错误信息并设系统标志,记录发生错误.通过 ...

  10. 使用plenv安装perl，并使其支持多线程

    plenv与pyenv.rbenv等都是同类型软件中非常好用的,这三个软件不仅命名类似,操作方式也相差无几,节约了很多学习的成本,所以非常推荐: 安装使用plenv: git clone git:// ...