<!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. Gtk-Message: Failed to load module “canberra-gtk-module”

    编写wxPython程序时,总是报以下错误: Gtk-Message: Failed to load module “canberra-gtk-module” 解决办法:apt-get install ...

  2. xshell 连接虚拟机过程

    (1)Ctrl+Shift+T 打开终端 terminal (2)ifconfig得到ip网络地址 (3)ssh安装已经打开ssh服务 (4)安装openssh-server sudo apt ins ...

  3. P1725 琪露诺

    P1725 琪露诺 单调队列优化dp 对于不是常数转移的dp转移,我们都可以考虑单调队列转移 然而我们要把数组开大 #include<cstdio> #include<algorit ...

  4. git fetch和push的区别

    获取fetch的用法 git-fetch用于从另一个reposoitory下载objects和refs. 命令格式为:git fetch … 其中表示远端的仓库路径.git remote add or ...

  5. ibator自动代码生成

    首先,强烈推荐一篇文章,介绍的特详细 http://www.iteye.com/topic/821983 1. 插件安装 http://blog.csdn.net/rchm8519/article/d ...

  6. ajaxfileup.js

    <img id="tinyPic" class="user-icon" :src="headPortrait"><inpu ...

  7. java基础 xml 使用dom4j解析 xml文件 servlet根据pattern 找到class

    package com.swift.kaoshi; import java.io.File; import java.util.List; import java.util.Scanner; impo ...

  8. Redis高可用

    redis高可用只要在于三个方面 主从复制 哨兵机制 集群机制 主从复制 主从复制作用: 1.数据冗余:主从复制实现了数据的热备份,是持久化之外的一种数据冗余方式.2.故障恢复:当主节点出现问题时,可 ...

  9. Java - 得到项目中properties属性文件中定义的属性值

    public static String getPropertiesValue(String fileName, String key) {   return ResourceBundle.getBu ...

  10. Unity基础

    unity unity 3大场景 Asset Scene Component Asset :资源导入导出 右击资源,选择导出Unity包 导入可以直接将只有复制到Asset文件夹 创建场景 File- ...