<!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轮播图淡入淡出的更多相关文章

  1. 封装bt轮播图淡入淡出效果样式

    <!--BT轮播图-->    <div data-ride="carousel" class="carousel slide carousel_inn ...

  2. Jquery 轮播图简易框架

    =====================基本结构===================== <div class="carousel" style="width: ...

  3. 背景大图隔几秒切换（非轮播，淡入淡出）--变形金刚joy007 项目总结

    工作日想了好久,周日回家才想出来的... 图片切换(非轮播,淡入淡出) 1.切换2.停止 <html> <head> <meta content="text/h ...

  4. jQuery轮播图（手动点击轮播）

    下面来看看最终做的手动点击轮播效果: 一.原理说明 (1)首先是轮播图的架构,我采用了一个最外边的大div包住两个小div,一个小div里面放四张图片,另一个小div里面放四个数字按钮 (2)对最外边 ...

  5. jQuery轮播图（一）轮播实现并封装

    利用面向对象自己动手写了一个封装好的jquery轮播组件,可满足一般需求,不仅使用简单且复用性高. demo:点此预览 代码地址:https://github.com/zsqosos/componen ...

  6. jquery 轮播图实例

    实现效果:1.图片每2秒钟切换1次. 2.当鼠标停留在整个页面上时,图片不进行轮播. 3.当点击右下角的小球时,出现该选项的对应图片,而且切换页选项的背景颜色发生相应的变化. 4.当图片发生轮播切换时 ...

  7. web常见效果之轮播图

    轮播图的展示效果是显而易见: HTML代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...

  8. jQuery轮播图--不使用插件

    说明:引入jquery.min.js    将轮播图放入imgs文件夹 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...

  9. jQuery轮播图（二）利用构造函数和原型创建对象以实现继承

    本文是在我开始学习JavaScript继承时,对原型继承的一些理解和运用.文中所述的继承方式均是使用js特有的原型链方式,实际上有了ES6的类之后,实现继承的就变得十分简单了,所以这种写法现在也不在推 ...

随机推荐

  1. 线程、进程、daemon、GIL锁、线程锁、递归锁、信号量、计时器、事件、队列、多进程

    # 本文代码基于Python3 什么是进程? 程序并不能单独运行,只有将程序装载到内存中,系统为它分配资源才能运行,而这种执行的程序就称之为进程.程序和进程的区别就在于:程序是指令的集合,它是进程运行 ...

  2. 怎样在linux下对U盘进行格式化和分区

    说明,为了不做无用功,首先必须卸载要分区的设备,分区才能执行成功.通过命令umount /media/?? 或者umount /mnt/??? 看你的实际情况,这一步必不可少.1.首先通过命令fdis ...

  3. 项目：Android平台txt阅读软件

    项目:Android平台txt阅读软件 项目组成员:20145107李长达.20145110屠轶成.20145120黄玄曦.20145122程智崟 Need: 从古至今,阅读都是人类生活中的一大部分, ...

  4. bzoj 4443: [Scoi2015]小凸玩矩阵

    Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 149  Solved: 81[Submit][Status][Discuss] Description ...

  5. 利用ES6中的Array.find/ Array.findIndex来判断数组中已存在某个对象

    前端开发过程中,我们会经常遇到这样的情景:比如选中某个指标obj,将其加入到数组checkedArr中({id: 1234, name: 'zzz', ...}),但是在将其选中之前要校验该指标是否已 ...

  6. R语言笔记-set.seed()函数

    今天查了一下R语言中set.seed(),该命令的作用是设定生成随机数的种子,种子是为了让结果具有重复性.如果不设定种子,生成的随机数无法重现. set.seed()用于设定随机数种子,一个特定的种子 ...

  7. BZOJ 3122 【SDOI2013】 随机数生成器

    题目链接:随机数生成器 经典数学题…… 为了方便接下来的处理,我们可以先把\(X_1=t\)的情况特判掉. 当\(a=0\)的时候显然只需再判一下\(b\)是否等于\(t\)即可. 当\(a=1\)的 ...

  8. Qt570_CentOS64x64_01

    ZC: 其实 主要是要安装 OpenGL,具体看"3"... ... 1.运行 "/opt/Qt5.7.0/Tools/QtCreator/bin/qtcreator&q ...

  9. Intel Omin-Path Architecture 搭建调优与测试

    OPA在Centos上的搭建 1. 首先确认Omni-Path Host Fabric Interfaces (HFIs) # yum install –y pciutils # lspci -vv ...

  10. subllime的插件使用

    1.emmet快速使用的方法. html:xt 然后按下tab快速的生成一个html文档. 生成10个div----- div*10 div->ul->li->a->img 写 ...