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

<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. axis1.4开发webservice客户端(快速入门)-基于jdk1.4

    写在前面: 对于客户端,服务端开发好了以后,客户端只需要调用就可以了.这里我们讲的是,根据服务的访问地址,来生成客户端所需要用到的代码(听说有几种调用方式,但是用到最常见的就是stub方式,貌似我说的 ...

  2. 使用阿里百川HotFix

    前言:首先要弄懂HotFix是干嘛的,不然就别向下看了.这里仅仅根据官方文档的代码书写,亲测可用,不做理论指导. Android Studio集成: 添加maven仓库地址: repositories ...

  3. H3CNE实验：配置基于端口划分的VLAN及Trunk

    配置准备数据 | 设备名称 | IP地址 | VLAN网关 | 接口 | VLAN | |--------------|------------|-------------|----------|-- ...

  4. oracle常用函数及关键字笔记

    --函数及关键字--1.trim,ltrim,rtrim 去除字符,无指定默认去除空格SELECT TRIM('a' FROM 'aafhfhaaaaaaaa'), LTRIM('aafhfhaaaa ...

  5. php之试触法----error--关键字的误用

    实际开发中,在不同网页的输出中,常常有许多公共的代码或者变量需要使用,于是定义了以下类来缩减代码量 如下代码所示: <?php class universalClass { function w ...

  6. 机器学习之支持向量机（SVM）

    支持向量机 百度百科(基本看不懂):http://baike.baidu.com/link?url=Z4MU6AYlf5lOX7UGHVYg9tBvxBGOkriPtNt0DixmscnMz06q5f ...

  7. Luogu T7152 细胞（递推，矩阵乘法，快速幂）

    Luogu T7152 细胞(递推,矩阵乘法,快速幂) Description 小 X 在上完生物课后对细胞的分裂产生了浓厚的兴趣.于是他决定做实验并 观察细胞分裂的规律. 他选取了一种特别的细胞,每 ...

  8. docker~通过vs2017的Dockerfile来生成镜像

    回到目录 Dockerfile这个东西我们之前是介绍过,它方便,快捷,易用,而在vs2017中也对docker进行了支持,而生成docker image的方式就是有用Dockerfile为基础的,在添 ...

  9. 一步一步学Vue（五）

    本篇是是vue路由的开篇,会以一个简单的demo对vue-router进行一个介绍,主要覆盖以下几个常用场景: 1.路由跳转 2.嵌套路由 3.路由参数 1.Vue-Router 一般来说,路由定义就 ...

  10. （转）log4j（五）——如何控制不同目的地的日志输出？

    一:测试环境与log4j(一)——为什么要使用log4j?一样,这里不再重述 1 老规矩,先来个栗子,然后再聊聊感受 package test.log4j.test5; /** * @author l ...