Tip: you can modify some code before running
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Jquery slidepictrue</tITLE> <style type="text/css">* {Margin: 0px; padding: 0px; list-style: none;} 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://www.111cn.net/demo/jquery14.js"></script> <script type="text/javascript">$ (Function () {$ imageShow = $ ("# imageShow"); $ images = $ ("# imageSrc li", $ imageShow ); $ imageSwitches = $ ("# imageSwitch li", $ imageShow); // determines the number of images. if there is an image if ($ images. size ()> 0) {init (); // use setInterval to set the delay time. The autoSwitch function is always executed every one second. var timer = setInterval (autoSwitch, 1000 ); // traverses the function $ imageSwitches. each (function (index, item) {$ (item ). click (function () {clearInterval (timer); // setTimeout has two forms: the first setTimeout (code, inter Val), code is a string, the second type // setTimeout (func, interval, args), func is a function expression, rather than the statement setTimeout (function () {timer = setInterval (autoSwitch, 1000)}, 1000); then imageswitches.css('background-color', ''{.eq(index}.css ('background-color', '# FF3366'); // Now the data function is used to compare images with the following table if (index! = $ ImageShow. data ('show') {$ imageShow. data ('show', index); $ images. hide (). eq (index ). fadeIn ('slow') ;}})} // function autoSwitch () {$ nowIndex = $ imageShow. data ('Show ') + 1; if ($ images. size ()> $ nowIndex) {your imageswitches.css('background-color', 'Your .eq({nowindex}.css ('background-color', '# FF3366'); $ imageShow. data ('show', $ nowIndex); $ images. hide (). eq ($ nowIndex ). fadeIn ('low');} else {init () ;}// initialize to the first image and start function init () {$ imageShow. data ('show', 0); $ images. hide (). eq (0 ). fadeIn ('slow'); your imageswitches.css('background-color', 'Your .eq(0).css ('background-color', '# FF3366 ');}});</script> <div id="imageShow"> <ul id="imageSrc"> <li></li> <li></li> <li></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>
Tip: you can modify some code before running
