Simple js code to implement click-arrow image switching_Image special effects

The steps are as follows:

(1) Prepare pictures (left and right arrows, and some sample pictures)

(2) The JS (jquery) code is as follows:

Copy code The code is as follows:

(3) The Html part is as follows:

Copy code The code is as follows:

Attached below is a js version of

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Untitled Document</title> <style type="text/css"> <!-- *{ margin:0; padding:0} #imgslide{ margin:100px auto; width:550px; position:relative;-moz-user-select:none } #imgslide img{ width:550px} #imgslide #pre{ position:absolute; display:block; height:100%; background:#003366;filter:Alpha(Opacity=0);opacity:0; left:0; top:0; z-index:2; width:50%; cursor:url(http://s.xnimg.cn/imgpro/arrow/pre.cur),auto; } #imgslide #next{ position:absolute;z-index:2; display:block; background:#00CC99;filter:Alpha(Opacity=0);opacity:0; height:100%;width:50%; top:0; right:0; cursor:url(http://s.xnimg.cn/imgpro/arrow/next.cur), auto;} #intro{ padding:5px 8px; line-height:1.6; font-size:12px; color:#333; background:#333333; color:#fff} --> </style> <div id="imgslide"> <span id="pre"></span> <span id="next"></span><img src="/static/imghwm/default1.png" data-src="http://img1.gtimg.com/0/68/6884/688412_550x550_0.jpg?x-oss-process=image/resize,p_40" class="lazy" id="showimg" alt="Simple js code to implement click-arrow image switching_Image special effects" > <div id="intro"> </div> </div>