1<! DOCTYPE HTML Public"-//W3C//DTD XHTML 1.0 transitional//en" "HTTP://WWW.W3.ORG/TR/XHTML1/DTD/XHTML1-TRANSITIONAL.DTD">2"http://www.w3.org/1999/xhtml">34<meta http-equiv="Content-type"Content="text/html; Charset=utf-8"/>5<title> Untitled Document </title>6<style>7*{margin:0;p adding:0; font-size:13px;font-Family:microsoft Yahei}8li{list-Style:none}9 #wrap {width:470px;height:150px;margin:40px auto; }Ten #packet {width:470px;height:150px;overflow:hidden;position:relative} One#packet ul{Position:absolute;top:0; Left:0} A#slide li{Width:470px;height:150px;position:relative;top:0; Left:0 } - #packet ol{position:absolute;right:5px;bottom:5px;} -#packet ol Li{width:20px;height:20px;text-align:center;line-height:20px;background:orange;float: Left;margin:02px} the #packet ol li.active{background: #E54829} -</style> -<script src=".. /.. /.. /.. /jquery-1.11.1.min.js"></script> -<script> +Window.onload=function () { - varOpacket=document.getelementbyid ("Packet"); + varOul=document.getelementbyid ("Slide"); A varAli=oul.getelementsbytagname ("Li"); at varTimer=NULL; - varinow=0; - varInow2=0; - //Create ol - varOl=document.createelement ("ol"); - varStr=""; in for(varI=0; i<ali.length;i++) - { tostr+="<li>"+ (i+1)+"</li>" + } -Ol.innerhtml=str; the Opacket.appendchild (OL); * varAli1=ol.getelementsbytagname ("Li"); $ Panax Notoginseng function init () { - for(varI=0; i<ali1.length;i++){ theAli1[i].classname="' + } AAli1[inow].classname='Active' the } + init (); - $ for(varI=0; i<ali1.length;i++){ $ -Ali1[i].onmouseover=function () { - clearinterval (timer); the$('#slide'). Stop (true); -inow=$ ( This). index ();Wuyiinow2=$ ( This). index (); the init (); - Wu$('#slide'). Animate ({'Top':- Max*$( This). Index ()}); - About } $ali1[i].onmouseout=function () { -Timer=setinterval (ToRun, -); - } - A } + the -Timer=setinterval (ToRun, -); $ function ToRun () { the if(inow==ali.length-1){ theinow=0; the the$ (aLi). EQ (0). CSS ({'position':'relative','Top':'750px'}) -}Else{ ininow++; the } theinow2++; About init (); the the$('#slide'). Animate ({'Top':- Max*inow2}, +, function () { the if(inow==0){ +$ (aLi). EQ (0). CSS ('position','Static'); -$('#slide'). CSS ('Top','0px'); theInow2=0Bayi } the }) the } - - the } the</script> the the -<body> the<div id="Wrap"> the<div id="Packet"> the<ul id="Slide">94<li>"images/1.jpg"/></li> the<li>"images/2.jpg"/></li> the<li>"images/3.jpg"/></li> the<li>"images/4.jpg"/></li>98<li>"images/5.jpg"/></li> About</ul> -</div>101</div>102</body>103JQ Carousel Auto Scroll up and down
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
