Tip: you can modify some code before running
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><ptml xmlns="http://www.w3.org/1999/xhtml"> <pead> <title>How do I learn about jquery? (7) Case Study: continuously rolling QQ group: 70210212,77813547</title> <meta name="generator" content="editplus" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <style> body,img,ul,li, h2{margin:0;padding:0;border:none;font-size:14px;} h2 a{color:#2B2B2B;text-decoration:none;} .focus_tab{height:255px;margin:4px auto 0;position:relative;} .focusPic{width:708px;height:260px;border:1px solid #DCDDDD;overflow:hidden;margin-left:100px;margin-top:300px;} .sidePic{float:right;list-style:none;} .sidePic li{ width:21px;text-align:center;height:24px;line-height:26px;float:left;margin-right:7px;color:#2B2B2B; background: url("http://img3.cache.netease.com/cnews/newstest1204/focusbg2.gif") no-repeat scroll left bottom transparent;cursor:pointer; }.focus_tab .normal{float:left;margin-right:10px;}.sidePic .on { background: url("http://img3.cache.netease.com/cnews/newstest1204/focusbg1.gif") no-repeat scroll left bottom transparent; color: #FFFFFF;display:block;} </style> <script src="http://www.lovewebgames.com/demo/jquerystudy/jquery-1.4.1.min.js" type="text/javascript"></script> <script> $(function(){var itemWidth=$(".focus_tab > .normal").width()+10;var sumWidth=itemWidth*$(".focus_tab > .normal").length;var temp=$(".focus_tab > div").clone();temp.appendTo(".focus_tab");$(".focus_tab").width(sumWidth*2);var i=0;setInterval(play,18);function play(){//$(".focus_tab").offset({left:i,top:$(".focus_tab").offset().top});$(".focus_tab").css("left",i)i-=1;//if(Math.abs($(".focus_tab").offset().left)>=sumWidth)if(Math.abs(parseInt($(".focus_tab").css("left")))>=sumWidth){i=0;}} }); </script> </pead> <body> <div class="focusPic"><div class="focus_tab"><div class="normal"> <p>The return capsule of Shenzhou 8 landed in Inner Mongolia</p></div><div class="normal"> <p>The official name of the 6 million Beijing-East-Anhui official website is "the patron saint of Anhui"</p></div><div class="normal"> <p>Period 1 of "customer watching": people are blocking the road</p></div></div> </div> </body></ptml></td> </tr></table>
Tip: you can modify some code before running