Table tabs and seamless scrolling in jquery

HTML code:

<! DOCTYPE html>
Code for CSS:
*{padding:0;margin:0;} Li{list-style-type:none;} body{margin:50px;}. Hide{display:none;}. Tabtitle ul{overflow:hidden;_height:1px;}. Tabtitle ul li{float:left;border:1px solid #abcdef; border-bottom:none;height:30px;line-height:30px;padding:0 15px;margin-right:3px;cursor:pointer;}. Current0{background: #abcdef; color: #FF6600;}. Current1{background:red;color:teal;}. Current2{background:green;color:yellow;}. Tabcontent div{border:1px solid #f60; width:300px;height:250px;padding:15;}
JS Code:
$ (function () {var ali=$ ('. Tabtitle ul Li '), var adiv=$ ('. Tabcontent div '); var timeid=null;ali.mouseover (function () {// This is defined as the anonymous function var _this=$ (this); the//$ (this) method belongs to which element, $ (this) refers to which element//siblings in addition to the selected sibling element//settimeout (): Delay execution of a piece of code Timeid =settimeout (function () {//_this.addclass (' current '). Siblings (). Removeclass (' current '); _this.addclass (function () {return ' current ' +_this.index ();}). Siblings (). Removeclass (); var index=_this.index ();//If you want to use a set of elements to control the display or hiding of another set of elements, you need to use Index ADIV.EQ. Show (). Siblings (). Hide ();},500);//clear timer when mouse is removed}). mouseout (function () {//cleartimeout is to clear the timer cleartimeout (Timeid);});});
Effect:
Seamless scrolling HTML:
<! DOCTYPE html>
CSS code:
*{padding:0;margin:0;} Li{list-style-type:none;} body{margin:50px;}. warp{border:3px solid #f00; width:800px;height:200px;    position:relative;     Overflow:hidden;}. Warp ul{overflow:hidden;width:1600px;position:absolute;left:0;top:0;_height:1px;}. Warp ul Li{float:left;}
JS Code:
If you want to make an element move, typically this element must have a property with position $ (function () {var oul=$ ('. Warp ul '); var oulhtml=oul.html (); Oul.html ( oulhtml+oulhtml) var timeid=null;var ali=$ ('. Warp ul Li ');//or the width var aliwidth=ali.eq (0) lacking li. Width ();//or missing size var alisize= Ali.size (), Var ulwidth=aliwidth*alisize;oul.width (ulwidth), var speed=2;function slider () {if (speed<0) {if ( Oul.css (' left ') ==-ulwidth/2+ ' px ') {oul.css (' left ', 0);    }        Oul.css (' left ', ' +=-2px '); }if (speed>0) {if (Oul.css (' left ') = = ' 0px ') {   oul.css (' left ',-ulwidth/2+ ' px ');    } Oul.css (' left ', ' + = ' +speed+ ' px ');}} The function of the setinterval () function, which executes the code timeid=setinterval (slider,30) for each period of time;  $ ('. Warp '). MouseOver (function () {//clearinterval () Clear timer clearinterval (Timeid);}); $ ('. Warp '). Mouseout (function () {timeid=setinterval (slider,30);});  $ ('. Goleft '). Click (function () {speed=-2;}); $ ('. GoRight '). Click (function () {speed=+2;}); });
Effect:
 Table tabs and seamless scrolling in jquery