<!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. mac jdk profile 永久的配置

    配置java_home 在MAC中设置JAVA_HOME环境变量 环境变量要再etc目录下的profile文件中配置,这样才是永久的配置. cd /etc vi profile 按 i 键进入写模式 ...

  2. sql查询语句面试题

    几个表 employees 表: EMPLOYEE_ID              NUMBER(6) FIRST_NAME                VARCHAR2(20) LAST_NAME ...

  3. C#面向对象的基本概念

    “面向对象=对象+类+继承+通信”.如果一个软件系统使用了这样四个概念进行设计和实现,我们就可以认为这个软件系统是面向对象的. 一.一切都是对象 1. 对象概述 对象可以表示几乎所有的实物和概念.比如 ...

  4. 关于package.json学习

    1.如果要下载npm包,必须有package.json文件,不然会报错,如果缺少必要字符报错,参考报错信息 2.license,指定用户权限,可以不写,不会报错 3.devDependencies,依 ...

  5. 轻量级自动化工具 pssh

    pssh应用场景 pssh是一个用python编写的可以并发在多台服务器上批量执行命令的工具,它支持文件并行复制,远程并行执行命令,其中文件并行复制是pssh的核心功能,也是同类工具中的一个亮点. 要 ...

  6. 你们知道SEO每天都在做什么吗？

    医院也有做SEO的,专门负责医院网站优化工作,那么医院的SEO每天都做什么呢?偶然见到一篇文章,转载来分享给大家.感觉写的很实在. 大凡做seo工作的人都知道seo工作者每天都要做大量的外链,像有些个 ...

  7. (三)、python运算符和基本数据类型

    运算符 1.算数运算: 2.比较运算: 3.赋值运算: 4.逻辑运算: 5.成员运算: 基本数据类型 1.数字 int(整形) # python3里不管数字有多长都叫整形# python2里分为整形和 ...

  8. Python基础-字符串的使用

    基础知识 字符串解释:字符串是不可变的,所有元素赋值和切片赋值操作都是非法的,属于序列一种(字符串.元组.列表). 一.格式化字符串 (1).format()方法==str.format() 作用:将 ...

  9. 两种查看SIP版本的方法python

    第一种:进入python命令行 print(sip.SIP_VERSION_STR) 注意对应的PyQt版本号和大小写 print(PyQt5.sip.SIP_VERSION_STR) 第二种:直接在 ...

  10. python——集合

    在python中,字典的亲戚就是集合,集合就是无映射关系的字典,花括号并不是字典的特权.如下面程序所示: >>> num = {} >>> type(num) &l ...