<!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. javascript数组总结

    数组是一个有序的集合,javascript数组中的元素的类型可以是任意的,同一个数组不同元素之间的类型也是可以不同的.数组也是对象,有个length属性,记录数组的长度. 创建数组有两种方法: 数组直 ...

  2. Struts2中struts.multipart.maxSize配置

    今天使用Struts2的文件上传控件时,在struts.xml中,将处理上传的action中的fileUpload拦截器的maximumSize参数设置为5000000,上传了一个3M的文件后发现控制 ...

  3. CSS3：{*zoom:1;}作用

    CSS3:{*zoom:1;}作用 zoom:1的常见作用: zoom是IE专用属性,firefox等是不支持的.它的本来作用是设置或检索对象的缩放比例,但这作用几乎用不到. 可以让网页实现IE7中的 ...

  4. Duilib嵌入CEF禁止浏览器响应拖拽事件

    转载:http://blog.csdn.net/liuyan20092009/article/details/53819473 转载:https://blog.csdn.net/u012778714( ...

  5. spring boot2 基于百度云apiface实现人脸检测与认证2

    接上一篇,上篇只实现了人脸的认证,接下来实现人脸的检测. 原理介绍: 把摄像头抓拍的图像上传到服务器,服务器把图像上传到百度云,百度云返回识别出的人脸的数量和位置,前端根据服务端的返回,在图像中画出人 ...

  6. 安装基础版的kinetic

    没有gui工具 sudo apt-get install ros-kinetic-ros-base

  7. Builder（建造者）

    意图: 将一个复杂对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示. 适用性: 当创建复杂对象的算法应该独立于该对象的组成部分以及它们的装配方式时. 当构造过程必须允许被构造的对象有不同 ...

  8. 【 Python】模块学习之Flask模板引擎:jinja2

    原文链接:https://www.cnblogs.com/dachenzi/p/8242713.html 模板的概念 要了解jinja2,那么需要先理解模板的概念.模板在Python的web开发中广泛 ...

  9. 原生js实现ajax的文件异步提交功能、图片预览功能.实例

    采用html5使得选择图片改变时,预览框中图片随之改变.input文件选择框美化.原生js完成文件异步提交 效果图: 代码如下,可直接复制并保存为html文件打开查看效果 <html> & ...

  10. 一定要用Windows自带的记事本编辑 applicationHost.config

    访问IIS时,发生了一个 HipIISEngineStub.dll不能读取的问题.(Windows Event可以确认). 很容易在网上找到了对策, http://chrisfleischhacker ...