The procedure is as follows:
(1) Prepare an image (left and right arrows and some sample images)
(2) The JS (jquery) code is as follows:
Copy codeThe Code is as follows:
<Script type = "text/javascript" src = "JS/jquery-1.4.4.js"> </script>
<Script type = "text/javascript">
Var picPath = new Array ();
PicPath. push ("Images/chuang_yhb.jpg ");
PicPath. push ("Images/dong_wgx.jpg ");
PicPath. push ("Images/gao_xsg.jpg ");
Var index = 0;
$ (Function (){
Var top = $ ("# img1"). offset (). top;
Var left = $ ("# img1"). offset (). left;
Var height = $ ("# img1"). height ();
Var width = $ ("# img1"). width ();
$ ("# Img1"). attr ({"src": picPath [index]});
$ ("# Img1"). parent (). hover (function (){
// Show the arrow left and right
$ ("# LeftArrow"). show ();
$ ("# RightArrow"). show ();
$ ("# LeftArrow" ).css ({"left": left-10, "top": top + (height/2 )});
$ ("# RightArrow" 2.16.css ({"left": left + width, "top": top + (height/2 )});
}, Function (){
// Hide the arrrow left and right
$ ("# LeftArrow"). hide ();
$ ("# RightArrow"). hide ();
});
$ ("# LeftArrow"). click (function (){
If (index> 0 ){
$ ("# Img1"). attr ({"src": picPath [-- index]});
}
});
$ ("# RightArrow"). click (function (){
If (index <picPath. length ){
$ ("# Img1"). attr ({"src": picPath [++ index]});
}
});
});
</Script>
(3) The Html section is as follows:
Copy codeThe Code is as follows:
<Div>
</Div>
The following is a js version
<! 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> <meta http-equiv =" content-Type "content =" text/html; charset = gb2312 "/> <title> untitled document </title> <style type =" text/css "> </style> </pead> <body> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]