交流群:462197261站长百科站长论坛热门标签收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
点击这里给我发消息
  • 当前位置:
  • 原生js通过一行代码实现简易轮播图

    这是一个简易的js无限循环轮播图,只用了一行js代码就实现了无限循环,记录一下三目运算符的伟大!

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    * {
    margin: 0;
    padding: 0;
    }
    ul,li{
    list-style: none;
    }
    .container {
    width: 600px;
    height: 400px;
    margin: 100px auto;
    box-shadow: 0 0 5px green;
    overflow: hidden;
    }
    .container .wrap {
    width: 4200px;
    height: 400px;
    transition: 1s;
    overflow: hidden;
    }
    .container .wrap li {
    float: left;
    width: 600px;
    height: 400px;
    box-shadow: 0 0 1px 1px #f60;
    line-height: 400px;
    text-align: center;
    font-size: 50px;
    }
    </style>
    </head>
    <body>
    <div class="container">
    <ul class="wrap" style="margin-left:0px;">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    </ul>
    </div>
    <script>
    setInterval(()=>{
    var wrap = document.querySelector('.wrap')
    var left = parseInt(wrap.style.marginLeft)
    wrap.style.marginLeft = left >= -2400 ? left - 600 + 'px' : '0px'
    },2000)
    </script>
    </body>
    </html>

    总结

    以上所述是小编给大家介绍的原生js通过一行代码实现简易轮播图,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对北冥有鱼网站的支持!

    您可能感兴趣的文章:

    • js实现移动端轮播图
    • js实现轮播图的完整代码
    • 原生JS实现的简单轮播图功能【适合新手】
    • 原生JS实现的轮播图功能详解
    • JS使用tween.js动画库实现轮播图并且有切换功能

    广而告之:
    热门推荐:
    图片上传插件jquery.uploadify详解

    1、js代码:复制代码 代码如下:<script type="text/javascript"> $(document).ready(function() { $('#fileInput').uploadify({ //以下参数均是可选 'uploader' : '<%=basePath%>images/uploadify.swf', //指定上传控件的主体文件,默认‘uploader.swf' 'scri···

    纯js实现背景图片切换效果代码

    html代码 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>背景切换</title&···

    JavaScript无提示关闭窗口(兼容IE/Firefox/Chrome)

    在IE7/ Firefox 3.0/ Google Chrome通过测试 CloseDemo.htm 复制代码 代码如下:<script> var browserName=navigator.appName; if (browserName=="Netscape") { function closeme() { window.open('','_parent',''); window.close(); } } else { if (browserName=="···

    php文件上传的两种实现方法

    文件上传一般有下面2种方式: 有两种: 1、标准input表单方式,典型的用$_FILES进行接收; 2、以Base64的方式进行传送,一般是AJAX异步上传。 第一种 标准的input表单方式,适用于大文件进行上传,同时支持批量。html代码关键的几句: <form enctype="multipart/form-data"···

    慢慢展开再慢慢收起的javascript广告效果

    北冥有鱼 效果代码 *{margin:0;padding:0;} body {height:2000px;} #menu { width:220px; height:420px; position:absolute; z-index:1000; background:url(/upload/20080421090108362.gif) repeat-x top left; } #menu_h { float:right; } #m···

    Vue 创建组件的两种方法小结(必看)

    创建组件的两种方法小结 1.全局注册 2.局部注册 var child=Vue.extend({}) var parent=Vue.extend({}) Vue.extend() 全局方法 生成构造器,创建子类 使用基础 Vue 构造器,创建一个“子类”。 这样写非常繁琐。于是vue进行了简化 使用Vue.component()直接创建和注册组件: Vue···

    php计算指定目录下文件占用空间的方法

    本文实例讲述了php计算指定目录下文件占用空间的方法。分享给大家供大家参考。具体分析如下: php中可以通过 RecursiveDirectoryIterator 扩展 DirectoryIterator的getChildren() 方法提供访问子目录中的每一个元素的方法,下面的代码通过遍历访问目录下的所有文件,获取他们暂···

    asp.net中文件下载功能的实例代码

    复制代码 代码如下://TransmitFile实现下载protected void Button1_Click(object sender, EventArgs e){ Response.ContentType = "application/x-zip-compressed";Response.AddHeader("Content-Disposition", "attachment;filename=z.zip");string filename = Server.Map···

    php intval函数用法总结

    语法: int intval ( $var, $base ) 参数: 此函数接受两个参数,其中一个是必需的,而另一个是可选的。 参数如下所述: $var:这是一个必需参数,用作需要转换为整数值的变量。 $base:它是一个可选参数,指定$var转换为相应整数的基础。如果未指定$base。如果$var包含0x(或···

    JavaScript实现图片滑动切换的代码示例分享

    假设我们这里有1到5五张bmp图片,那么控制图片切换显示的核心代码可以为: <script> var i=1; var img = new Array(); img[0] = "1.bmp"; img[1] = "2.bmp"; img[2] = "3.bmp"; img[3] = "4.bmp"; img[4] = "5.bmp"; function playImg(){ i=i+1; var imgs = d···