原生JS简单的无缝自动轮播
最近在不断的加强巩固js。在学习jq和vue之后发现很多东西其实都是不明所以,有些底层的东西自己不懂,到头来也只是一昧的使用,一直在用别人的东西,对自己的成长帮助也不大。
万丈高楼平地起,基础打扎实了学什么都快,而且我觉得用原生的代码写完好像自己有点小成就感的。现在记录一下今天复习的原生js无缝轮播吧。
先上一张自拍镇楼,哈哈哈
首先先说一下思路吧,首先任意张图片以ul的形式保存显示,上代码吧
<div id="wrap">
<ul id="ul">
<li>
<img src="http://img3.imgtn.bdimg.com/it/u=1135520735,2369294998&fm=200&gp=0.jpg">
</li>
<li>
<img src="http://img2.imgtn.bdimg.com/it/u=695607252,2370769232&fm=200&gp=0.jpg">
</li>
<li>
<img src="http://img4.imgtn.bdimg.com/it/u=4133407901,1533904167&fm=200&gp=0.jpg">
</li>
<li>
<img src="http://img5.imgtn.bdimg.com/it/u=4083237979,1376579798&fm=26&gp=0.jpg">
</li>
<li>
<img src="http://img2.imgtn.bdimg.com/it/u=1640379911,3259036309&fm=26&gp=0.jpg">
</li>
</ul>
</div>
图片轮播的话我是让整个ul移动显示,而不是更改li的margin,上css代码,因为一张图片设置是80px;所以容器的width就是400了。我这里举例是5张图,实际可以是无数张图,
ul上我也没设置宽度,如果知道图片几张那么直接定死就可以了,那如果就任意张的话就在js代码上设置了。
#wrap{
width: 400px;
height: 80px;
overflow: hidden;
margin-left: 500px;
margin-top: 300px;
position: relative;
}
#ul{
position: absolute;
left:;
top:;
width: 400px;
font-size:;
margin:;
padding:;
}
然后js代码就很简单了,直接设置一个定时器,让ul缓慢的右移或者左移就可以了。但是会有一个问题,我们等下再讨论,先附上代码
window.onload = function(){
var odiv = document.getElementById('wrap');
var oul = document.getElementById('ul');
setInterval(function(){
oul.style.left = oul.offsetLeft + 5 +'px';
},30)
但是图片往右走了就回不了头了,上面的代码只是让图片一直往左移动,那怎么实现当最后一张图片移动到左边缘时第一张图片重新显示,其实很简单
比如图片是1<—2<—3<—4这么移动显示,那么我们假如多一份图片呢,也就是说1<—2<—3<—4这里显示完了后面还有一份1<—2<—3<—4拼接上来呢,然后当第2组图片移动显示到4的时候,我们将ul重新拉回来
也就是将left设置成0;那你可能会问了那如果是这样直接拉回来不会出现闪动吗,事实是不会的。只要我速度够快,寂寞就追不上我。那么代码就可以这么写了
var odiv = document.getElementById('wrap');
var oul = document.getElementById('ul');
var oli = oul.getElementsByTagName('li');
oul.innerHTML = oul.innerHTML + oul.innerHTML;//拼接li,因为图片可能是任意张
oul.style.width = oli[1].offsetWidth * oli.length + 'px';//ul的宽度等于所有图片宽度的总和
setInterval(function(){
if (oul.offsetLeft < -oul.offsetWidth/2) {
oul.style.left = 0;//如果ul已经显示完了一组,也就是宽度的一半,那么就把他拉回来重新轮播
}else{
oul.style.left = oul.offsetLeft - 2 +'px';
}
},30);
这样就完成了,可以复制代码在浏览器查看效果。我们也可以在这个基础上继续拓展,比如鼠标移入轮播停止,移出又继续,那这里只需要写个移入清除定时器事件,移出重新开始就可以了。
这个小拓展后又可以再继续拓展,比如在轮播图的两端加个icon,点击左icon轮播向左移动,点击右icon轮播向右,其实也不难,只需要修改left的位置就可以了,有兴趣就去试试吧
原生JS简单的无缝自动轮播的更多相关文章
- 原生js面向对象编程-选项卡(自动轮播)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 3、js无缝滚动轮播
另一个无缝滚动轮播,带暂停,由于js是异步,用C面向过程的思想开始会很怪异很怪异,因为当你定时器里面需要执行的函数时间比较长或是有一段延时时,异步的代码会完全不同,但习惯就好了. 这个代码有几个问题, ...
- 原生JS编写兼容IE6,7,8浏览器无缝自动轮播(带按钮切换)
项目要求页面兼容IE6,7,8等浏览器,我们可能会遇到这个轮播效果,轮播板块要求:无限循环.自动轮播和手动切换功能,每一次滚动一小格,网上有很多这类插件,例如:swiper等! 但是很多都是不兼容IE ...
- 原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
- js原生选项卡(包含无缝滚动轮播图)一
原生js选项卡的几种写法,整片文章我会由简及难的描述几种常用的原生选项卡的写法: Improve little by little every day! 1>基本选项卡: 思路:循环中先清除再添 ...
- Jquery+css实现图片无缝滚动轮播
Today,在XX学院的教学视频中,偶尔看到了Jquery+css实现图片无缝滚动轮播视频教程,虽然以前已写过类似的,但是我感觉他学的比较精简.为了方便以后做项目时直接拷贝,特地写出来,顺便和大家分享 ...
- 原生js和jquery实现图片轮播特效
本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...
- 原生js和jquery实现图片轮播特效(转)
本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...
- jQuery仿淘宝图片无缝滚动轮播
自己前天,也就是1月8日的时候早上自己写了一个图片滚动轮播(基于jQuery). 其实几个月以前就有朋友问过我怎么做出和淘宝上面一样的滚动轮播,一直到现在也没有真正的写好,这次写得差不多了. 但是还有 ...
随机推荐
- BFS算法(——模板习题与总结)
首先需要说明的是BFS算法(广度优先算法)本质上也是枚举思想的一种体现,本身效率不是很高,当数据规模很小的时候还是可以一试的.其次很多人可能有这样的疑问,使用搜索算法的时候,到底选用DFS还是BFS, ...
- Python时间系统
Python的time和datetime模块提供了时间日期工具, python中的时间有4种表示方式: datetime obj time obj/tuple posix timestamp time ...
- laravel 赋值
字符串形式: //C层 $res = '123456'; view( ' index/index ' , [ 'v' => $value ] ) ; //V层 原样输出: {$v} 操作: {m ...
- spring@value取不到值的几种情况
一,spring组件重写构造方法,在构造方法中引用@value为null 由于spring实例化顺序为先执行构造方法,再注入成员变量,所以序为先执行构造方法,再注入成员变量,所以ing实例化顺取值为n ...
- Crossing River(1700poj)
Crossing River Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 9919 Accepted: 3752 De ...
- AutoFac实现WebAPI依赖注入(EF以及Mysql)
什么是依赖注入? 我们以实际的例子来加以介绍 实体如下 public class Product { public int ID { get; set; } public string Name { ...
- Http升级到Https (本地测试,无须域名和认证)
在之前的语音识别的项目中,一切都在本地进行得很顺利,然后把写的Demo部署到服务器上给老大看的时候,通过IP访问(http://192.168.145.170:8080这样的形式)时,从一开始就坏掉了 ...
- 【学习笔记】--- 老男孩学Python,day2
今天正式上课的第一天,好害怕.好紧张.好激动.好兴奋! 第一天的课程还算是比较简单吧,因为之前断断续续学的就是这点东西,算是这些都比较熟了吧 今天学习了如下课程: 1. 简单计算机组成 2. pyth ...
- nodejs 通过nginx后出现响应慢的解决方法
最近用了nodejs搭建服务器,然后用了nginx做了反向代理,项目开发需求,没办法.但是发现了经过代理之后发现网页请求变慢了,而且是不能忍的一分钟以上. 一开始,怀疑是在nodejs那边的问题,结果 ...
- js-函数柯里化
内容来自曾探,<JavaScript设计模式与开发实践>,P49 函数柯里化(function currying)又称部分求值.一个currying的函数首先会接受一些参数,接受了这些参数 ...