一、全屏banner

1、设置网页图片全屏banner

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        .pic {

            width: 100%;

            height: 600px;

            background: url("...") no-repeat center;

        }

    </style>

</head>

<body>

    <div class="banner">

        <div class="pic"></div>

    </div>

</body>

</html>

　　二、全屏轮播

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>全屏轮播模板</title>

    <style>

        html,body,head,span,button,div,title {

            margin: 0;

            padding: 0;

        }

        .cont {

            position: relative;

            height: 600px;

        }

        .list{

            position: relative;

        }

        .list div {

            width: 100%;

            height: 600px;

            position: absolute;

            opacity: 0;

            transition: 1s;  /*设置切换时间*/

        }

        .pic1 {

            background: url(img/lbt01.jpg) no-repeat center red;

        }

        .pic2 {

            background: url(img/lbt02.jpg) no-repeat center blue;

        }

        .pic3 {

            background: url(img/lbt03.jpg) no-repeat center yellow;

        }

        .pic4 {

            background: url(img/lbt04.jpg) no-repeat center green;

        }

        .pic5 {

            background: url(img/lbt05.jpg) no-repeat center pink;

        }

        .btns {

            position: absolute;

            z-index: 6;

            left: 50%;

            bottom: 80px;

            margin-left: -170px;

        }

        .btns span {

            float: left;

            width: 60px;

            height: 5px;

            margin-right: 10px;

            background-color: rgba(255,255,255,0.3);

            border-radius: 5px;

        }

        .buttons {

            width: 1180px;

            height: 600px;

            margin: 0 auto;

            position: relative;

        }

        .btn {  /*左右切换按钮样式*/

            position: absolute;

            top: 50%;

            margin-top: -26px;

            width: 32px;

            height: 52px;

            font-size: 30px;

            border-radius: 5px;

            z-index: 6;

            opacity: 0.5;

        }

        .btn-prev {

            left: 0;

        }

        .btn-next {

            right: 0;

        }

        .bgc {

            background-color: white !important;

        }

    </style>

</head>

<body>

    <div class="cont">

        <div class="list">

            <div class="pic1" data-index=0 style="opacity: 1; z-index: 2;"></div>

            <div class="pic2" data-index=1></div>

            <div class="pic3" data-index=2></div>

            <div class="pic4" data-index=3></div>

            <div class="pic5" data-index=4></div>

        </div>

        <div class="btns">

            <span class="bgc"></span>

            <span></span>

            <span></span>

            <span></span>

            <span></span>

        </div>

        <div class="buttons">

            <button class="btn btn-prev"> < </button>

            <button class="btn btn-next"> > </button>

        </div>

    </div>

    <script>

        var btn = document.getElementsByClassName("btn");

        var imgs = document.querySelectorAll(".list div");

        var btns = document.querySelectorAll(".btns span");

        var cont = document.getElementsByClassName("cont")[0];

        var indexes, timer = null;

        for(let i=0; i<btns.length; i++){

            btns[i].onmouseover = function(){  // 给所有下面的白色线条添加一个鼠标经过事件

                animate(i);

            }

        }

        btn[0].onclick = function(){  // 上一张按钮

            indexes = currentPage();

            if(indexes == 0) indexes=5;

                indexes--;

            animate(indexes);

        }

        btn[1].onclick = next;

        function next(){  // 下一张按钮

            indexes = currentPage();

            if(indexes == 4) indexes = -1;

                indexes++;

           animate(indexes);

        }

        function animate(i){  // 动画函数

            for(let j = 0; j<imgs.length; j++){

                imgs[j].style.opacity = 0;

                imgs[j].style.zIndex = 1;

                btns[j].classList.remove("bgc");

            }

            imgs[i].style.opacity = 1;

            imgs[i].style.zIndex = 2;

            btns[i].classList.add("bgc");

        }

        function currentPage() { // 返回当前页面

            for(var i = 0; i<imgs.length; i++){

                 if(imgs[i].style.zIndex == 2){

                    return imgs[i].dataset.index;

                 }

            }

        }

        timer = setInterval(next,3000); // 设置自动播放

        cont.onmousemove = function(){  // 鼠标移入时停止自动播放

            clearInterval(timer);

        }

        cont.onmouseout = function(){   // 鼠标移出时又开始播放

            timer = setInterval(next,3000);

        }

    </script>

</body>

</html>

　　

全屏banner及全屏轮播的更多相关文章

  1. Android--图片轮播（banner）

    使用步骤 Step 1.依赖banner Gradle dependencies{ compile 'com.youth.banner:banner:1.4.10' //最新版本 } 或者引用本地li ...

  2. android 使用图片轮播图---banner 使用

    转自:https://github.com/youth5201314/banner 使用步骤 Step 1.依赖banner Gradle dependencies{ compile 'com.you ...

  3. 029 Android 轮播图广告Banner开源框架使用

    1.Banner介绍 现在的绝大数app都有banner界面,实现循环播放多个广告图片和手动滑动循环等功能. 2.使用环境配置(具体可见github开源项目) (1)添加依赖 在build.gradl ...

  4. Android 开发最牛的图片轮播控件，基本什么都包含了。

    Android图片轮播控件  源码下载地址: Android 图片轮播 现在的绝大数app都有banner界面,实现循环播放多个广告图片和手动滑动循环等功能.因为ViewPager并不支持循环翻页, ...

  5. 图片轮播(淡入淡出)--JS原生和jQuery实现

    图片轮播(淡入淡出)--js原生和jquery实现 图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成j ...

  6. html渐隐轮播

    这是我之前用的时候从一个模板中下载下来用的,现在又用到了,我又重新找了一遍,为防止我下次用到忘记,特写下此文: 下载插件:jquery-2.1.4.min.js和slider.js 首页轮播页面首页i ...

  7. ViewPager实现无限轮播踩坑记

    最近笔者想通过ViewPager来实现一个广告Banner,并实现无限轮播的效果,但是在这个过程中踩了不少的坑,听我慢慢道来.如果大家有遇到和我一样的情况,可以参考我的解决方法,没有那就更好,如果针对 ...

  8. Android图片轮播控件

    Android广告图片轮播控件,支持无限循环和多种主题,可以灵活设置轮播样式.动画.轮播和切换时间.位置.图片加载框架等! 使用步骤 Step 1.依赖banner Gradle dependenci ...

  9. 第三百七十三节，Django+Xadmin打造上线标准的在线教育平台—创建用户app，在models.py文件生成3张表，用户表、验证码表、轮播图表

    第三百七十三节,Django+Xadmin打造上线标准的在线教育平台—创建用户app,在models.py文件生成3张表,用户表.验证码表.轮播图表 创建Django项目 项目 settings.py ...

随机推荐

  1. 如何成为一名高级C++程序员

     C++这门语言从诞生到今天已经经历了将近30个年头.不可否认,它的学习难度都比其它语言较高.而它的学习难度,主要来自于它的复杂性.现在C++的使用范围比以前已经少了很多,java.C#.python ...

  2. C++走向远洋——56（项目二1、动物这样叫、虚函数）

    */ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.cpp * 作者:常轩 * 微信公众号:Worldhe ...

  3. 机器学习基础——详解自然语言处理之tf-idf

    本文始发于个人公众号:TechFlow,原创不易,求个关注 今天的文章和大家聊聊文本分析当中的一个简单但又大名鼎鼎的算法--TF-idf.说起来这个算法是自然语言处理领域的重要算法,但是因为它太有名了 ...

  4. js判断PC端还是移动端的代码小坑

    我在写官网的时候做了pc和移动端两个,在通过网上查找了这样的代码,看着完全没问题,等放进去页面中后,PC端页面一直刷新,根本停不下来,找了类似js还是同样的问题.通过不断尝试后才发现,问题就是多了一行 ...

  5. 课题：html5图像羽化（不规则区域羽化，feather，html5羽化）

    下午搜索了一堆相关文章,没有找到符合要求的. 对一张图片应用不规则区域的羽化,该怎么做呢? 首先去查了下 羽化的原理,然而没有什么用, 然后就开始从表现层去研究怎么模拟? idea 1: blur滤镜 ...

  6. 微信h5页面audio标签在ios下不能自动播放

    背景介绍:在一个h5页面中,当用户提交表单到后台,后台返回的结果成功的话,开始自动播放背景音乐 出现的问题:在安卓手机上正常,iOS中没有反应 后来网上一番搜索后了解到时因为iOS不允许自动播放音乐, ...

  7. 干货--手把手撸vue移动UI框架： 滑动删除

    前言 前几天因为项目需要,用jquery写了一个swiperOut组件,然后我就随便把这个组件翻译成基于Vue的了,有兴趣的朋友可以看下.Github源码(不麻烦的话帮忙start,请各位大爷赏个星星 ...

  8. 简单谈谈HashMap

    概述 面试Java基础,HashMap可以说是一个绕不过去的基础容器,哪怕其他容器都不问,HashMap也是不能不问的. 除了HashMap,还有HashTable跟ConcurrentHashMap ...

  9. 用反射机制和pandas，实现excel数据的读取以及参数化${arg}的赋值

    反射类:class GetData: index = pd.read_excel(file_name, sheet_name).loc[0, ['index']].values[0] email = ...

  10. Fortify Audit Workbench 笔记 Header Manipulation

    Header Manipulation Abstract HTTP 响应头文件中包含未验证的数据会引发 cache-poisoning. cross-site scripting. cross-use ...