jQuery模拟360浏览器切屏效果幻灯片（附演示源码下载)

本文实例讲述了jQuery模拟360浏览器切屏效果幻灯片，分享给大家供大家参考，具体如下：

运行效果截图如下：

点击此处查看在线演示效果。

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head title 360效果幻灯片/title脚本src=' http : jquery-1。7 .2 .量滴js ' type=' text/JavaScript '/script script type=' text/JavaScript '函数changeddedsktopbg(index){ $(' # desktopList ').animate({ ' margin-left ' :-(index * 1000)' px '，' speed ' : 2000 })；}/脚本样式类型=' text/CSS '正文{ margin :0padd : 0；} #桌面ul { padding:0边框-底部-样式：无；宽度width:5000pxlist样式：无；} #桌面Li { padd :0 float : left }。desktop _ Li _ img { width :1000 px；高度：600 px} #桌面{宽度：1000像素飞越：隐藏；高度：600 px} #控制器ul { width :250 pxlist-style : none；} #控制器Li { width :40 pxfloat : left划水：0;文本对齐：居中；边距-左侧：5 px} .controller _ Li _ block {后台： # f2f2f 2；高度：10px线高：10 pxborder:2px纯灰色；光标：指针指针；}/style/head dycenter div id=' desktop ' ul id=' desktopList ' liimg src=' http : img/1。jpg ' class=' desktop _ Li _ img ' alt='屏1 '/Li Li img src=' http : img/2。jpg ' class=' desktop _ Li _ img ' alt='屏1 '/Li Li img src=' http : img/3。jpg ' class=' desktop _ Li _ img ' alt='屏1 '/Li Li img src=' http : img/4。jpg ' class=' desktop _ Li _ img ' alt='屏1 '/Li Li img src=' http : img/5。jpg ' class=' desktop _ Li _ img ' alt='屏1 '/Li/ul/div div id=' controller ' ul lidiv class=' controller _ Li _ block ' onclick=' changeddesktopbg(0)' 1/div/Li lidiv class=' controller _ Li _ block ' onclick=' changeddesktopbg(1)' 2/div/Li lidiv class=' controller _ Li _ block ' 2/Li lidiv class=' changeddesktopbg(3)' 4/div/block完整实例代码点击此处本站下载。

更多关于jQuery特效相关内容感兴趣的读者可查看本站专题： 《jQuery动画与特效用法总结》 及《jQuery常见经典特效汇总》

希望本文所述对大家jQuery程序设计有所帮助。