jQuery带进度条全屏图片轮播特效代码分享

本文实例讲述了jQuery带进度条全屏图片轮播特效。分享给大家供大家参考。具体如下：jQuery实现的带进度条转接全屏图片轮播效果是一款基于jQuery实现的同僚手机官网首页带进度条全屏图片轮播特效代码，实现效果大气，简洁大方运行效果图： - 查看效果下载源码-

小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。(1)在头区域引入半铸钢钢性铸铁(铸造半钢)样式：

链接rel='样式表type=' text/CSS ' href=' CSS/style。CSS '(2)js代码：

脚本类型=' text/JAVAScript ' src=' http : js/jquery。js '/script脚本类型=' text/JavaScript ' var I=0；jummper()；函数jummper(){ $(' .pic ul Li ').方程式(I ).查找(' img ').css('left '，'-1180 px ')；$('.pic ul Li ').方程式(I ).查找(' p ').css('width '，' 0px ')；$('.pic ul Li ').方程式(I ).查找(' img ').动画({left:'0px'}，500，function(){ //当图片移动完成后再加载进度条//alert('当图片移动完成后再做操作');$('.pic ul Li ').方程式(I ).查找(' p ').动画({width:'1174px'}，8000，function(){ $(').pic ul Li ').方程式(I ).查找(' img ').animate({left:'1180px'}，500，function(){ I；如果(I2)I=0；$('.pic ul Li ').方程式(I ).法丁(100)。兄弟姐妹()。淡出(100)；});});});}setInterval('jummper()'，9100)；/script为大家分享的jQuery带进度条全屏图片轮播特效代码如下

！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 ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /titlejQuery带进度条全屏图片轮播代码/titlelink rel='样式表type=' text/CSS ' href=' CSS/style。CSS/headdydiv class=' pic ' ul Li style=' background : URL(images/bg1。' jpg)中心；img src=' http : images/con 1。png ' div class=' nav '/div div class=' bar ' p/p/div/Li Li style=' background : URL(images/bg2。jpg)中心；img src=' http : images/con 2。png ' div class=' nav '/div class=' bar ' p/p/div/Li Li style=' background : URL(images/bg3。jpg)中心；img src=' http : images/con 3。png ' div class=' nav '/div class=' bar ' p/p/div/Li/ul/div脚本类型=' text/JavaScript ' src=' http : js/jquery。js '/script脚本类型=' text/JavaScript ' var I=0；jummper()；函数jummper(){ $(' .pic ul Li ').方程式(I ).查找(' img ').css('left '，'-1180 px ')；$('.pic ul Li ').方程式(I ).查找(' p ').css('width '，' 0px ')；$('.pic ul Li ').方程式(I ).查找(' img ').动画({left:'0px'}，500，function(){ //当图片移动完成后再加载进度条//alert('当图片移动完成后再做操作');$('.pic ul Li ').方程式(I ).查找(' p ').动画({width:'1174px'}，8000，function(){ $(').pic ul Li ').方程式(I ).查找(' img ').animate({left:'1180px'}，500，function(){ I；如果(I2)I=0；$('.pic ul Li ').方程式(I ).法丁(100)。兄弟姐妹()。淡出(100)；});});});}setInterval('jummper()'，9100)；/script div style=' text-align : center；余量：50 px 0；font : normal 14px/24px ' MicroSoft YaHei '；p适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗/p/div/body/html以上就是为大家分享的jQuery带进度条全屏图片轮播特效代码，希望大家可以喜欢，并应用到实践中。