<!DOCTYPE html>
<html>

<head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            * {
                margin: 0px;
                padding: 0px;
            }
            
            #stage {
                width: 400px;
                height: 40px;
                border: 3px solid black;
                margin: 100px;
                overflow: hidden;
                position: relative;
            }
            
            #banner {
                width: 2400px;
                height: 300px;
                background-color: rosybrown;
            }
            
            .items {
                width: 400px;
                height: 40px;
                color: white;
                font-size: 25px;
                text-align: center;
                line-height: 300px;
                float: left;
            }
            
            .btn-l,
            .btn-r {
                width: 50px;
                height: 300px;
                background-color: black;
                opacity: 0.5;
                color: white;
                font-size: 40px;
                line-height: 300px;
                text-align: center;
                position: absolute;
                top: 0px;
            }
            
            .btn-l {
                left: 0px;
            }
            
            .btn-r {
                right: 0px;
            }
            
            .btn-l:hover,
            .btn-r:hover {
                cursor: pointer;
                /*透明度*/
                opacity: 0.2;
            }
        </style>
    </head>

<body>
        <div id="stage">
            <div class="btn-l">
                <</div>
                    <div class="btn-r">></div>
                    <div id="banner">
                        <div class="items" style="">平洋房产真实房源xxxx套</div>
                        <div class="items" style="">平阳房产真实在线交易xxxx套</div>
                        <div class="items" style="">平阳房产真实在线交易xxxx套</div>
                        <div class="items" style="">平阳房产真实在线交易xxxx套</div>
                        <div class="items" style="">平阳房产真实在线交易xxxx套</div>
                        <div class="items" style="">平洋房产真实房源xxxx套</div>
                    </div>
            </div>
    </body>

</html>
<script>
    var btn_l = document.getElementsByClassName('btn-l')[0];
    var btn_r = document.getElementsByClassName("btn-r")[0];
    var banner = document.getElementById("banner");
    var count = 1;
    var arr = [];

btn_r.onclick = function() {
        if(count < 6) {
            count++;
            arr.push(window.setInterval("move_left()", 20));
        } else if(count == 6) {
            count = 1;
            banner.style.marginLeft = 0 + "px";

count++;
            arr.push(window.setInterval("move_left()", 20));
        }
    }

btn_l.onclick = function() {
        if(count > 1) {
            count--;
            arr.push(window.setInterval("move_right()", 20));
        } else if(count = 1) {
            count = 5;
            banner.style.marginLeft = -2000 + "px";

count++;
            arr.push(window.setInterval("move_left()", 20));
        }
    }

function move_left() {
        if(banner.offsetLeft == (count - 1) * (-400)) {
            clear();
        } else {
            banner.style.marginLeft = banner.offsetLeft - 20 + "px";
        }
    }

function move_right() {
        if(banner.offsetLeft == (count - 1) * (-400)) {
            clear();
        } else {
            banner.style.marginLeft = banner.offsetLeft + 20 + "px";
        }
    }

function clear() {
        for(var x in arr) {
            window.clearInterval(arr[x]);
        }
    }
    //-----------------------------    分割线--------------------------------
</script>

<!--0     -500       -1000      -1500      x
1   0    2           3         4        n-->

大图轮播js的更多相关文章

  1. 利用JS做网页特效——大图轮播

    大图轮播完整流程代码操作: <style>            * {                margin: 0px;                padding: 0px;  ...

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

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

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

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

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

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

  5. 网站图片的轮播JS代码

    这是几个网站的轮播JS效果,实现图片按照时间来切换,目前有几个站实现该功能,特别是浴室柜网站改版前,以下就是JS具体内容可以自己改下路径就可以用的linkarr = new Array();picar ...

  6. js轮播功能 标签自动切换 同页面多轮播js

    需要加入jquery 1.43及以上版本 下面还有个简单版,一个页面只支持一个轮播 同页面多轮播js <div> <div class="yt_content"& ...

  7. 纯原生JS大图轮播

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

  8. JQUERY写大图轮播；附jquery的hover()方法、animate()方法、find()方法

    思想:黑框设置超出部分隐藏. 红框往左移动,通过判断红框左边框距离黑框左边框的像素值,来实现红框的移动. 绿框在最上层,放每张图片的说明和序号. 一:html部分(大框.图片部分.箭头部分.图片介绍部 ...

  9. jQuery实现大图轮播

    css样式: *{    margin: 0;    padding: 0;}ul{    list-style:none;}.slideShow{    width: 620px;    heigh ...

随机推荐

  1. iso十款常用类库

    iso十款常用类库 MBProgressHUD(进展指示符库)   地址:https://github.com/jdg/MBProgressHUD   苹果的应用程序一般都会用一种优雅的,半透明的进度 ...

  2. 【模板时间】◆模板·II◆ 树链剖分

    [模板·II]树链剖分 学长给我讲树链剖分,然而我并没有听懂,还是自学有用……另外感谢一篇Blog +by 自为风月马前卒+ 一.算法简述 树链剖分可以将一棵普通的多叉树转为线段树计算,不但可以实现对 ...

  3. 【MYSQL笔记1】mysql的基础知识

    首先进去mysql.打开电脑命令提示符(cmd):输入mysql -uroot -p   代表的意思是使用ruser使用者root的方式,打开mysql,-p代表password,如果有的话,回车之后 ...

  4. LArea 微信端 地址选择

    最近做到一个项目,微信端的商城需要地址选择功能 在百度上看了,采用LArea.js....下载实例,在移动端模拟器上运行是比较好的, 在微信上模拟后出现很多问题, 1,出现undefined 都定义正 ...

  5. Linux - 用户环境变量的查看与设置

    1. 查看当前有哪些环境变量 直接输入命令:env 2. 设置用户环境变量 输入命令:vim ~/.bash_profile,打开文件,输入如下内容: 范例(设置maven环境变量): export ...

  6. Ansible工作架构和原理

    特性 模块块化调用持定的模块,完成持定任务 有Paramiko,PyYAML,Jinja2(模板语言)三个关键模块 支持自定义模块 基于Python语法头现 部署简单,基于python和SSH(默认已 ...

  7. TCPIP协议编程：基于UDP协议的局域网聊天工具的研发

    任务目标 聊天器采用客户端/服务器(C/S)模式: 客户端利用UDP与服务器相连,客户端与客户端之间通过UDP相互通信: 服务器端具有服务器端口设置维护客户端个人信息,记录客户端状态,分配账号等: 客 ...

  8. ARM S3C2440 时钟初始化流程

    1.设置lock time 2.设置分频系数 3.设置CPU到异步工作模式 4.设置 FCLK 了解 芯片的时钟原理图,以及寄存器的作用 了解芯片的晶振频率,锁相环,分频系数,以及有哪些时钟

  9. axios进行ajax请求得不到数据，cookie无法携带问题

    这个坑也是很早之前踩过,今天做项目的时候居然忘了,怎么都拿不到数据,果然好记性不如烂笔头,决定写篇博客来祭奠下我的猪脑子: 原因可能就是你发送请求的时候,需要设置cookie,然而你的cookie并没 ...

  10. Laravel5.5.x集成Swagger (L5-Swagger) 只讲Laravel5.5.x的集成,laravel其他版本请自行研究或参考github上的说明

    --------上图 截取自Github 官网上的安装参考----------------------------------------------------------------------- ...