1. Image scrolling
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> </title>
<Script type = "text/javascript" src = "jquery. min. js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
Xhun (". a"); // ---------------------- you only need to modify ". a" (that is, the maximum div class value. Here is the line ---------------------
});
Function Xhun (_ box ){
Var box_frame = _ box + "div ul ";
Var box_div = _ box + "div ";
$ (_ Box). find ("ul"). wrap ("<div> </div>"); // Add a div to control the offset.
$ (Box_div). append ($ (box_frame). clone (); // clone a ul and add it to the div to achieve seamless Loops
$ (Box_div). append ($ (box_frame). clone (); // clone a ul and add it to the div to achieve seamless Loops
Var li_size = $ (_ box). find ("li"). size (); // obtain the number of li
Var li_width = $ (box_frame). children ("li"). width (); // obtain the width of li
Var box_div_width = $ (box_div). width (li_size * li_width * 5); // you can specify the div width.
$(Box_frame0000.css ("float", "left ");
Var dd = setInterval (gd, 30 );
Function gd (){
Var position = $ (_ box). scrollLeft (); // scrollLeft () is the horizontal offset of the object.
$ (_ Box). scrollLeft (position + 1 );
If (position >=$ (box_frame). width () {$ (_ box). scrollLeft (0) ;}// determine whether the displacement is greater than the total length of ul
}
$ (_ Box). mouseleave (function (){
Dd = setInterval (gd, 30 );
}). Mouseenter (function (){
ClearInterval (dd );
});
}
</Script>
<Style type = "text/css">
* {Margin: 0; padding: 0 ;}
Ul {list-style: none ;}
Li {float: left; margin-left: 10px; width: 100px ;}
Img {width: 100px; height: 100px ;}
. A {width: 400px; margin: 0 auto; overflow: hidden; height: 100px ;}
</Style>
</Head>
<Body>
<Div class = "a">
<Ul>
<Li> <a href = "#">
</a> </li>
<Li> <a href = "#">
</a> </li>
</Ul>
</Div>
</Body>
</Html>
2. Slides
<! DOCTYPE html>
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> slide switchover </title>
<Script type = "text/javascript" src = "jquery. min. js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
Slide (". frame"); // ---------------------- you only need to modify ". frame" (that is, the class value of the largest div. Here is the line ---------------------
});
Function slide (cls ){
$ (Cls). find ("ul"). wrap ("<div> </div> ");
$ (Cls + "div"). attr ("class", "iframe ");
Var li = $ (cls). find ("li"). size (); // count the number of images
Var li_width = $ (cls). find ("li"). width (); // obtain the width of li
$ (Cls + "div"). children ("ul"). width (li_width * li); // set the width to arrange the image in a row
Var s = "<ul class = 'button '>"; // generate the li button
For (var I = 0; I <li; I ++ ){
S + = "<li>" + (I + 1) + "</li> ";
}
S + = "</ul> ";
$ (S). appendTo ($ (cls); // The generated button ends and is added to the largest div.
Var _ I = 0; // The current number
$ (Cls). find (". button li"). each (function (I ){
// Generate button click event
$ (This). click (function (){
_ I = I;
$ (This). attr ("class", "on"). siblings (). removeAttr ("class"); // you do not need to add one more off to set the class.
$ (Cls + "div"). animate ({scrollLeft: I * li_width}, "slow"); // move the image
});
}). Eq (0). click ();
Function tt () {// timer function
_ I ++;
_ I = _ I % li;
$ (Cls). find (". button li"). eq (_ I). click (); // automatically click to switch the image
}
Var t = setInterval (tt, 3000); // Timer
$ (Cls). hover (function (){
ClearInterval (t); // The cursor is cleared by the timer and triggered when it leaves
}, Function (){
T = setInterval (tt, 3000 );
})
}
</Script>
<Style type = "text/css">
* {Margin: 0; padding: 0 ;}
Li, ul {list-style: none; margin: 0; padding: 0 ;}
. Frame {width: 280px; height: 280px; position: relative; margin: 0 auto;}/* change the width and height of the largest div */
. Iframe {overflow: hidden; width: 280px; height: 280px;}/* modify the width and height of the div */
. Iframe ul li {float: left; width: 280px;}/* here you need to modify the li width */
. Button {position: absolute; bottom: 15px; right: 15px; z-index: 300 ;}
. Button li {float: left; cursor: pointer; width: 17px; height: 17px; line-height: 17px; text-align: center; margin-right: 5px; border-radius: 7px; color: # fff; background: #000 ;}
. Button. on {color: #000; background: # fff ;}
</Style>
</Head>
<Body>
<! -- Write in this format -->
<Div class = "frame">
<Ul>
<Li> <a href = "#">
</a> </li>
<Li> <a href = "#">
</a> </li>
<Li> <a href = "#">
</a> </li>
<Li> <a href = "#">
</a> </li>
<Li> <a href = "#">
</a> </li>
</Ul>
</Div>
</Body>
</Html>
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
