大图轮播完整流程代码操作：

<style>
            * {
                margin: 0px;
                padding: 0px;
            }
            
            .stage {
                width: 500px;
                height: 300px;
                border: 5px solid black;
                margin: 200px;
                position: relative;
                overflow: hidden;
            }
            
            .to-left,
            .to-right {
                position: absolute;
                top: 0px;
                width: 50px;
                height: 300px;
                background-color: black;
                color: white;
                font-size: 30px;
                text-align: center;
                line-height: 300px;
                opacity: 0.3;
            }
            
            .to-left {
                left: 0px;
            }
            
            .to-right {
                right: 0px;
            }
            
            .to-left:hover,
            .to-right:hover {
                cursor: pointer;
                opacity: 0.5;
            }
            
            .banner {
                width: 3000px;
                height: 300px;
            }
            
            .items {
                float: left;
                width: 500px;
                height: 300px;
                background-color: blanchedalmond;
                font-size: 100px;
                text-align: center;
                line-height: 300px;
            }
        </style>
    </head>
<!--大图轮播特效-->
    <body>
        <div class="stage">
            <div class="to-left">
                <</div>
                    <div class="to-right">></div>
                    <div class="banner">
                        <div class="items">1</div>
                        <div class="items" style="">2</div>
                        <div class="items" style="">3</div>
                        <div class="items" style="">4</div>
                        <div class="items" style="">5</div>
                        <div class="items">1</div>
                    </div>
            </div>
    </body>

</html>
<script>
    var to_right = document.getElementsByClassName('to-right')[0];
    var to_left = document.getElementsByClassName('to-left')[0];
    var banner = document.getElementsByClassName('banner')[0];
    var arr = [];
    var count = 1;

    to_right.onclick = function() {
        toRight();
    }
    
    function toRight(){
        arr.push(window.setInterval("moveLeft()", 30));
    }
    
    to_left.onclick = function() {
        toLeft();
    }

    function toLeft(){
        arr.push(window.setInterval("moveRight()", 30));
    }
    
    function moveLeft() {
        if(count < 5) {
            if(banner.offsetLeft > count * (-500)) {
                banner.style.marginLeft = banner.offsetLeft - 20 + "px";
            } else {
                for(var x in arr) {
                    window.clearInterval(arr[x]);
                }
                count++;
            }
//    连接点
        }else{
            if(banner.offsetLeft > count * (-500)) {
                banner.style.marginLeft = banner.offsetLeft - 20 + "px";
            } else {
                for(var x in arr) {
                    window.clearInterval(arr[x]);
                }
                count = 1;
                banner.style.marginLeft = 0 + 'px';
            }
        }
    }
    
    function moveRight() {
        if(count-1 >0) {
            if(banner.offsetLeft < (count-2) * (-500)) {
                banner.style.marginLeft = banner.offsetLeft + 20 + "px";
            } else {
                for(var x in arr) {
                    window.clearInterval(arr[x]);
                }
                count--;
            }
        }
    }
    window.setInterval("toRight()",1750);
    

</script>

利用JS做网页特效——大图轮播的更多相关文章

  1. CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)

    CSS3边框: 1.CSS3圆角:border-radius  属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...

  2. js 实现淘宝无缝轮播图效果，可更改配置参数 带完整版解析代码[slider.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写淘宝无缝轮播图效果 需求分析: ...

  3. [DBW]大图轮播，可通过两种方法实现

    通过在div中加入表格,实现大图轮播,代码如下: 整体的思路: 1.在div中嵌入表格,设置div的宽和高,设置成图片大小,确定其位置,将图片插入表格,超出div部分隐藏 2.在js中定义一个变量接受 ...

  4. JS封装动画框架,网易轮播图,旋转轮播图

    JS封装动画框架,网易轮播图,旋转轮播图 1. JS封装运动框架 // 多个属性运动框架 添加回调函数 function animate(obj,json,fn) { clearInterval(ob ...

  5. bootstrap大图轮播手机端不能手指滑动解决办法

    网上看了很多解决办法,几乎本质都是一样的,都是引入一个滑动的js插件,加入一段js代码,即可生效,但是我试了hammer.js 和 touchSwipe.js 都不生效,也找不到原因是什么,目前在网上 ...

  6. 原生js和jquery实现图片轮播特效

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  7. 原生js和jquery实现图片轮播特效(转)

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  8. 纯原生JS大图轮播

    CSS部分: CSS: <style type="text/css"> #banner { position: relative; width: 500px; heig ...

  9. 使用jQuery做简单的图片轮播效果

      一.本特效主要用到的前端知识点 CSS中绝对定位(absolute)CSS实现垂直居中jQuery中简单的淡入淡出动画效果(fadeIn,fadeOut)定时器(setInterval,clear ...

随机推荐

  1. Pandas数据处理实战：福布斯全球上市企业排行榜数据整理

    手头现在有一份福布斯2016年全球上市企业2000强排行榜的数据,但原始数据并不规范,需要处理后才能进一步使用. 本文通过实例操作来介绍用pandas进行数据整理. 照例先说下我的运行环境,如下: w ...

  2. java环境配置，试用和基本数据结构

    一.java环境配置 1.打开我的电脑--属性--高级--环境变量 2.新建系统变量JAVA_HOME 和CLASSPATH 变量名:JAVA_HOME 变量值:jdk文件所在的路经变量名:CLASS ...

  3. java IO之 File类+字节流 （输入输出 缓冲流 异常处理）

    1. File类

  4. JavaWeb 后端 <五> 之 JSP 学习笔记

    一.JSP简介 1.也是SUN公司推出的开发动态web资源的技术,属于JavaEE技术之一.由于原理上是Servlet, 所以JSP/Servlet在一起. 二.HTML.Servlet和JSP 1. ...

  5. python模块之os模块详解

    os.listdir(dirname):列出dirname下的目录和文件 os.getcwd():获得当前工作目录 os.curdir:返回当前目录('.') os.chdir(dirname):改变 ...

  6. python selenium自动化之-环境搭建

    安装python和pip上述文章有介绍,在这里不在赘述.直接安装seleinum pip3 install selenium 安装完成以后, pip3 show selenium 显示 Name: s ...

  7. 使用jersey 注解包扫描类PackageNamesScanner

    Jersey 中自带一个包扫描,可以是包,或者具体类名 ,扫描的类型是自己定注解类型,实现功能更加大,可以是jar 包 可以是虚拟地址下的 Jersey 主要用来扫描Path Provider 类中同 ...

  8. java基础06 IO流

    IO用于在设备间进行数据传输的操作. Java IO流类图结构:   IO流分类 字节流: InputStream FileInputStream BufferedInputStream Output ...

  9. centos/linux alternatives与update-alternatives详解与软件版本切换

    update-alternatives是linux系统中专门维护系统命令链接符的工具,通过它可以很方便的设置系统默认使用哪个命令.哪个软件版本,比如,我们在系统中同时安装了open jdk和sun j ...

  10. TCP/IP协议之ping和traceroute

    Ping程序就是调用的就是ICMP报文.利用的是ICMP的应答和回显请求.来看下具体的ping报文. Request的报文类型为8 Reply的类型为0 通过具体的ping报文可以看到ping报文的大 ...