首页 > 代码库 > 首页大屏广告效果 jquery轮播图淡入淡出
首页大屏广告效果 jquery轮播图淡入淡出
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery个性化图片轮播效果</title> <script src="js/jquery.js" type="text/javascript"></script> <link rel="stylesheet" href="./css/common.css"> <style> .container{position: relative; zoom: 1; overflow: hidden}.index-kv{width: 100%; height: 550px; overflow: hidden;left: 0}.kv-img a{display: block; height: 550px}.kv-img{width: 100%; height: 100%; position: relative; overflow: hidden}.kv-img .index-kv-swipe{width: 100%; height: 100%; overflow: hidden; position: absolute; top: 0; left: 0; display: none}.kv-img .index-kv-swipe.active{display: block}.kv-img .index-kv-pic{width: 100%; height: 100%; background-repeat: no-repeat; background-position: center 0; background-size: cover}.kv-num{width: 161px; height: 24px; *height: 22px; text-align: center; position: absolute; top: 308px; left: 50%; margin-left: -80px; overflow: hidden; padding-top: 8px; *padding-top: 10px; background: no-repeat; background-position: -391px -364px}.kv-num li{display: inline-block; *display: inline; *zoom: 1; width: 12px; height: 12px; margin: 0 3px; cursor: pointer; background: #434343; border-radius: 6px; transition: width .3s ease-out}.kv-num li.active{width: 29px; background: #1791F0} </style> <script> /* 首页大屏广告效果 */ $(function() {// return; var $imgrolls = $(".index-kv .kv-num li"); //选项卡区域 //$imgrolls.css("opacity", "0.5"); //设置选项卡透明度 var len = $imgrolls.length; var index = 0; var adTimer = null; //选项卡的鼠标悬浮、离开调用函数 $imgrolls.mouseover(function() { index = $imgrolls.index(this); showImg(index); }).eq(0).mouseover(); //滑入 停止动画，滑出开始动画. $(‘.index-kv‘).hover(function() { if (adTimer) { clearInterval(adTimer); } }, function() { adTimer = setInterval(function() { showImg(index); index++; if (index == len) { index = 0; } }, 5000); }).trigger("mouseleave"); }) //显示不同的幻灯片 function showImg(index) { var $rollobj = $(".index-kv"); var $rolllist = $rollobj.find(".kv-num li");// var newhref = http://www.mamicode.com/$rolllist.eq(index).attr("href");// $("#jnImageroll .imgWrap").attr("href", newhref)// .find("img").eq(index).stop(true, true).fadeIn().siblings().fadeOut(); $(".kv-img").find(".index-kv-swipe").eq(index).fadeIn().siblings().fadeOut();// $rolllist.removeClass("active").css("opacity", "0.5").eq(index).addClass("active").css("opacity", "1"); $rolllist.removeClass("active").eq(index).addClass("active"); } </script></head><body><div class="container"> <div class="index-kv" id="indexKv"> <div class="kv-img" id="kvBigImg"> <div class="index-kv-swipe active"> <div class="index-kv-pic" style="background-image:url(images/01092500NWHfu.jpg);"> <a href="#" target="_blank" title="愚人节搞事情"></a> </div> </div> <div class="index-kv-swipe"> <div class="index-kv-pic" style="background-image:url(images/29105758hr19g.jpg);"> <a href="#" target="_blank" title="大天使之剑"></a> </div> </div> <div class="index-kv-swipe"> <div class="index-kv-pic" style="background-image:url(images/23094802ZOT3C.jpg);"> <a href="#" target="_blank" title="少年群侠传"></a> </div> </div> <div class="index-kv-swipe"> <div class="index-kv-pic" style="background-image:url(images/21145750piihv.jpg);"> <a href="#" target="_blank" title="永恒纪元"></a> </div> </div> <div class="index-kv-swipe"> <div class="index-kv-pic" style="background-image:url(images/01183921BxFOV.jpg);"> <a href="#" target="_blank" title="37直播"></a> </div> </div> <div class="index-kv-swipe"> <div class="index-kv-pic" style="background-image:url(images/31100911C1Ueg.jpg);"> <a href="#" target="_blank" title=" 乾坤战纪"></a> </div> </div> </div> <ul class="kv-num" id="kvNum"> <li class="active"></li> <li class=""></li> <li class=""></li> <li class=""></li> <li class=""></li> <li class=""></li> </ul> </div></div></body></html>
首页大屏广告效果 jquery轮播图淡入淡出
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。