jquery实现的5屏幕全屏广告动态元素切换效果广告源码.zip资源-CSDN文库

共31个文件

png：23个

css：2个

js：2个

版权申诉

jquery

133 浏览量 2022-11-07 00:18:56 上传评论收藏 532KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

jquery实现的5屏幕全屏广告动态元素切换效果广告源码.zip （31个子文件）

132674344175118979

css

main_new.css 7KB

bootstrap.min.css 97KB

images

dot.png 1011B

intro_selected.png 2KB

intro.png 3KB

feedback_selected.png 2KB

feedback_splash.png 15KB

related_selected.png 2KB

qrcode_fresh.png 15KB

related.png 2KB

fresh_icon.png 10KB

gift_selected.png 2KB

related_demo.png 47KB

feedback.png 3KB

bg_main.jpg 99KB

title.png 27KB

home_desc.png 17KB

qrcode.png 19KB

arrow_gift.png 2KB

home.png 2KB

intro_splash.png 99KB

download-icon.png 1KB

arrow_feedback.png 2KB

bg_related.jpg 21KB

home_selected.png 2KB

gift.png 2KB

gift_splash.png 99KB

index.html 9KB

jquery-1.10.2.min.js 91KB

bootstrap.min.js 27KB

服务器软件.url 122B

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jquery5屏幕全屏广告动态元素切换广告代码</title> <meta http-equiv="X-UA-Compatible" content="IE=EDGE"> <link href="css/bootstrap.min.css" rel="stylesheet"> <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> <link href="css/main_new.css?version=1" rel="stylesheet"> <script> //var loginFlag = false; //var loginHelper = null; $(document).ready(function(){ $('.carousel').carousel( { "pause":"false", "interval":20000 } ); $('.carousel').on('slide.bs.carousel', function (event) { var tag = $(event.relatedTarget).attr("tag"); var progress = $(event.relatedTarget).attr("progress"); $('#img_home').attr("src", "images/home.png"); $('#img_intro').attr("src", "images/intro.png"); $('#img_gift').attr("src", "images/gift.png"); $('#img_feedback').attr("src", "images/feedback.png"); $('#img_related').attr("src", "images/related.png"); $('#img_' + tag).attr("src", "images/" + tag + "_selected.png"); //$("#progress").width(progress + "px"); //$("#progress").css('left', (progress / 2) - 400 + "px"); $("#progress").animate({width: progress, left: (progress / 2) - 400}, 500); playAnimation(tag); }); $("body,html").animate({ scrollTop:($("#page_home .splash-container").offset().top) },10); playAnimation("home"); }); function switchPage(pageIndex){ $('.carousel').carousel(pageIndex); } function playAnimation(tag){ var ani1 = $("#page_" + tag + " .ani_step_1"); var ani2 = $("#page_" + tag + " .ani_step_2"); var ani3 = $("#page_" + tag + " .ani_step_3"); var pre_start = ((tag == "home") ? 0 : 300); if(ani1 != null){ ani1.css("opacity", 0); setTimeout(function(){ ani1.animate({opacity: 1}, 1000); }, 10 + pre_start); } if(ani2 != null){ ani2.css("opacity", 0); setTimeout(function(){ ani2.animate({opacity: 1}, 1000); }, 1500 + pre_start); } if(ani3 != null){ ani3.css("opacity", 0); setTimeout(function(){ $("#page_" + tag + " .ani_step_3").animate({opacity: 1}, 1000); }, 3000 + pre_start); } } </script> </head> <body> <div id="ad"></div> <div id="carousel_container" class="carousel slide full_height"> <div class="carousel-inner full_height"> <div id="page_home" class="page item active" tag="home" progress="150"> <div id="main"> <div id="splash"> <div class="container splash-container"> <img src="images/title.png" alt="百度微任务" class="ani_step_2"/> <div id="splash_introduction" class="ani_step_2"> <img src="images/home_desc.png" alt="百度微任务介绍"/> </div> <div id="download_btn_group" class="container ani_step_1"> <div id="download_place_holder" class="horizental-item" ></div> <div class="horizental-item"> <a href="http://www.jb51.net/" target="_blank" id="splash_download_button" class="download-button"> <div class="download-title"> <div id="download_icon"></div><span>  立即体验</span> </div> <div class="download-subtitle"> 百度微任务V2.2.1 Android下载 12月31日更新 </div> </a> </div> <div class="horizental-item"> <div id="splash_download_qrcode"> <img class="qrcode" src="./images/qrcode.png" alt="二维码下载"> <div id="qrcode_hint">建议使用<a href="http://www.jb51.net/">百度手机浏览器</a>扫描</div> </div> </div> </div> <div id="ct_link" class="ani_step_3"> <p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p> <p>来源：<a href="http://www.jb51.net/" target="_blank">站长素材</a></p> </div> </div> </div> </div> </div> <div id="page_intro" class="page item" tag="intro" progress="300"> <div id="main"> <div id="splash" class="ani_step_1"> <div class="container splash-container"> <img src="images/intro_splash.png" alt="微任务介绍"/> </div> </div> </div> </div> <div id="page_gift" class="page item" tag="gift" progress="450"> <div id="main"> <div id="splash"> <div class="container splash-container ani_step_2"> <img src="images/gift_splash.png" alt="精美礼品"/> </div> <div id="splash_introduction" class="ani_step_2"> <h2>赚礼券，换大礼！</h2> <p>快来登录众测平台，赚礼券兑换丰厚实物大礼！<br> iPad、小米、百度U盘，海量礼品等您拿！</p> </div> <a href="http://www.jb51.net/" target="_blank" id="splash_download_button" class="download-button ani_step_1"> <div class="download-title"> 马上赚钱    <img src="images/arrow_gift.png" alt="访问"> </div> </a> </div> </div> </div> <div id="page_feedback" class="page item" tag="feedback" progress="600"> <div id="main"> <div id="splash"> <div class="container splash-container ani_step_2"> <img src="images/feedback_splash.png" alt="意见反馈"/> </div> <div id="splash_introduction" class="ani_step_2"> <h2>人人都是产品经理！</h2> <p>报BUG、提优化，请把您天马行空的创意反馈给我们；<br> 如新功能建议被采纳，还有惊喜奉上哦！</p> </div> <a href="mailto:microtask@baidu.com" id="splash_download_button" class="download-button ani_step_1"> <div class="download-title"> 邮件反馈    <img src="images/arrow_feedback.png" alt="反馈"> </div> </a> </div> </div> </div> <div id="page_related" class="page item" tag="related" progress="750"> <div id="main"> <div id="splash" class="ani_step_1"> <div class="container splash-container"> <div class="horizental-item"> <img id="related_demo" src="images/related_demo.png" alt="演示项目"/> </div> <div class="horizental-item"> <div id="splash_introduction"> <div class="container"> <div class="horizental-item"> <img src="images/fresh_icon.png" alt="尝鲜"/> </div> <div class="horizental-item"> <h3>优先体验未发布功能，<br>成为百度产品设计师！</h3> </div> </div> <p>我们将对您的以下行为以礼券结算：<br> 通过百度尝鲜下载百度产品；<br> 通过百度尝鲜优先体验百度产品尝鲜版；<br> 对线上版和尝鲜版产品提供意见和反馈； </p> <div id="download_btn_group" class="container"> <div class="horizental-item"> <a href="http://www.jb51.net/" target="_blank" id="splash_download_button" class="download-button"> <div class="download-title"> <div id="download_icon"></div><span>  立即体验</span> </div> <div class="download-subtitle"> 百度尝鲜V3.1.1 下载 11月20日更新 </div> </a> </div> <div class="horizental-item"> <div id="splash_download_qrcode"> <img class="qrcode" src="./images/qrcode_fresh.png" alt="二维码下载"> <div id="qrcode_hint">建议使用<a href="http://www.jb51.net/">百度手机浏览器</a>扫描</div> </div> </div> </div> <p>更多精彩内容请访问 <a target="_blank" href="http://www.jb51.net/">www.jb51.net</a> ></p>

评论收藏

内容反馈

版权申诉