JQuery轮播图.zip

共8个文件

png：3个

js：2个

css：1个

JQuery轮播图

js进度条轮播图

jQuery进度条

JQuery

需积分: 10 4 下载量 120 浏览量 2019-10-10 18:09:32 上传评论收藏 341KB ZIP 举报

温馨提示

/*定义位置：由于图片个数与下侧顺序按钮数量一致，可通过位置进行关联*/ var index=0; var time=setInterval(move,3000); function move() { index++; if (index==3){ index=0 } $(".img li").eq(index).stop().fadeIn(500).siblings().stop().fadeOut(500); $(".cjv").css("width","0px"); var id =$(".num li").eq(index).children(":first").attr("id"); chjd(id); } function chjd(id) { var elem = document.getElementById(""+id); var width = 10; var id = setInterval(frame, 30); function frame() { if (width >= 100) { clearInterval(id); } else { width++; elem.style.width = width + '%'; } } } $(function(){ var id =$(".num li").eq(0).children(":first").attr("id"); chjd(id); });

资源推荐

资源详情

资源评论

收起资源包目录

JQuery轮播图.zip （8个子文件）

lbt

jquery-1.11.3. min.js 94KB

home_banner.png 30KB

index.html 1019B

lb.css 1KB

banner_api.png 137KB

banner_privacy.png 131KB

lb.js 898B

photo.jpg 19KB

共 8 条

<!DOCTYPE html> <html lang="en" xmlns:th="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="lb.css"> </head> <body> <div class="outer"> <ul class="img" style="margin-bottom:0rem"> <li> <div class="banner" style="background: url('home_banner.png');padding-top: 500px"> </div> </li> <li> <div class="banner" style="background: url('banner_privacy.png');padding-top: 500px"> </div> </li> <li> <div class="banner" style="background: url('banner_api.png');padding-top: 500px"> </div> </li> </ul> <ul class="num"> <li ><div class="cjv" id="myBar"></div></li> <li><div class="cjv" id="myBar1"></div></li> <li><div class="cjv" id="myBar2"></div></li> </ul> </div> <script src="jquery-1.11.3. min.js"></script> <script src="lb.js"></script> </body> </html>

评论收藏

内容反馈

资源评论