首页大屏广告效果 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:; overflow: hidden}
.index-kv{width: 100%; height: 550px; overflow: hidden;left:}
.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:; left:; 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:; 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 = ;
            var adTimer = null;
            //选项卡的鼠标悬浮、离开调用函数
            $imgrolls.mouseover(function() {
                index = $imgrolls.index(this);
                showImg(index);
            }).eq().mouseover();

            //滑入 停止动画，滑出开始动画.
            $('.index-kv').hover(function() {
                if (adTimer) {
                    clearInterval(adTimer);
                }
            }, function() {
                adTimer = setInterval(function() {
                    showImg(index);
                    index++;
                    if (index == len) {
                        index = ;
                    }
                }, );
            }).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>
本文地址：https://www.xunjs.com/jquery/view_10980.html
Tags：首页轮播图 jQuery 效果
相关推荐
