<!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. Docker最全教程——从理论到实战（二十三）

    如何节约云端成本? 上云在大部分情况下就是为了降低成本,在这方面,主流的容器服务基本上都能够有效地降低成本——不仅能够高效自动化的管理和控制容器,而且不需支付Kubernetes 主节点的费用.不过, ...

  2. 编辑当前目录及其子目录，对比指定文件大小 (bat)

    @echo off :: 设置对比大小校验(单位为kb) set COMPARE=100 ::指定起始文件夹 cd %~dp0/ set DIR_PATH=%cd% :: 输出文件目录 set RES ...

  3. git中设置代理

    说明:在某种原因下,整个网络都是使用代理的情况下,需要使用git clone,这时就需要设置代理了. 在没有设置代理的时候,直接克隆报错  Failed to connect to gitee.com ...

  4. Ubuntu 安装交叉编译器出错问题

    安装教程网上有很多,可参考:Ubuntu14.04(64位)下gcc-linaro-arm-linux-gnueabihf交叉编译环境搭建 但是我的问题一直是路径搭好了,就是找不到文件:反复查找,花了 ...

  5. STM 32 内部功能回顾

    EXTI   外部中断 NVIC 嵌套的向量式中断控制器 AHB 是高级高性能内部总线,主要是用在CPU.DMA.DSP(数字信号处理) APB 是外围总线,I2C. 串口 APB 分为高速APB2( ...

  6. CodeForces 1141B

    https://vjudge.net/problem/CodeForces-1141B #include<bits/stdc++.h> using namespace std; int m ...

  7. EF CodeFirst数据注解特性详解

    数据注解特性是.NET特性,可以在EF或者EF Core中,应用于实体类上或者属性上,以重写默认的约定规则. 在EF 6和EF Core中,数据注解特性包含在System.ComponentModel ...

  8. Python七夕记

  9. 220. 存在重复元素 III

    题目: 给定一个整数数组,判断数组中是否有两个不同的索引 i 和 j,使得 nums [i] 和 nums [j] 的差的绝对值最大为 t,并且 i 和 j 之间的差的绝对值最大为 ķ. 示例 1: ...

  10. element 表格里的input点击回车聚焦下个input

    <template> <card> <el-table ref="singleTable" :data="tableData" h ...