The jQuerysliderContent (left and right control movement) implementation code can be referred. Good results. Many text ads can be controlled in this way.
<Script type = "text/javascript" src =" http://img.jb51.net/jslib/jquery/jquery-1.3.2.min.js?1.1.23 "> Script <script type =" text/javascript "> function animate (dir, step) {var position; position = parseInt ($ ("# content" ).css ("margin-left"); var contentwidth; var sliderwidth; contentwidth = parseInt ($ ("# content" ).css ("width"); sliderwidth = parseInt ($ ("# slider" ).css ("width ")); // alert (position); switch (dir) {case "right": position = (position-step) <(sliderwidth-contentwidth ))? (Sliderwidth-contentwidth): (position-step); break; case "left": position = (position + step)> 0 )? 0: (position + step); break; default: break;}; // alert (position); $ ("# content "). animate ({marginLeft: position + "px"}, 800) ;}$ (document ). ready (function () {$ ("# slider" ).css ("width", ($ ("body "). attr ("clientWidth")-80) + "px"); $ ("# leftA "). click (function () {animate ("left", 400) ;}); $ ("# rightA "). click (function () {animate ("right", 400) ;}); script <style type = "text/css"> ul, li {display: block;} li {width: 150px; float: left ;}# content {width: 2030px; margin-left: 0px ;}# slider {margin-left: 40px; overflow: hidden ;}# leftA {display: block; float: left; left: 10px; top: 5px; position: absolute; background-image: url () ;}# rightA {display: block; float: right; right: 10px; top: 5px; position: absolute; background-image: url ();} </style> <body> <p class = "title_bar"> left <p id = "slider"> <p id = "content"> <ul id = "Ul1" class = "tab_nav" style = "margin-left: 0px; margin-right: 0px; "> <li id =" gaom1 "class =" menuon "> Basic Information </li> <li id =" gaom2 "class =" menuoff "> Basic Information </li> <li id = "gaom3" class = "menuoff"> Basic Information </li> <li id = "gaom4" class = "menuoff"> Basic Information </li> <li id = "gaom5" class = "menuoff"> Basic Information </li> <li id = "gaom6" class = "menuoff"> Basic Information </li> <li id = "gaom7" class = "menuoff"> Basic Information </li> <li id = "gaom8" class = "menuoff"> Basic Information </li> <li id = "gaom9 "class =" menuoff "> Basic Information </li> <li id =" gaom10 "class =" menuoff "> Basic Information </li> <li id =" gaom11 "class = "menuoff"> Basic Information </li> </ul> </p> right </p> </body>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
After running, you need to refresh it because it is an external js.