原生JS写轮播

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        *{            margin:0;            padding: 0;        }        #wrap{            width: 411px;            height: 449px;            overflow: hidden;            border: 1px solid red;            margin: 0 auto;        }        #ul{            width: 1233px;            list-style: none;        }        li{            float: left;        }        img{            position: relative;            top: 0;            left: 0;            border: 1px solid red;        }    </style></head><body><div id="wrap">    <ul id="ul">        <li><img src="gallery-img1.png" /></li>        <li><img src="gallery-img2.png" /></li>        <li><img src="gallery-img3.png" /></li>    </ul></div></body></html><script>    var ul = document.getElementById("ul");    var li = document.getElementsByTagName("li");//     console.log(li.length);

    for(var i = 0; i<li.length;i++){        li[i].style.marginLeft="0";    }    var runID = setInterval(run,50);    function run(){        var liOne = li[0];        var left = parseInt(liOne.style.marginLeft);        liOne.style.marginLeft = left - 15 +"px";//        console.log(img.style.left);        if(left<=-411){            liOne.style.marginLeft="0";            ul.removeChild(liOne);            ul.appendChild(liOne);        }    }</script>
时间： 2024-10-08 22:55:48

原生JS写轮播的相关文章

原生js写轮播图效果

<script> var picarr=[ "pic/lb1.jpg", "pic/lb2.jpg", "pic/lb3.jpg", "pic/lb4.jpg" ]; //全局变量index控制当前所在第几张图片 var index=0; var timer; var radiobtn= document.getElementsByClassName("tubiao")[0].getElemen

封装一个简单的原生js焦点轮播图插件

轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放.本篇文章的主要目的是分享封装插件的思路. 轮播图的我一开始是写成非插件形式实现的效果,后来才改成了封装成插件的形式. 首先要明白轮播图的实现原理和基本布局,大概就是外面有一个容器包裹着(通常是div),容器设置宽高,以及overflow为hidden,超出宽高部分隐藏, 容器里面又包含着另一个容器,包裹着所有的图片,宽为所有图片的总宽度,ul的position为absolute,通过改变ul的left

原生js简单轮播图 代码

在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用面向过程函数式编程去实现,相对于面向对象设计模式,代码难免会显得臃肿冗余.但没有面向对象的抽象却很适合新手理解与学习.已经在BAT的同学看到希望少喷点.另外可以多提意见. 轮播图的原理: 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过计算偏移量利用定时器实现自动播放,或通过

用原生js封装轮播图

原生js封装轮播图 对于初学js的同学来说,轮播图还是一个难点,尤其是原生js封装轮播图代码,下面是我之前做的一个轮播图项目中封装好的一些代码,有需要的同学可以看一下,有什么不懂的可以看注释,注释看不懂的可以直接私信我 slide.js /* * 轮播图 */ function Slide(elem, ms, d, ind){ this.el = elem; this.w = parseInt(getStyle(elem, "width")); this.h = parseInt(ge

使用原生js实现轮播图效果

知乎原文 我的博客 微信公众号这几天在逛网站的时候,发现很多网站都有轮播图这个效果,所以我就仿照小米的官网用原生js写了一个轮播图效果,希望大家喜欢.这是我发布在github上的最后实现的效果:https://heternally.github.io/... 下面我简单跟大家说一下我实现该效果的过程,如果有什么错误的地方,欢迎大家说出来,以方便大家互相学习. 我相信前面简单的html+css大家应该都会,我这里就不说了,简单给大家展示一下代码: HTML部分 <div id="wrap&q

原生js封装轮播图

个人实际开发中用到的效果问题总结出来便于自己以后开发查看调用,如果也适用其他人请随意拿走勿喷就行! 原生js对于思路要求比较高,在js代码我都写有备注,足够理解并使用,即使是小白或者刚入行的程序员也比叫好理解,其轮播图只是一个简单的效果,缺点没有写动画效果看起来比较生硬,优点简单好学,容易理解,非常实用 轮播图介绍 : 三张图片,图片下方有对应图片数量的三个指示点,左右有切换指示,左右指示可要可不要 HTML代码 <div id="mlBox"> <div id=&q

手把手原生js简单轮播图

在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用面向过程函数式编程去实现,相对于面向对象设计模式,代码难免会显得臃肿冗余.但没有面向对象的抽象却很适合新手理解与学习.已经在BAT的同学看到希望少喷点.另外可以多提意见. 轮播图的原理: 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过计算偏移量利用定时器实现自动播放,或通过

学习随笔 原生js实现轮播

兼容性:IE7及以上,火狐和谷歌等主流浏览器 HTML&CSS 最外面1个总容器#ad,里面放1个图片容器#list,1个按钮容器#btns,2个箭头#prev和#next:#ad相对定位,其他相对于#ad绝对定位.所有图片都是绝对定位,会重叠在一起,默认z-index:0:给选中的图片和按钮分别设置class为selected和on,其中选中图片的z-index:1,才会出现在顶层.JS 手动轮播:把选中图片和按钮添加相应类名selected和on,把原来选中的按钮和图片取消相应类名.需要用循

原生js实现轮播图

很多网站上都有轮播图,使用起来也比较炫酷,但找到一个系统的介绍却很难,这里做一个简单的介绍. 原理:将一些列的图片在一行中平铺,然后计算偏移量再利用定时器实现定时轮播. 步骤一: 建立html基本布局,如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮播图</title> </head> <body> <