<!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. css3制作网页动画

    一.CSS3变形 CSS3变形是一些效果的集合 如平移.旋转.缩放.倾斜效果 每个效果都可以称为变形(transform),它们可以分别操控元素发生平移.旋转.缩放.倾斜等变化 二.CSS3位移:tr ...

  2. matplotlib数组转图片的一些坑

    最近用matplotlib遇到了一些坑,记录一下. 图片转数组 import matplotlib.pyplot as plt im_file='test_image.jpg' img=plt.imr ...

  3. C#接口与抽象类学习笔记

    本笔记摘抄自:https://www.cnblogs.com/solan/archive/2012/08/01/CSharp06.html,记录一下学习过程以备后续查用. 摘要: 抽象类:是一种特殊的 ...

  4. jQuery---音乐导航

    音乐导航 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  5. SendMessage模拟按键所需的虚拟键码

    Virtual-Key Codes The following table shows the symbolic constant names, hexadecimal values, and mou ...

  6. nginx 部署php项目 404

    服务器重启了一下 然后访问程序报错404的情况 文件存在位置没有问题 niginx配置根目录没有问题 最后检查到端口的时候发现php-fpm的9000端口未打开 service php-fpm res ...

  7. JFinal Enjoy指令扩展管理常用文本模板

    个人博客 地址:http://www.wenhaofan.com/article/20190304102258 平时在项目中使用短信模板 邮件模板以及 站内消息通知等文本模板一般都是通过手动的字符串拼 ...

  8. 解决webpack和gulp打包js时ES6转译ES5时Object.assign()方法没转译成功的问题

    在webpack或gulp打包的配置文件中package.json 引入"@babel/plugin-transform-object-assign": "^7.2.0& ...

  9. 在vue中使用elementUI饿了么框架使用el-tabs，切换Tab如何实现实时加载，以及el-table表格使用总结

    当我们在开发中遇到tab切换,这时候用el的el-tabs感觉很方便 但当我在把代码都写完后,发现一个问题就是页面打开时 虽然我们只能看见当前一个tab页,但是vue会帮你把你写的所有tab页的内容都 ...

  10. [ C++ ] 常用位运算技巧

    1.除以二 a >> 1 2.二的n次方 1 << n 3.十进制转2进制 x&(1<<i) 持续更新