<!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. 20155203 2016-2017-4 《Java程序设计》第8周学习总结

    20155203 2016-2017-4 <Java程序设计>第8周学习总结 教材学习内容总结 1.channel的继承架构 2.position()类似于堆栈操作中的栈顶指针. 3.Pa ...

  2. A*寻路算法详细解读

    文章目录 A*算法描述 简化搜索区域 概述算法步骤 进一步解释 具体寻路过程 模拟需要更新F值的情况 Lua代码实现 在学习A*算法之前,很好奇的是A*为什么叫做A*.在知乎上找到一个回答,大致意思是 ...

  3. SDN原理 OpenFlow协议 -4

    通道 Channel 在前面的OpenFlow的内容中,我们提到了在交换层所采用的流表是控制层的Controller下发的,那么Controller是如何下发流表的呢?中间经过了哪些的流程和步骤?控制 ...

  4. 前端工程化 - bower

    什么是bower bower是前端的包管理工具,类似于php的composer,python的pip,虽然先如今bower已经停止了更新(主要是因为Browserify和Webpack等包管理工具的兴 ...

  5. hdu 4745 Two Rabbits 区间DP

    http://acm.hdu.edu.cn/showproblem.php?pid=4745 题意: 有两只兔子Tom Jerry, 他们在一个用石头围城的环形的路上跳, Tom只能顺时针跳,Jerr ...

  6. install diagnostic_updater

    sudo apt-get install ros-kinetic-diagnostic-updater

  7. HashMap put方法

    HashMap的put方法执行过程可以通过下图来理解,自己有兴趣可以去对比源码更清楚地研究学习. ①.判断键值对数组table[i]是否为空或为null,否则执行resize()进行扩容: ②.根据键 ...

  8. 【Docker】Segmentation Fault or Critical Error encountered. Dumping core and abort

    背景 CentOS7 安装Docker后,load镜像时出现以下错误: Segmentation Fault or Critical Error encountered. Dumping core a ...

  9. Tornado的cookie过期问题

    首先,web应用程序是使用HTTP协议进行数据传输,因为HTTP协议是无状态的,所以一旦提交数据完成后,客户端和服务器端的连接就会被关闭,再次进行数据的交换就得重新建立新的连接,那么,有个问题就是服务 ...

  10. TryUpdateModel方法 模型绑定

    文档资料:https://msdn.microsoft.com/zh-cn/library/ee728634.aspx 有很多重载其中 Controller.TryUpdateModel<TMo ...