<!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. Python静态方法、类方法、属性方法

    静态方法 使用静态方法以后,相当于把下面的函数和类的关系截断了,它的作用相当于是类下面的一个独立函数,不会自动传入参数self. class people:..... @staticmethod de ...

  2. HTML5 表单学习

    创建表单的方法: 用form标签 form标签常用元素:input:单行表单.select:下拉式表单.textarea:多行文本域 input元素的type属性:text:文本属性.checkbox ...

  3. webpack 代理问题

    devServer host: '0.0.0.0' 或者是ip 形式的 ,proxy 中 的 target,host 需要为ip形式的地址, host: 'aa.a.com' 为字符形式的 ,prox ...

  4. 【vue 权威指南】 学习笔记 二

    1.指令 1.1内部指令 基础指令:v-show , v-else , v-model , v-repeat , v-for , v-text , v-el , v-html , v-on , v-b ...

  5. 开始自学JAVA了，找到一点有用的资料（不定时更新）

    入门代码https://blog.csdn.net/salmonwilliam/article/details/81952387 高精度https://www.cnblogs.com/downrain ...

  6. 熵权法（the Entropy Weight Method）以及MATLAB实现

    按照信息论基本原理的解释,信息是系统有序程度的一个度量,熵是系统无序程度的一个度量:如果指标的信息熵越小,该指标提供的信息量越小,在综合评价中所起作用理当越小,权重就应该越低.因此,可利用信息熵这个工 ...

  7. H5手机端开发问题及解决方案

    ios竖屏拍照上传,图片被旋转问题 1.通过第三方插件exif-js获取到图片的方向2.new一个FileReader对象,加载读取上传的图片3.在fileReader的onload函数中,得到的图片 ...

  8. C++面向对象编程实例

    实例一.四位运算符操作 main.cpp. #include <iostream> #include "operator_1.h" #include <stdio ...

  9. 心里没点B树，怎能吃透数据库索引底层原理？

    二叉树(Binary Search Trees) 二叉树是每个结点最多有两个子树的树结构.通常子树被称作“左子树”(Left Subtree)和“右子树”(Right Subtree).二叉树常被用于 ...

  10. 第一次个人编程作业&#183;寒假

    这个作业属于哪个课程 https://edu.cnblogs.com/campus/fzzcxy/SE/ 这个作业要求在哪里 https://edu.cnblogs.com/campus/fzzcxy ...