内容描述：随着PC设备硬件性能的进步和分辨率的不断提高，现在主流网站逐渐开始采用1920banner图，为适应这一趋势，博主设计了1920banner图的滚动效果，代码利用了原生JS实现了1920banner图的切换效果，并针对低分辨率电脑设备进行了适配，实现了JS代码与HTML代码的完全分离，符合w3c的标准使用规范，希望能给各位开发者朋友以帮助和参考。如发现有缺陷和不足，欢迎大家予以指正，如有更好的意见或解决方法，可在评论区交流互动。一下为代码内容：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            *{

                padding: 0px;

                margin: 0px;

            }

            #banner{

                width: 100%;

                overflow: hidden;

                white-space: nowrap;

                position: relative;

            }

            #banner #inside{

                width: 9600px;

                position: relative;

                left: 50%;

                margin-left: -960px;

                transition: all 1s ease;

            }

            #banner img{

                width: 1920px;

                height: 500px;

            }

            #bannerNum{

                padding: 0px;

                list-style: none;

                overflow: hidden;

                width: 160px;

                position: absolute;

                bottom: 30px;

                right: 50px;

            }

            #bannerNum li{

                width: 30px;

                height: 30px;

                background-color: white;

                text-align: center;

                line-height: 30px;

                margin: 0px 5px;

                float: left;

                cursor: pointer;

            }

        </style>

    <script>

        var num = 1;

        var inside;

        window.onload = function(){

            inside = document.getElementById("inside");

            var interval = setInterval(function(){

                inside.style.transition = "all 1s ease";

                num++;

                switch (num){

                    case 1:

                        inside.style.transition = "none";

                        inside.style.marginLeft = (-960)+"px";

                        break;

                    case 2:

                        inside.style.marginLeft = (-960-1920)+"px";

                        break;

                    case 3:

                        inside.style.marginLeft = (-960-1920*2)+"px";

                        break;

                    case 4:

                        inside.style.marginLeft = (-960-1920*3)+"px";

                        break;

                    case 5:

                        inside.style.marginLeft = (-960-1920*4)+"px";

                        num = 0;

                        break;

                    default:

                        break;

                }

            },2000);

        }

        function changeBanner(num1){

            inside.style.transition = "none";

            switch (num1){

                case 1:

                    inside.style.marginLeft = (-960)+"px";

                    break;

                case 2:

                    inside.style.marginLeft = (-960-1920)+"px";

                    break;

                case 3:

                    inside.style.marginLeft = (-960-1920*2)+"px";

                    break;

                case 4:

                    inside.style.marginLeft = (-960-1920*3)+"px";

                    break;

                default:

                    break;

            }

            num = num1-1;

        }

    </script>

    </head>

    <body>

        <div id="banner">

            <div id="inside">

                <img src="img/20160919090419962.jpg" id="img1" /

                ><img src="img/20170120045915164.png" id="img2" /

                ><img src="img/20170125042305221.jpg" id="img3" /

                ><img src="img/f2_img4.jpg" id="img4" /

                ><img src="img/20160919090419962.jpg" id="img5" />

            </div>

            <ul id="bannerNum">

                <li onclick="changeBanner(1)">1</li>

                <li onclick="changeBanner(2)">2</li>

                <li onclick="changeBanner(3)">3</li>

                <li onclick="changeBanner(4)">4</li>

            </ul>

        </div>

    </body>

</html>

利用原生JS实现网页1920banner图滚动效果的更多相关文章

  1. 原生JS实现轮播图的效果

    原生JS实现轮播图的效果: 只要缕清了全局变量index的作用,这个轮播图也就比较容易实现了:另外,为了实现轮这个效果,有几处clearInterval()必须写上.废话不多说,直接上代码,修复了几个 ...

  2. 原生js实现文字无缝向上滚动效果

    在网上查找到了一个实现文字无缝向上滚动效果的源码,结果发现运行有问题,于是就稍加改动,实现了js无缝向上滚动的效果. <script> window.onload = roll(50); ...

  3. 原生js实现轮播图

    原生js实现轮播图 很多网站上都有轮播图,但找到一个系统讲解的却很难,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计 ...

  4. 原生js手动轮播图

    手动轮播图,为轮播图中的一种,轮播图主要有无缝轮播,手动轮播,延迟轮播,切换轮播等等... 轮播图主要用于展现图片,新出商品,词条,又能美观网页.給网页中增加动态效果. 手动轮播,是小编认为最简单的一 ...

  5. 封装一个简单的原生js焦点轮播图插件

    轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...

  6. 使用原生js将轮播图组件化

    代码地址如下:http://www.demodashi.com/demo/11316.html   这是一个轮播图组件,这里是代码地址,需要传入容器的id和图片地址,支持Internet Explor ...

  7. 用原生js封装轮播图

    原生js封装轮播图 对于初学js的同学来说,轮播图还是一个难点,尤其是原生js封装轮播图代码,下面是我之前做的一个轮播图项目中封装好的一些代码,有需要的同学可以看一下,有什么不懂的可以看注释,注释看不 ...

  8. 原生js焦点轮播图

    原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...

  9. jq商品展示图放大镜 and 原生js和html5写的放大镜效果 ~~效果不错

    <!DOCTYPE HTML><html lang="en-US"><head> <meta charset="UTF-8&qu ...

随机推荐

  1. Ado.net和EF的区别

    ado.net EF作为微软的一个ORM框架,通过实体.关系型数据库表之间的映射,使开发人员可以通过操作表实体而间接的操作数据库,大大的提高了开发效率.这样一来,.net平台下,我们与底层数据库的交互 ...

  2. Spark练习代码

    1.scalaWordCount package com._51doit.spark.day1 import org.apache.spark.rdd.RDDimport org.apache.spa ...

  3. 【Java】HashMap源码分析——常用方法详解

    上一篇介绍了HashMap的基本概念,这一篇着重介绍HasHMap中的一些常用方法:put()get()**resize()** 首先介绍resize()这个方法,在我看来这是HashMap中一个非常 ...

  4. c语言学习笔记-break

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 一.break使用中的注意事项 1.break如果用于循环,用来终止循环. 2.break如果用于switch,则用于终止swi ...

  5. SAP MM PIR里的Lower Limit & Upper Limit

    SAP MM PIR里的Lower Limit & Upper Limit 在PIR的价格的detail数据里,有2个字段:Lower Limit和Upper Limit.在今天之前,笔者从未 ...

  6. 如何判断一个 APP页面是否是H5页面

    1.无网络断开网络,显示404或则错误页面的是H5 2.页面布局a.在手机设置.开发者选项中开启显示布局边界功能:b.进入应用查看布局边界:c.原生应用可以看到各个控件的布局边界,H5只有整个页面的一 ...

  7. 程序员Web面试之jQuery

    又到了一年一度的毕业季了,青春散场,却等待下一场开幕. 在求职大军中,IT行业的程序员.码农是工科类大学生的热门选择之一, 尤其是近几年Web的如火如荼,更是吸引了成千上万的程序员投身其中追求自己的梦 ...

  8. Python 关于Python函数参数传递方式的一点探索

    关于Python函数参数传递方式的一点探索 by:授客 QQ:1033553122 实践代码 #!/usr/bin/env python # -*- coding:utf-8 -*- __author ...

  9. .Net Core(三)MVC Core

    MVC Core的改动感觉挺大的,需要的功能大多从Nuget安装,还内置了IOC,支持SelfHost方式运行等等. 一.项目结构的变化创建的新MVC项目的结构发生了变化,比如:静态文件需要统一放置到 ...

  10. 网页html随机切换背景图片

    首先要准备一些图像,图像的大小(无论是尺寸大小还是数据大小)要控制好,如果太大,会使用户等不及查看全图就跳出了,如果太小,又会影响页面质量. 在script中将这些图像编为一个数组,便于调用.数组的长 ...