<!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. gulp提高微信小程序开发效率

      最近公司要求把一套公众号项目的页面迁移到小程序,也就意味着要重新敲一份代码,不能更繁琐了,为了节省时间,提高迁移效率,就决定自己动手用gulp搭一个简易的小程序框架,再记录一下搭建过程.希望有大神 ...

  2. mybatis关联

    title: mybatis关联 date: 2017-12-18 18:00:30 tags: - [mybatis] categories: - [编程] - [开发工具] permalink: ...

  3. select的限制以及poll的使用

    1.先说select在多路IO中的限制:1)linux中每个程序能够打开的最多文件描述符是有限制的.默认是1024.可以通过ulimit -n进行查看和修改: xcy@xcy-virtual-mach ...

  4. python self

    Python要self的理由 Python的类的方法和普通的函数有一个很明显的区别,在类的方法必须有个额外的第一个参数(self),但在调用这个方法的时候不必为这个参数赋值(显胜于隐的引发). Pyt ...

  5. Zabbix安装之路

    这次的教程多半是搬运过来的,但都经过小轩亲自测试与修改了.文章最后将公布原资源地址.此篇算是整合,但又不全是整合. 依旧需求开篇:上头让小轩监控一下服务器的情况,在前几篇也有所提到.于是小轩就到处去找 ...

  6. ligerUI---ligerGrid分页排序的使用(从后台获取数据显示)

    写在前面: 最近项目的前框框架用的是ligerUI,里面用到了ligerGrid表格,下面就来说说从后台获取数据并在前台页面进行完美展示.啊哈哈哈..(天啦,坐我旁边的丽姐貌似炒股 一个月可以搞几十万 ...

  7. VM环境下Linux虚拟机扩展存储空间操作方法总结

    用VMwareware虚拟机安装的 Linux 系统剩余空间不足,造成软件无法正常安装.如果重新装一遍系统就需要重新配置好开发环境和软件的安装配置. 一.空间扩展  (1)打开VMware,选择Edi ...

  8. iOS学习——内存泄漏检查及原因分析

    项目的代码很多,前两天老大突然跟我说项目中某一个ViewController的dealloc()方法没有被调用,存在内存泄漏问题,需要排查原因,解决内存泄漏问题.由于刚加入项目组不久,对出问题的模块的 ...

  9. Spring+MVC+Mybatis整合

    本文是对慕课网上"搞定SSM开发"路径的系列课程的总结,详细的项目文档和课程总结放在github上了.点击查看 什么是秒杀业务 网站售卖某产品时,规定在某个日期开始售卖限量的产品, ...

  10. scala写算法-用小根堆解决topK

    topK问题是指从大量数据中获取最大(或最小)的k个数,比如从全校学生中寻找成绩最高的500名学生等等. 本问题可采用小根堆解决.思路是先把源数据中的前k个数放入堆中,然后构建堆,使其保持堆序(可以简 ...