首页大屏广告效果 jquery轮播图淡入淡出
Posted 防空洞123
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了首页大屏广告效果 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 = $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轮播图淡入淡出的主要内容，如果未能解决你的问题，请参考以下文章