无缝向左轮播

最新推荐文章于 2019-09-05 20:28:01 发布
最新推荐文章于 2019-09-05 20:28:01 发布
阅读量141 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34530048/article/details/79673346
版权
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<style>
    *{
      margin: 0;
      padding: 0;
    }
    ul,li{
      list-style:none;
    }
    li{
        width: 100px;
        height:60px;
        font-weight:bold;
        line-height:60px;
        text-align: center;
        float: left;
    }
    li:nth-child(1),li:nth-child(6){
        background:red;
    }
    li:nth-child(2),li:nth-child(7){
        background:blue;
    }
    li:nth-child(3),li:nth-child(8){
        background:red;
    }
    li:nth-child(4),li:nth-child(9){
        background:green;
    }
    li:nth-child(5),li:nth-child(10){
        background:gray;
    }
    div{
        position: relative;
        width: 500px;
        height:60px;
        margin:0 auto;
        overflow:hidden;
        border:1px solid #000;
    }
    ul{
        position: absolute;
        top:0;
        left:0;
    }
</style>
<body>
    <div class="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
    <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <script>
        $("ul").append($("li").clone());
        $("ul").width($("li").size()*100);
        var t,s=0;
        function move(){
            t = setInterval(function(){
                s--;
                $("ul").css("left",s)
                if(s==-500){
                    s=0
                }
            },16)
        }
        move();
        $(".box").on("mouseenter",function(){
           clearInterval(t);
        })
        $(".box").on("mouseleave",function(){
           move();
        })
    </script>
</body>
</html>
qq_34530048
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS实现无缝左轮播
l1473942433的博客
06-20 404
最近学到了面向对象的编程思想，又重新写了一遍无缝轮播图。 无缝轮播图的思路： css布局部分:1.设置一个视口容器。（轮播图可视部分，宽度为一个图片的宽度，开启相对定位，设置overflow：hidden）2.视口容器内有一个图片容器。（图片是等宽的且横向排列，容器开启绝对定位）3.分页、上下页通过定位完成布局（注意z-index） js部分：1.轮播的本质。改变图片容器的left值...
利用jQuery实现从左向右无缝轮播样式
qq_40372395的博客
08-17 1385
html+js     &lt;div class="content"&gt;   &lt;div class="title"&gt;   &lt;img src="/templets/4hlcn/images/index/index-02.png" alt=""&gt;   &lt;div&amp
图片轮播，向左无限循环移动
11-30
图片轮播，向左无限循环移动 js ,css+div 图片横向移动，轮播
向左的滚动轮播
mentalitys的博客
09-28 379
CSS样式：  *{margin: 0;padding:0; }  ul{list-style: none;}  .banner{width: 600px;height: 300px;border: 2px solid #ccc;margin: 100px auto;position: relative;overflow: hidden;z-index: 1;}  .img{posit
用jquery写一个轮播图 左右键 滚动
Meroy0的博客
09-05 332
jquery实现轮播图 思路 大概思路是这样的 显示第一张，隐藏其他几张，然后使用定时器，把将要显示的图片通过定位于图片并排，利用动画效果实现图片轮播 我们利用一个class表示显示图片的当前位置 轮播动画有两种，向右轮播和向左轮播。所以定位图片并排和动画效果都不一样 向左轮播时刚好相反，假设当前是第二种需要轮播到第一张，我们利用定位把第一张图片并排放在第二种图片的左边，效果我就不演示了 然后通...
js实现图片无缝向左轮播
sweetllh的博客
04-20 3217
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{margin: 0;padding: 0;} ul, li{list-style: none;} .js-mask{width: 198px;height: 132px;borde
图片轮播——从右向左滑动
qq_41985171的博客
10-16 3952
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; #div1{ width: 1200
jQuery实现简单图片的轮播(自右向左播放)
sanshuiwang
07-31 3476
简单的轮播大概内容分为如下三点： 1.轮播图片的存储； 2.轮播的样式（注意：图片存储的总宽度，以及图片移动相对元素的定位的元素）； 3.JQuery中的计时器调用动画移动图片轮播。 一、carouselFigure.html编写图片的存储，以及所在范围 html> html lang="en"> head> meta charset="UTF-8"> t
jquery实现图片向左慢慢轮播（鼠标悬停图片停止轮播版）
一只胡萝卜
09-13 3175
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, us
ant-design-vue-1.3.0.zip
08-26
基于 Ant Design 和 Vue 的企业级 UI 组件库
scrapy爬取视频和漫画。django+vue.js前后端分离，构建简单的网站把视频和漫画呈现出来。.zip
08-26
scrapy爬取视频和漫画。django+vue.js前后端分离，构建简单的网站把视频和漫画呈现出来。.zip
python3+ django3+ bootstrap4+nginx.做的小网站用来记录日常开支和展示图表
08-26
environment+python3+ django3+ bootstrap4+ echarts5+ mysql+uwsgi+nginx.做的小网站用来记录日常开支和展示图表.zip
ant-design-vue-2.0.0-rc.6.zip
08-26
基于 Ant Design 和 Vue 的企业级 UI 组件库
springboot343大学生选修选课系统的设计与实现--pf.zip
08-26
大学生选修选课系统在对开发工具的选择上也很慎重，为了便于开发实现，选择的开发工具为Eclipse，选择的数据库工具为Mysql。以此搭建开发环境实现大学生选修选课系统的功能。其中管理员管理用户，新闻公告。 大学生选修选课系统是一款运用软件开发技术设计实现的应用系统，在信息处理上可以达到快速的目的，不管是针对数据添加，数据维护和统计，以及数据查询等处理要求，大学生选修选课系统都可以轻松应对。
ant-design-vue-0.6.0.zip
08-26
基于 Ant Design 和 Vue 的企业级 UI 组件库
Django+Bootstrap实现基于Bytom信息流的新闻聚合网站.zip
08-26
Django+Bootstrap实现基于Bytom信息流的新闻聚合网站.zip
基于微信小程序的校园商铺系统源码 （优秀毕业设计源码）
08-26
1. 基于微信小程序的校园商铺系统代码说明：经导师指导并认可通过的98分毕设项目代码。 2.适用对象：本代码学习资料适用于计算机、电子信息工程、数学等专业正在做毕设的学生，需要项目实战练习的学习者，也适用于课程设计、期末大作业。 3.技术栈：java，项目代码都经过严格调试，代码没有任何bug！ 4. 作者介绍：大厂码农，java领域创作者，阿里云开发社区乘风者计划专家博主，专注于大学生项目实战开发，文章底部有博主联系方式，更多优质系统、项目定制请私信。 5. 最新计算机软件毕业设计选题大全: https://blog.csdn.net/weixin_45630258/article/details/135901374
基于Django的小说网站.zip
最新发布
08-26
基于Django的小说网站.zip
js 自动无缝轮播
05-28
首先，获取容器和其中的图片元素，计算容器的宽度和每张图片的宽度，然后设置一个定时器，每隔一段时间就将容器向左移动一张图片的宽度，同时将第一张图片移动到最后一张的后面，从而实现无缝轮播。代码如下： ``` ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值