<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>js实现左右自动切换</title>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

</head>

<style>

    .b2{

        width: 1190px;

        height: 147px;

        margin: 44px auto 0;

        position: relative;

        overflow: hidden;

        background-color: gray;

    }

    .b2 .b2list{

        width: 2655px;

        height: 147px;

        position: absolute;

        top: 0;

        left: 0;

    }

    .b2 .item{

        width: 285px;

        height: 147px;

        margin-left: 10px;

        float: left;

        border-top: 1px solid transparent;

        background-color: red;

    }

</style>

<body>

    <div class="b2">

        <div class="b2list" data="0">

            <div class="item">1</div>

            <div class="item">2</div>

            <div class="item">3</div>

            <div class="item">4</div>

            <div class="item">5</div>

            <div class="item">6</div>

            <div class="item">7</div>

            <div class="item">8</div>

            <div class="item">9</div>

        </div>

    </div>

    <script>

        $(function(){

            setInterval("auto_left_me();",3000);

        });

        function auto_left_me(){

            var num = $(".b2 .b2list").attr("data");

            num++;

            if(num>5){

                num=0;

            }

            $(".b2 .b2list").attr("data",num);

            $('.b2 .b2list').animate({'left':-295*num});

        }

    </script>

</body>

</html>

js实现左右自动滚动的更多相关文章

  1. 今天代码中接触到了一个新的东西。js的上下自动滚动，无缝对接。

    js的上下自动滚动,无缝对接.为什么会用到这个东西呢?因为我在做公司的官网项目的修改的时候.有一个产品介绍的页面,会有很多的产品出现在,中间部分的列表里.但是又不能够使用分页.所以我就在想如果,列表数 ...

  2. JS DIV列表自动滚动带停顿，滚动到底部后自动滚动到顶部

    setInterval -- 间隔执行函数:element.scrollTop -- 元素滚动条距头部的距离: 因为执行代码需要时间,所以最终动态时间会比设置的要慢 var slide = new S ...

  3. JS + jQuery 实现元素自动滚动到底部，兼容IE、FF、Chrome

    HTML代码: <ul class="tasklog-dialog-ul" id="auto_to_bottom"> <li>删除虚拟机 ...

  4. js点击左右滚动+默认自动滚动类

    js点击左右滚动+默认自动滚动类 点击下载

  5. 带左右箭头切换的自动滚动图片JS特效

    效果图 按钮 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  6. js 实现单行文本滚动效果

    js 代码如下: /***************滚动场次开始*****************/ function ScrollText(content, btnPrevious, btnNext, ...

  7. js 实现文字列表滚动效果

    今天要实现抽奖名单在首页滚动展示的效果,就用js写了一个,代码如下: html代码: <style type="text/css"> *{margin:;padding ...

  8. Jquery实现图片左右自动滚动

    图片左右滚动的效果想必大家都有见到过吧,其实很简单.在本文将为大家介绍下使用Jquery是如何实现图片左右自动滚动的. 代码如下:<!DOCTYPE HTML>  <html> ...

  9. fullpage.js jq全屏滚动插件

    fullPage.js和fullPage都能实现全屏滚动,二者区别是:fullPage.js需依赖于JQuery库,而fullPage不需要依赖任何一个js库,可以单独使用. (代码演示效果并且可以下 ...

随机推荐

  1. 深入浅出Mybatis系列五-TypeHandler简介及配置（mybatis源码篇）

    注:本文转载自南轲梦 注:博主 Chloneda:个人博客 | 博客园 | Github | Gitee | 知乎 上篇文章<深入浅出Mybatis系列(四)---配置详解之typeAliase ...

  2. php实现简易留言板效果

    首先是Index页面效果图 index.php <?php header('content-type:text/html;charset=utf-8'); date_default_timezo ...

  3. 松软科技课堂:jQuery 效果 - 淡入淡出

    jQuery Fading 方法 通过 jQuery,您可以实现元素的淡入淡出效果. jQuery 拥有下面四种 fade 方法: fadeIn() fadeOut() fadeToggle() fa ...

  4. 0002 Django工程创建

    1 创建一个目录,用于专门存放Django工程的虚拟环境 PyCharm默认虚拟环境在工程内,从而导致打包的时候,会把虚拟环境一起打包. 同时,虚拟环境中的插件较多,一个工程创建了一个虚拟环境,以后, ...

  5. ubuntu set up 4 - 设置和软件

    1. Top Bar显示日期 https://askubuntu.com/questions/966576/customizing-tray-taskbar-date-display-in-ubunt ...

  6. 小程序图片上传，长按删除,weui

    <view class="weui-cells"> <view class="weui-cell"> <view class=&q ...

  7. Centos7安装gitlab-ce

    1.官方推荐方式安装 参考https://www.gitlab.com.cn/installation/#centos-7?version=ce sudo yum install -y curl po ...

  8. 多线程启动selenium，报NameError: name '__file__' is not defined

    将__file__加上单引号就解决了:   # 获取当前文件名,用于创建模型及结果文件的目录   file_name = os.path.basename('__file__').split('.') ...

  9. solr 对于 关键字的特殊处理

    public static String transformMetachar(String input){      StringBuffer sb = new StringBuffer();     ...

  10. Jmeter-Badboy检查点和参数化

    Badboy进行检查点操作 1.复制搜索的内容,点击Tools,选择添加断言Add Assertion for Selection 2.这个时候Step1步骤下就会多一个检查点 3.点击工具栏上的Pl ...