1. Picture Scrolling
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title></title>
<script type= "Text/javascript" src= "Jquery.min.js" ></script>
<script type= "Text/javascript" >
$ (document). Ready (function () {
Xhun (". a"); ----------------------just need to modify the ". A" (the class value of the largest div here's 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 to Div, in order to achieve seamless loop
$ (Box_div). Append ($ (box_frame). Clone ()); Clone a UL and add to Div, in order to achieve seamless loop
var li_size = $ (_box). Find ("Li"). Size (); Get the number of Li
var li_width = $ (box_frame). Children ("Li"). width (); Get the width of Li
var box_div_width = $ (box_div). Width (li_size * li_width * 5); Set the width of a div
$ (box_frame). CSS ("float", "left");
var dd = setinterval (GD, 30);
function gd () {
var position = $ (_box). ScrollLeft (); ScrollLeft () is the horizontal offset to get the object
$ (_box). scrollleft (position + 1);
if (position >= $ (box_frame). Width ()) {$ (_box). scrollleft (0);} Determine if the displacement is greater than the total length of the 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>
<body>
<div class= "a" >
<ul>
<li><a href= "#" >
</a></li>
<li><a href= "#" >
</a></li>
</ul>
</div>
</body>
2, Slide
Copy Code code as follows:
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Slide Transitions </title>
<script type= "Text/javascript" src= "Jquery.min.js" ></script>
<script type= "Text/javascript" >
$ (document). Ready (function () {
Slide (". Frame"); ----------------------just need to modify the ". Frame" (The class value of the largest div here's the line---------------------
});
function Slide (CLS) {
$ (CLS). FIND ("ul"). Wrap ("<div></div>");
$ (cls+ "div"). attr ("Class", "iframe");
var li = $ (CLS). Find ("Li"). Size ();//count how many pictures
var li_width = $ (CLS). Find ("Li"). width (); Get the width of Li
$ (cls + "div"). Children ("ul"). Width (Li_width * li);/set width to arrange the picture in a row
var s = "<ul class= ' button ' >";//button to generate Li
for (var i = 0; i < li; i++) {
S + + "<li>" + (i + 1) + "</li>";
}
S + + "</ul>";
$ (s). Appendto ($ (CLS));//Generate button ends and added to maximum div
var _i = 0;//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");/set class, no need to add another off
$ (cls + "div"). Animate ({scrollleft:i * li_width}, "slow");//Picture move
});
). EQ (0). Click ();
function tt () {//Timer functions
_i++;
_i = _i% Li;
$ (CLS). Find (". Button Li"). EQ (_i). Click ()//Toggle picture automatically
}
var t = setinterval (TT, 3000);//Timer
$ (CLS). Hover (function () {
Clearinterval (t)//mouse through the purge timer, leave and trigger
}, 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;} /* Here you need to modify the maximum div width and Height * *
. iframe {overflow:hidden; width:280px; height:280px;} /* Here you need to change the width and height of the div.
. iframe ul li {float:left; width:280px;} /* Here you need to change the width of li * *
. 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>
<body>
<!--here to 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>