<!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. paramiko 基于密钥文件登陆

    首先密钥登陆远程的原理 client 端 将公钥放在远程机器authorized_keys: 使用 ssh-copy-id  app@ip 接着在client机器生成密钥 使用ssh-keygen - ...

  2. vjudge A^B Mod C 然后，10.6最。。。的 快速幂！！！

    链接:https://vjudge.net/contest/331993#problem/D 给出3个正整数A B C,求A^B Mod C. 例如,3 5 8,3^5 Mod 8 = 3. Inpu ...

  3. 关于向sql中插入datetime部分问题总结

    非int型数据要加单引号, 用format格式化当前时间后用String插入即可 读取时用时间戳读取datetime或转化为string存储 读 public static String gainTi ...

  4. 微信小程序scroll-view去除滚动条

    css代码: .father{ //父元素 width: 100vw; height: 100vh; overflow-x: hidden; overflow-y: auto; } //隐藏滚动条 : ...

  5. Oracle库基本操作

    --oracle 获取表名称,字段 with vA as ( SELECT USER_TAB_COLS.TABLE_NAME as 表名,USER_TAB_COLS.COLUMN_NAME as 列名 ...

  6. python创建字典的三种方式

    创建空字典: dict_eq={} print(type(dict)) 直接赋值创建字典: dict_eq={'a':1,'b':2,'c':'adbc'} 通过关键字dict和关键字参数创建 dic ...

  7. C语言合并两个有序链表

    将两个有序链表合并为一个新的有序链表并返回.新链表是通过拼接给定的两个链表的所有节点组成的. 示例: 输入:1->2->4, 1->3->4输出:1->1->2-& ...

  8. 2020牛客寒假算法基础集训营3 G.牛牛的Link Power II （树状数组维护前缀和）

    https://ac.nowcoder.com/acm/contest/3004/G 发现每个“1”对于它本身位置产生的影响贡献为0,对前面的“1”有产生贡献,对后面的"1"也产生 ...

  9. 02 Django虚拟环境搭建

    01 创建虚拟环境目录 该目录用于存放所有虚拟环境. cd / mkdir venv cd venv 02 创建当前项目的虚拟环境 virtualenv --python=/usr/bin/pytho ...

  10. Python入门6 —— 流程控制 - if判断

    代码块: 1.代码块指的是同一级别的代码,在python中用缩进相同的空格数(除了顶级代码块无任何缩进之外,其余代码块都是在原有的基础上缩进4个空格)来标识同一级的代码块 2.同一级别的代码块会按照自 ...