<!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. linux awk 内置函数详细介绍(实例)

    这节详细介绍awk内置函数,主要分以下3种类似:算数函数.字符串函数.其它一般函数.时间函数 一.算术函数: 以下算术函数执行与 C 语言中名称相同的子例程相同的操作: 函数名 说明 atan2( y ...

  2. open cv & vs

    原来基于vs和msdn一起读视频,结果发现现在的函数不能用了.找不到合适的解码器了,只好转战opencv. 具体怎么用,网上查吧,不过opencv读视频的例子,可以见这个. http://blog.c ...

  3. lintcode_177_把排序数组转换为高度最小的二叉搜索树

    把排序数组转换为高度最小的二叉搜索树   描述 笔记 数据 评测 给一个排序数组(从小到大),将其转换为一棵高度最小的排序二叉树. 注意事项 There may exist multiple vali ...

  4. LNMP+HAProxy+Keepalived负载均衡 - 基础服务准备

    日志服务 修改日志服务配置并重启日志服务: ``` vim /etc/rsyslog.conf ``` 编辑系统日志配置,指定包含的配置文件路径和规则: ``` $IncludeConfig /etc ...

  5. nuxt.config有关router配置

    这里只说明一个属性,其他属性移步官方文档 https://zh.nuxtjs.org/api/configuration-router extendRoutes   官方说明: 你可以通过 exten ...

  6. Ubuntu 18.04 配置

    Ubuntu 18.04 配置IP-静态(UB与其他linux os不同) sudo netplan generate sudo vim /etc/netplan/50-cloud-init.yaml ...

  7. django中的分页管理

    有时,展示的对象太多,需要对他们进行分页展示,不能一页把所有的结果都展示出来吧,那样的话,哈哈,挺逗 使用Django分页器功能 从Django中导入Paginator模块(没有的话,自行下载,我是w ...

  8. TFS 2015服务端安装与客户端签入项目步骤

    一.参考如下3篇文章搭建TFS2015环境 1.参考文章如下: TFS 2015(Visual Studio Team Foundation Server)的下载和安装http://www.cnblo ...

  9. Oauth2.0协议 http://www.php20.com/forum.php?mod=viewthread&tid=28 (出处: 码农之家)

    概要     OAuth2.0是OAuth协议的下一版本,但不向后兼容OAuth 1.0即完全废止了OAuth1.0. OAuth 2.0关注客户端开发者的简易性.要么通过组织在资源拥有者和HTTP服 ...

  10. 我的Hibernate学习

    以下博客均为引用, 侵删 Hibernate初级     HQL和SQL的区别 https://blog.csdn.net/aaa1117a8w5s6d/article/details/7757097 ...