<!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. MapReduce 过程详解 (用WordCount作为例子)

    本文转自 http://www.cnblogs.com/npumenglei/ .... 先创建两个文本文件, 作为我们例子的输入: File 1 内容: My name is Tony My com ...

  2. Flume同时输出数据到HDFS和kafka

    cd /usr/local/flume/conf vim flume-exec-total.conf ## Explain #通过sink把数据分别输出到kafka和HDFS上 # Name the ...

  3. 使用docker创建aosp编译环境

    如果只需要编译一个版本的aosp,那么如果在主机上架建环境即可,可写的程序如果要在各个aosp版本中编译,那在主机上架建多个aosp编译环境可以会比较麻烦,github上找到一个openstf用doc ...

  4. mysql日期和JDBC查询出来的结果相差8小时

    数据库时间:2017-11-08 16:30:00 查询出来: 2017-11-09 00:30:00 问题:数据库时区,和JDBC连接时区设置问题. set global time_zone = ' ...

  5. # 20145106 《Java程序设计》第4周学习总结

    教材学习内容总结 翻开第六章的书,发现书中的例子居然是"假设我正在开发一款rpg游戏" public class Magician extends Role { public vo ...

  6. ubuntu16.04解决tensorflow提示未编译使用SSE3、SSE4.1、SSE4.2、AVX、AVX2、FMA的问题【转】

    本文转载自:https://blog.csdn.net/Nicholas_Wong/article/details/70215127 rticle/details/70215127 在我的机器上出现的 ...

  7. ccf 行车路线

    问题描述 小明和小芳出去乡村玩,小明负责开车,小芳来导航. 小芳将可能的道路分为大道和小道.大道比较好走,每走1公里小明会增加1的疲劳度.小道不好走,如果连续走小道,小明的疲劳值会快速增加,连续走s公 ...

  8. python 返回系统名称，系统平台，系统版本

    import platform import os print(os.name) print(platform.system()) print(platform.release())

  9. [原][译][osgearth]样式表style中参数总结（OE官方文档翻译）

    几何Geometry 高度Altitude 挤压Extrusion 图标Icon 模型Model 渲染Render 皮肤Skin 文本Text 覆盖Coverage 提示: 在SDK中,样式表的命名空 ...

  10. 一些自己常用的cdn

    1.vue <script src="http://cdn.bootcss.com/vue/1.0.28-csp/vue.js"></script> < ...