<!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. Tomcat java.lang.OutOfMemoryError: PermGen space error

    Often time, Tomcat may hits the following java.lang.OutOfMemoryError: PermGen space error. java.lang ...

  2. mysql 触发器 trigger用法 one （简单的）

    实例~~ example1: 创建表tab1 1 2 3 4 DROP TABLE IF EXISTS tab1; CREATE TABLE tab1(     tab1_id varchar(11) ...

  3. Linux 中各个文件夹的作用

    /  根目录 包含了几乎所的文件目录.相当于中央系统.进入的最简单方法是:cd /. /boot  引导程序,内核等存放的目录 这个目录,包括了在引导过程中所必需的文件.在最开始的启动阶段,通过引导程 ...

  4. linux内核分析第二周-完成一个简单的时间片轮转多道程序内核代码

    中断时计算机运行的一个非常重要的功能.之所以重要,是因为由于种种原因,计算机不能将一个程序从头执行到尾不间断,而是可能会出现很多像等待输入设备输出设备的过程,如果没有中断系统,CPU只能等待,造成资源 ...

  5. 20145315 《Java程序设计》实验四实验报告

    20145315 <Java程序设计>实验四实验报告 第一步 安装Android Studio 按教程安装即可,安装过程中需要配置JAVA＿HOME环境变量为jdk安装目录. 第二步 在I ...

  6. String StringBuilder StringBuffer 对比 总结得非常好

    转自:http://www.iteye.com/topic/522167 作者:每次上网冲杯Java时,都能看到关于String无休无止的争论.还是觉得有必要让这个讨厌又很可爱的String美眉,赤裸 ...

  7. 【bzoj2721】[Violet 5]樱花

    题目传送门:https://www.lydsy.com/JudgeOnline/problem.php?id=2721 好久没做数学题了,感觉有些思想僵化,走火入魔了. 这道题就是求方程$ \frac ...

  8. HDU 3605 Escape（状态压缩+最大流）

    http://acm.hdu.edu.cn/showproblem.php?pid=3605 题意: 有n个人和m个星球,每个人可以去某些星球和不可以去某些星球,并且每个星球有最大居住人数,判断是否所 ...

  9. bzoj 2226 LCMSum 欧拉函数

    2226: [Spoj 5971] LCMSum Time Limit: 20 Sec  Memory Limit: 259 MBSubmit: 1123  Solved: 492[Submit][S ...

  10. 从零开始，使用Docker Swarm部署集群教程

    本文首先从Dockerfile创建了一个简单web镜像 然后将web镜像推送到了远程仓库,以备后面集群中不同机器自动下载 之后使用docker-compose.yml配置了一个应用 而后新建了2台虚拟 ...