本文描述了jquery实现焦点图片随机切换效果的方法。分享给大家参考。具体如下:
1.运行效果如下图所示:
2.单击此处下载完整的示例代码。
3.完整的代码如下:
复制代码代码如下:DOCTYPE html html lang=' en ' head meta charset=' utf-8 ' title幻灯片,A slide Plugin for jQuery/title link rel=' style ' href=' CSS/global。CSS ' script src=' http :https://Ajax。谷歌API。com/Ajax/libs/jQuery/1。5 .1/jQuery。量滴js '/script script src=' http 3360http://gsgd。co . uk/sandbox/var row=0;for(jquery。容易的中的var x){ if(x!='linear' x!=' swing '){ easings[row]=x;} } $(' #幻灯片')。幻灯片({ preload: true,preloadimage : ' img/loading。gif ',play: 5000,pause: 2500,slideEasing: ' swing ',slideSpeed : 2000,悬停Pause: true,animationComplete:函数(当前){ var index=math。地板(数学。random()* easings长度);jquery。放松。def=easings[index];} });});/script/head body div id=' container ' div id=' example ' img src=' http : img/New-Ribbon。png ' width=' 112 ' height=' 112 ' alt=' New Ribbon ' id=' Ribbon ' div id=' slides ' div class=' slides _ container ' a href=' http://www .Flickr。com/photos/jliba/4665625073/' title=' 145.365-Happy Bo | Flickr-照片共享!target=' _ blank ' img src=' http :http://幻灯片js。com/examples/standard/img/Slide-1。jpg ' width=' 570 ' height=' 270 ' alt=' Slide 1 '/a a a href=' http://www .Flickr。com/photos/stephangeyer/3020487807/' title=' Taxi | Flickr-photos Sharing!'target=' _ blank ' img src=' http :http://幻灯片js。com/examples/standard/img/Slide-2。jpg ' width=' 570 ' height=' 270 ' alt=' Slide 2 '/a a a href=' http://www .Flickr。com/photos/childowwar/2984345060/' title=' Bokeh raining Day | Flickr-Photo Sharing!target=' _ blank ' img src=' http :http://幻灯片js。com/examples/standard/img/Slide-3。jpg ' width=' 570 ' height=' 270 ' alt=' Slide 3 '/a a a href=' http://www .Flickr。com/photos/b-tal/117037943/' title='我们轻食| Flickr-Photo Sharing!target=' _ blank ' img src=' http :http://幻灯片js。com/examples/standard/img/Slide-4。jpg ' width=' 570 ' height=' 270 ' alt=' Slide 4 '/a a a href=' http://www .Flickr。com/photos/bu7amd/3447416780/' title=' '我必须再次下海,去孤独的大海和天空;我只需要一艘大船和一颗星来指引她| Flickr -照片共享!target=' _ blank ' img src=' http :http://幻灯片js。com/examples/standard/img/Slide-5。jpg ' width=' 570 ' height=' 270 ' alt=' Slide 5 '/a a a href=' http://www .Flickr。com/photos/street breaker/2078765853/' title='十二。英寸| Flickr -照片共享!'target=' _ blank ' img src=' http :http://幻灯片js。com/examples/standard/img/Slide-6。jpg ' width=' 570 ' height=' 270 ' alt=' Slide 6 '/a a a href=' http://www .Flickr。com/photos/aftab/3152515428/' title='为孤独保存我的爱| Flickr-照片分享!target=' _ blank ' img src=' http :http://幻灯片js。com/examples/standard/img/Slide-7。jpg ' width=' 570 ' height=' 270 ' alt=' Slide 7 '/a/div a href=' # ' class=' Prev ' img src=' http : img/Arrow-Prev。png ' width=' 24 ' height=' 43 ' alt=' Arrow Prev '/a hre幻灯片根据http://。阿帕奇。org/LICENSES/LICENSE-2.0 ' target=' _ blank ' Apache LICENSE/a ./p/div/div/body/html获得许可
希望本文所述对大家的jQuery程序设计有所帮助。