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

<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. JVM总结之GC

    哪些内存需要回收 在Java堆中存放着几乎所有的对象实例,垃圾收集器在对堆进行回收前,第一件事情就是要知道哪些对象还"存活着",哪些对象已经"死去". 引用计数 ...

  2. DOCKER 从入门到放弃（三）

    使用docker create [image-name] 创建一个容器 创建一个nginx镜像的容器,由于没有指定各项参数,容器实用默认参数,创建后并不会启动,并将容器的ID输出到终端,如果本地没有镜 ...

  3. maven(二) maven项目构建ssh工程(父工程与子模块的拆分与聚合)

    前一节我们明白了maven是个什么玩意,这一节就来讲讲他的一个重要的应用场景,也就是通过maven将一个ssh项目分割为不同的几个部分独立开发,很重要,加油 --WH 一.maven父工程与子模块的拆 ...

  4. Vue.js学习笔记（二） - 常用模板语法

    本篇将在上一篇的基础上记录文本渲染.表达式.过滤器以及常用指令的简单用法. 一.文本渲染 Vue支持动态渲染文本,即在修改属性的同时,实时渲染文本内容.同时为了提高渲染效率,也支持只渲染一次,即第一次 ...

  5. Eclipse 修改 创建的Jsp的默认格式

    Eclipse 的jsp模板修改 打开 eclipse  选择 Window -- Preferences

  6. Oracle数据迁移-系统数据合并笔记

    创建临时表:execute immediate 'sql'; 通过临时表和关联查询解决循环处理效率低下,大数据操作移植时时间太长的问题. 结构相同的系统数据库表移植,案例如下: create or r ...

  7. Centos7架设NMP服务器笔记

    安装centos7.3 1.从mirrors.163.com下载7.3 2.准备虚拟机vitualbox,网络我使用的桥接到无线网卡,直接连我到路由器,IP自动分配(本来想搞静态IP的,搞了好久没成功 ...

  8. Spring+SpringMVC+MyBatis深入学习及搭建(十三)——SpringMVC入门程序（二）

    1.非注解的处理器映射器和适配器 1.1非注解的处理器映射器 前面我们配置的org.springframework.web.servlet.handler.BeanNameUrlHandlerMapp ...

  9. HashSet TreeSet 源码

    1 HashSet 1.1 父类 java.lang.Object 继承者 java.util.AbstractCollection<E> 继承者 java.util.AbstractSe ...

  10. hdu_1695: GCD 【莫比乌斯反演】

    题目链接 这题求[1,n],[1,m]gcd为k的对数.而且没有顺序. 设F(n)为公约数为n的组数个数 f(n)为最大公约数为n的组数个数 然后在纸上手动验一下F(n)和f(n)的关系,直接套公式就 ...