明星单品tab 

  1 <!DOCTYPE html>
  2 <html>
  3 
  4     <head>
  5         <meta charset="UTF-8">
  6         <title></title>
  7         <style>
  8             * {
  9                 margin: 0px;
 10                 padding: 0px;
 11                 list-style: none;
 12             }
 13             
 14             h2 {
 15                 margin-bottom: 20px;
 16                 background: #ccc;
 17                 display: inline-block;
 18             }
 19             
 20             h2 span {
 21                 background: blue;
 22                 display: inline-block;
 23                 width: 40px;
 24                 height: 40px;
 25                 text-align: center;
 26                 cursor: pointer;
 27             }
 28             
 29             div {
 30                 width: 600px;
 31                 height: 200px;
 32                 border: 2px solid blue;
 33                 overflow: hidden;
 34                 position: relative;
 35             }
 36             
 37             ul {
 38                 width: 1200px;
 39                 position: absolute;
 40                 left: 0px;
 41                 transition: 0.2s linear;
 42             }
 43             
 44             ul li {
 45                 width: 200px;
 46                 height: 200px;
 47                 background: #eee;
 48                 float: left;
 49             }
 50             
 51             ul li:nth-child(even) {
 52                 background-color: green;
 53             }
 54             
 55             ul.now1 {
 56                 left: -600px;
 57             }
 58             
 59             ul.now2 {
 60                 left: 0px;
 61             }
 62             
 63             span.disable {
 64                 background: #ccc;
 65                 color: #eee;
 66                 cursor: default;
 67             }
 68         </style>
 69     </head>
 70 
 71     <body>
 72         <h2><span>&lt;</span> | <span>&gt;</span> </h2>
 73         <div>
 74 
 75             <ul>
 76                 <li>AAA</li>
 77                 <li>BB</li>
 78                 <li>CC</li>
 79                 <li>DD</li>
 80                 <li>EE</li>
 81                 <li>FF</li>
 82             </ul>
 83         </div>
 84 
 85         <script>
 86             var btn = document.querySelectorAll("span");
 87             var ul = document.querySelector("ul");
 88             var h2 = document.querySelector("h2");
 89             var i = 0,
 90                 timer;
 91             btn[1].onclick = function() {
 92 
 93                 ul.className = "now1";
 94                 this.className = "disable"
 95                 this.previousElementSibling.className = "";
 96                 i = 1;
 97             }
 98             btn[0].onclick = function() {
 99                 ul.className = "now2";
100                 this.className = "disable"
101                 this.nextElementSibling.className = "";
102                 i = 0;
103             }
104 
105             //自动走动
106 
107             function AutoPlay() {
108                 if(i == 0) {
109                     i = 1;
110                     ul.className = "now1";
111                     btn[0].className = ""
112                     btn[1].className = "disable"
113                 } else if(i == 1) {
114                     i = 0;
115                     ul.className = "now2";
116                     btn[0].className = "disable"
117                     btn[1].className = "";
118                 }
119 
120             }
121 
122             timer = setInterval(AutoPlay, 2000);
123 
124             h2.onmouseover = function() {
125                 clearInterval(timer)
126             }
127             h2.onmouseout = function() {
128                 timer = setInterval(AutoPlay, 2000);
129             }
130         </script>
131     </body>
132 
133 </html>

 

posted @ 2017-09-09 23:21  ︶ㄣ鳯躌氷瀚  阅读(99)  评论(0)    收藏  举报