<!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. java中websocket的应用

    在上一篇文章中,笔者简要介绍了websocket的应用场景及优点,戳这里 这篇文章主要来介绍一下在java项目中,特别是java web项目中websocket的应用. 场景:我做了一个商城系统,跟大 ...

  2. 转：java泛型总结

    转自:http://www.cnblogs.com/lwbqqyumidi/p/3837629.html 一. 泛型概念的提出(为什么需要泛型)? 首先,我们看下下面这段简短的代码: 1 public ...

  3. springMVC学习总结（三）数据绑定

    springMVC学习总结(三)数据绑定 一.springMVC的数据绑定,常用绑定类型有: 1.servlet三大域对象: HttpServletRequest HttpServletRespons ...

  4. 聊聊属性方法property的用法

    写之前随便百度了一下博客,又看到廖雪峰的博客了.果然置顶的能力很强. 我想说其实property的用法并不是主要用来做类型检查.反而更多应该是用于简化操作的目的. 写之前想聊一个古老的话题.年初的时候 ...

  5. 登录验证码demo-java

    在一些类似于管理系统的项目中,我们在登录时经常会用到图片验证码.这里把我自己写的一个小系统(后台是java语言)的验证码部分摘出来. 总体思路是后端有一个生成验证码图片的接口,把验证码图片写入浏览器, ...

  6. DotNetCore跨平台~Moq框架实现模拟测试

    回到目录 当我们进行软件开发时,一般会写单元测试,而对于业务情景来说,一般是测试它的业务逻辑准确性,对于你的测试数据是否来自数据库还是文件,是否为真实还是模拟,并不是很关心!我关心的就是我的业务逻辑是 ...

  7. 如何高效撤销Git管理的文件在各种状态下的更改

    一.背景 企业中我们一般采用分布式版本管理工具git来进行版本管理,在团队协作的过程中,我们难免会遇到误操作,需要撤销更改的情况,那么我们怎么高效的进行撤销修改呢?对于还未提交到暂存区的代码怎么高效撤 ...

  8. 如何在阿里云linux上部署java项目

      前2天把git练了下,敲了很多命令,也借助图形界面增强自己的理解,乘着余热把linux在熟悉下.然后想起以前婷主有让我帮忙搭建的阿里云服务器,所以就想自己试着在阿里云的linux上搭建自己的jav ...

  9. Scala 安装 Exception in thread "main" java.lang.VerifyError: Uninitialized object exists on backward branch 96

    windows下载安装完最新版本的Scala(2.12.4)后,终端如下错误 C:\Users\Administrator>scala -versionException in thread & ...

  10. python方法的延迟加载

    数据挖掘的过程中,数据进行处理是一重要的环节,我们往往会将其封装成一个方法,而有的时候这一个方法可能会被反复调用,每一次都对数据进行处理这将是一个很耗时耗资源的操纵,那么有没有办法将计算后的结果缓存起 ...