<!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. Java体系结构

    java程序运行过程图 文章中内容大多来自该处Java虚拟机规范----JVM体系结构 - Java初级码农 - 博客园 JDK体系 JDK体系结构图 JDK.JRE.JVM之间的关系 JDK:Jav ...

  2. 第十八次CSP认证游记 | 2019.12.15

    CSP认证的考试是Haogod介绍的,取得一定成绩之后能有机会参加CCSP的分赛区和全国决赛.这次来参加认证要感谢老师的奔走为我们申请学校的报销,虽然最终因为这不是比赛所以报名费和差旅费下不来,但是老 ...

  3. setTimeout(call,0)作用

    setTimeout(call,0)作用  经常看到setTimeout延时0ms的javascript代码,感到很迷惑,难道延时0ms和不延时不是一个道理吗?后来通过查资料以及实验得出以下两个作用, ...

  4. rabbitmq系列问题解决：406, "PRECONDITION_FAILED - inequivalent arg 'durable'

    1. 安装rabbitmq,查看官网文档: https://www.rabbitmq.com/#getstarted 由于我是先安装了rabbitmq后自己随手创建了queue,后面又按照官方给的&q ...

  5. windows安装python64位和32位的方法

    1.先安装python 64位的 python,创建一个64位的python虚拟环境: 2.再安装python 32位的 python,创建一个32位的python虚拟环境即可. 注意:两个版本安装在 ...

  6. [HNOI2003] 消防局的设立 - 树形dp

    仍然是点覆盖集问题,但覆盖半径变成了\(2\) 延续上一题的思路,只是式子更加复杂了 想体验一下min_element大法于是不想优化了 #include <bits/stdc++.h> ...

  7. 关于Git的右键菜单消失的处理

    右键菜单 Git Bash Here window + R,输入regedit回车进入注册表 进入如下目录 HKEY_CLASSES_ROOT\Directory\Background\shell 在 ...

  8. python3运行调用htmltestrunner时，报错UnicodeDecodeError: 'ascii' codec can't decode byte 0xe5 in position 0

    之前解决过一次,又忘了,这次写下来了..百度没有的,跟我环境有关! 环境:自动化运行环境python3.6.5 上期说到了,写了一个bat来运行runallcase.py. 但是双击运行却报错:Uni ...

  9. OpenCV: “vector”: 未声明的标识符和Vector不是模板

    漏写using namespace std: 会出现此错误“vector”: 未声明的标识符或者是将“vector”写成‘Vector’会出现Vector不是模板的错误:改正即可

  10. 简单的Spring1.0小配置

    开始Spring AOP的小理解 拿一个小例子来说吧!    老师上课   这样的例子!    老师上课--就是一个核心的业务!     那么上课之前需要点名,天气太热,需要开空调! 这个时候,一个老 ...