The effect is as follows:
The main point of this plugin is the application of the new function data added to the Jquery-1.4.2.js release, so the jquery library must be a 1.4.2 version
The other is the writing of CSS, setinterval and settimeout usage, the former is every how long time executes, the latter is how long time executes;
There are two forms of usage for settimeout 1 settimeout (code,interval) code is a string
The Func in 2 settimeout (Func,interval,args) is a function
Implementation code
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" > <HTML> <HEAD> <title>jquery slidepict rue</title> <style type= "Text/css" > *{margin:0px; padding:0px; body{font-size:12px Color:white} #imageShow {Position:relative;z-index:3;overflow:hidden;width:586px;height : 150px} #imageShow #imageSwitch {position:absolute;right:0px;bottom:0px;padding-left:50px;z-index:4; Background-color: #C08A93; Filter:alpha (opacity=70); opacity:0.7;} #imageShow #imageSwitch li{float:left;border-left:1px solid white;height:14px;width:30px; text-align:center;line-height:14px;} </style> </HEAD> <BODY> <script type= "Text/javascript" src= "http://img.jb51.net/jslib/jquery/ Jquery14.js "></script> <script type=" Text/javascript "> $ (function () {$imageShow =$ (" #imageShow "); $images =$ ("#imageSrc li", $imageShow); $imageSwitches =$ ("#imageSwitch li", $imageShow); Determine the number of pictures, if there is a picture if ($images. Size () >0){init (); Use SetInterval to set the delay time, execute Autoswitch function every 1 seconds, var timer=setinterval (autoswitch,1000); Traversal functions $imageSwitches. Each (function (Index,item) {$ (item). Click (function () {clearinterval (timer); SetTimeout has two forms, the first settimeout (code,interval), the code is a string, the second//settimeout (Func,interval,args), and the Func is a function expression, not a statement settimeout (function () {timer=setinterval (autoswitch,1000)},1000); $imageSwitches. CSS (' Background-color ', '). EQ (index). CSS (' Background-color ', ' #FF3366 '); The data function is now used for the picture and the following table against if (index!= $imageShow. Data (' show ')} {$imageShow. Data (' show ', index); $images. Hide (). EQ (index). FadeIn (' slow '); }})}//Automatically displayed function Autoswitch () {$nowIndex = $imageShow. Data (' show ') +1; if ($images. Size () > $nowIndex) {$imageSwitches. css (' Background-color ', '). EQ ($nowIndex). CSS (' Background-color ' , ' #FF3366 '); $imageShow. Data (' show ', $nowIndex); $images. Hide (). EQ ($nowIndex). FadeIn (' slow '); }else{init (); }//Initialize to First picture start function init () {$imageShow. Data (' show ', 0); $images. Hide (). EQ (0). FadeIn (' slow '); $imageSwitches. CSS (' Background-color ', '). EQ (0). css (' Background-color ', ' #FF3366 '); } }); </script> <div id= "Imageshow" > <ul id= "imagesrc" > <li></li> <li></li> <l i></li> <li></li> <li></li> </ul> <ul id= "Imageswitch" > <li>1< /li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> < /div> </BODY> </HTML>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
