基于jQuery带进度条全屏图片轮播代码
基于jQuery带进度条全屏图片轮播代码。这是一款基于jQuery实现的oppo手机官网首页带进度条全屏图片轮播特效。效果图如下:
实现的代码。
html代码:
<div class="pic"> <ul> <li style="background: url(images/bg1.jpg) center;"> <img src="images/con1.png"> <div class="nav"> </div> <div class="bar"> <p> </p> </div> </li> <li style="background: url(images/bg2.jpg) center;"> <img src="images/con2.png"> <div class="nav"> </div> <div class="bar"> <p> </p> </div> </li> <li style="background: url(images/bg3.jpg) center;"> <img src="images/con3.png"> <div class="nav"> </div> <div class="bar"> <p> </p> </div> </li> </ul> </div> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> var i = 0; jummper(); function jummper() { $(".pic ul li").eq(i).find("img").css("left", "-1180px"); $(".pic ul li").eq(i).find("p").css("width", "0px"); $(".pic ul li").eq(i).find("img").animate({ left: "0px" }, 500, function () { //当图片移动完成后再加载进度条 //alert("当图片移动完成后再做操作"); $(".pic ul li").eq(i).find("p").animate({ width: "1174px" }, 8000, function () { $(".pic ul li").eq(i).find("img").animate({ left: "1180px" }, 500, function () { i++; if (i > 2) i = 0; $(".pic ul li").eq(i).fadeIn(100).siblings().fadeOut(100); }); }); }); } setInterval("jummper()", 9100); </script>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。