JS实现轮播-初学笔记 - 简书
JS实现轮播-初学笔记
前端学习时间不长，最近看完了第一遍高设，想着试着写一点东西，于是有了这个还不算好的轮播效果。（学习出处为慕课网）
首先，应该清楚将要实现的功能，我实现的功能主要为：
鼠标滑过图片时左右两边的箭头出现，并且鼠标放在箭头上时箭头透明度降低
点击左右箭头实现图片无限轮播
图片下方圆点按钮会随着图片轮播而变化
点击任意圆点按钮，图片能正确定位到相关位置
鼠标移出图片时，图片按照一定时间间隔自动轮播，鼠标放入图片时，暂停自动播放
接下来就是实现各个功能：
1、鼠标滑过效果
鼠标滑过效果可以直接通过伪类选择符hover实现
.arrow{ cursor://鼠标放入箭头时显示为小手的形状 display://鼠标未滑入图片时，不显示效果 line-height: 40text-align:font-size: 36font-weight:width: 40height: 40 position://说明以父容器为定位基准 z-index: 2;//此标签说明本部分与其他部分相比更靠近人 top: 180background-color:#000; opacity: 0.3; //设置箭头出现的透明度 color:# }
在鼠标滑过箭头时只需要改变箭头的透明度
.arrow:hover{ opacity: 0.7; }
由于之前定义了display:，所以现在要将其显示出来
#carousel:hover .arrow{ display: }
2、点击箭头实现轮播
通过观察控制台可以发现，在进行图片轮播时，改变的其实是图片left:00px的值，也就是说只要能有一个函数，在鼠标点击箭头时准备定位此时图片的left值，就能实现图片的切换。
function animate(offset){ var left = parseInt(picture.style.left) + picture.style.left = left + 'px'; } next.onclick = function() { animate(-600px);//点击右箭头 } prev.onclick = function() { animate(600px);//点击左箭头 }
但是上述方法不能实现无限滚动的效果，也就是说鼠标一直往一个方向点击时，会出现空白页，所以进行以下优化：
在图片轮播到第一张后再次点击箭头，图片的left值将会变大，也就是说如果想要从第一张跳转到最后一张，可以加上最后一张的附属图，并将它的left值变为最后一张图的left值，从而实现跳转。
function animate(offset){ var left = parseInt(picture.style.left) + if (left &-600) { picture.style.left = -3000 + 'px'; } if (left &-3000) { picture.style.left = -600 + 'px'; } }
3、点击圆点按钮实现图片切换
每一个按钮都设置了一个index值，用来显示图片序号。首先要实现圆点点亮功能。
在css定义了一个圆点亮起的效果：
#button .on{ background: # }
定义一个方法来点亮圆点：
function showbutton(){ for (var i = 0; i&button. i++) {//遍历圆点 if (button[i].className == 'on') {//如果遍历到的圆点亮着，则去掉，防止圆点一起亮起 button[i].className=''; } } button[index-1].className='on';//将当前按钮变为亮着 } prev.onclick=function(){ if (index == 1) {//如果没有此判断，index值将会一直减小，如果当前index为1，说明是第一个按钮，下一个按钮的index值为5 index = 5; } else{ index -= 1; } showbutton(); animate(600); }
现在要实现圆点按钮的任意切换，此时图片切换的原理与上述箭头切换一样，都是通过偏移量来进行切换，此时是通过index的值进行切换。
for (var i = 0; i & button. i++) { button[i].onclick = function(){ if (this.className == 'on') {//跳出函数，当点击当前页面的按钮时，不进行for循环 } var newindex = parseInt(this.getAttribute('index'));//获取目标值 var offset = -600 * (newindex - index); animate(offset); index = showbutton();//点击后需要显示按钮 }
4、设置图片切换速度，CSS3有一个过渡属性transition属性，但这个属性不能用在这里，试过之后可以发现图片切换的顺序实际上是，而我们要的效果是，所以这里需要使用js。本效果使用setTimeout()方法来实现，每隔10ms,执行一次go()。
function animate(offset){ if(offset == 0){ } animated = var time =300; var interval = 10;//图片切换一下的时间 var speed = offset/(time/interval);//设置图片的切换速度 var left = parseInt(picture.style.left) + var go = function(){ if ((speed & 0 && parseInt(picture.style.left) & left) || (speed & 0 && parseInt(picture.style.left) & left)) { picture.style.left = parseInt(picture.style.left) + speed +'px'; setTimeout(go,interval); } else{ picture.style.left = left +'px'; if(left&-200){ picture.style.left = -600 * len + 'px'; } if (left&(-600 *len)) { picture.style.left = '-600px'; } animated = } } go(); }
5、实现自动切换
自动切换使用了定时器，在一个时间间隔里，执行点击右箭头的方法。
function play(){ var timer = setTimeout(function(){ next.onclick(); play(); },interval); }
在鼠标放在图片上时，自动切换暂停，因此需要清楚定时器。
function stop(){ clearTimeout(timer); }
最后通过以下方式，实现此功能：
carousel.onmouseover = carousel.onmouseout = play();
虽然成功实现了轮播效果，但是在代码优化上还有很多需要改进的地方。目前还处于前端小白阶段，希望在接下来的学习中能有所提高。
（本文可能存在很多漏洞，希望众大神能批评指出，感谢！）
你所要的，岁月都会给你。
进入前端将近一年了，js还是很弱，突发奇想写一个轮播图，就找到了这个博主的材料，和大家分享。 轮播图的原理： 一系列的大小相等的图片平铺，利用CSS布局只显示一张图片，其余隐藏。通过计算偏移量利用定时器实现自动播放，或通过手动点击事件切换图片。 Html布局 首先父容器co...
原理 图片轮播原理：将一系列大小相等的图片平铺，利用css布局只显示一张图片，其他图片隐藏，通过计算偏移量利用定时器自动切换图片，或者手动点击切换图片。 样式布局 关于图片列表的布局，这里在js中使用style.left这个属性计算偏移量来进行图片的切换。而在style.l...
通过学习，我理解了图片轮播原理，学习了setTimeout()、setInterval()函数设置定时器与清除定时器clearInterval()函数，使用函数递归实现图片滑动切换，采用辅助图片实现图片无限滚动等编程技巧。 一、焦点图轮播特效之原理 这个焦点图轮播特效将运用...
用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金Cover 有什么料？ 从这篇文章中你能获得这些料： 知道setContentView()之后发生了什么？ ... Android 获取 View 宽高的常用正确方式，避免为零 - 掘金相信有很多朋友...
用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料？ 从这篇文章中你能获得这些料： 知道setContentView()之后发生了什么？ ... Android 获取 View 宽高的常用正确方式，避免为零 - 掘金 相信有很多...
——塌城 想成为这样的人，活得坦坦荡荡，问心无愧，保持一颗善良的心，不论别人怎样看待自己的善良，都可以坚守自己的原则。 想成为这样的人，不会轻易放弃自己的追求，不会让机会白白溜走，哪怕在别人看来是顽固的，也要勇敢地追一个梦。 想成为这样的人，可以活得洒脱，没有那么多顾虑，在...
足球运动是我们大家所熟悉的体育项目，想必大家对于足球运动具有一些了解吧。足球运动对于我们的身体健康是有非常大的好处，而我们在进行足球运动之前，我们就需要对足球运动的注意事项。现在我们就一起来看看足球运动注意事项以及好处吧！
足球运动的好处有哪些？ 1、增强体质：由于足球...
不管现在你是卡奴，房奴还是车奴，都应该了解清楚到底是什么导致你的钱从腰包源源不断流出，而不是流入。 永远不知道钱花在哪里了。 总觉得钱不够用。 每个月的各种贷款都让我焦头烂额。 如果你有以上问题出现时，请不要视而不见，因为这极有可能表示你的财务状况已经亮起了黄灯！而这一切的...最新的JS面试题解析
原创
 13:54:30
613
对于一个web前端来说，面试的时候一定也会遇到一些JS的面试题，今天给大家总结归纳一些最新的JS面试题，每道题都让人印象深刻预解析：在当前作用域下，js运行之前，会把带有var和function关键字的事先声明，但不会赋值（个人见解）对预解析印象深刻，并不是因为难，而是要细心，稍微一粗心，答案就写错了！我遇到预解析的题目不止一道，有两道我现在还能记住，我说下！2-1.预解析1alert(a)
var a=3;function a(){
a();------------分割线------------------alert(a)
var a=function(){
a();看到这个代码，当时答错了。后来请教了朋友，然后自己再理解下，就理顺了！考点其实就两个，第一变量声明提前，第二函数声明优先于变量声明！下面我简单分析一下，第一部分运行结果：1.函数声明优先于变量声明，所以，刚开始，a就是function a(){alert(10)} ，就会看到这个函数。2.a()，执行函数，就是出现alert(10)3.执行了var a=3; 所以alert(a)就是显示34.由于a不是一个函数了，所以往下在执行到a()的时候， 报错。第二部分运行结果：1.underfind2.报错在之前说过，预解析是把带有var和function关键字的事先声明，但不会赋值。所以一开始是underfind，然后报错是因为执行到a()的时候，a并不是一个函数。//，和变量声明同等var a=function(){
}//函数声明，优于变量声明
function a(){
}2-2.预解析和作用域var a=0;function aa(){
}//结果是什么都没发生，因为要执行aa函数才会执行alert(0)------------分割线1------------------var a=0;function aa(){
aa();//underfind
在aa函数里面，有var a=3，那么在aa作用域里面，就是把a这个变量声明提前，但是不会赋值，所以是underfind------------分割线2------------------var a=0;function aa(a){
alert(a)//5,0
在函数体内，参数a的高于变量a------------分割线3------------------var a=0;function aa(a){
a=3}aa(5)alert(a)//5,0
在函数体内，执行alert(a)和a=3,修改的的并不是全局变量a，而是参数a------------分割线4------------------var a=0;function aa(a){
aa(5)//5,3//这个我也有点不理解，请教网上的说法，有两个答案(小伙伴如果知道怎么理解，欢迎在评论上指点)//1.参数优先级高于变量声明，所以 变量a的声明其实被忽略了，此时相当于//var a=0;//function aa(a){//
var a=5;//
alert(a)//
alert(a)//}//aa(5)//2.形参和局部变量优先级一样，此时相当于//var a=0;//function aa(a){//
由于形参和称一样，覆盖了！//
alert(a)//
alert(a)//}//aa(5)------------分割线5------------------var a=0;function aa(a){
//underfind
0//首先，参数优先级高于全局变量，由于没传参数，所以是underfind//a=3，实际上修改的时形参a的值，并不是全局变量a，往下alert(a)也是形参a//最后的alert(a)，你懂的3.循环与递归3-1.费波纳茨数组这个不多说了，很简单，但是很经典。就是当前项等于前两项的和var arr=[];for(var i=0;i&10;i++ ){
i&=1?arr.push(1):arr.push(arr[i-1]+arr[i-2]);
console.log(arr)3-2.数据排列比如 这个怎么做呢？当时我的做法的分两步写，先展示前面，再展示后面代码是//
//先展示前面的
//n：开始的数字
m:结束的数字function num1(n,m){
for(var i=n;i&m;i++){
//再展示后面的 543210
console.log(i);
if(i===m-1){
}function num2(n,m){
for(var i=m;i&=n;i--){
console.log(i)
//2345432这样代码太多了，后来研究了这种function num(n,m){
console.log(n);
num(n+1,m);
console.log(n);
//2345432解释如下1.首先执行num(2,5)，就是console.log(2); -&
console.log(2);
//执行num(3,5);
就是是相当于
console.log(3); -& num(4,5); -& console.log(3); 下面以此类推
console.log(2); -& console.log(3); -& num(4,5); -& console.log(3); -&
console.log(2);然后就是console.log(2); -& console.log(3); -& console.log(4); -& num(5,5); -& console.log(4); -& console.log(3); -&
console.log(2);最后就是console.log(2); -& console.log(3); -& console.log(4); -& console.log(5); -& console.log(4); -& console.log(3); -&
console.log(2);相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！相关阅读：以上就是最新的JS面试题解析的详细内容，更多请关注php中文网其它相关文章！
江湖传言：PHP是世界上最好的编程语言。真的是这样吗？这个梗究竟是从哪来的？学会本课程，你就会明白了。
PHP中文网出品的PHP入门系统教学视频，完全从初学者的角度出发，绝不玩虚的，一切以实用、有用...
点击数(110219)
ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)－ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例，从最基本的框架常识开始，将...
点击数(108101)
《php.cn原创html5视频教程》课程特色：php中文网原创幽默段子系列课程，以恶搞，段子为主题风格的php视频教程！轻松的教学风格，简短的教学模式，让同学们在不知不觉中，学会了HTML知识。
点击数(82994)
本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。
点击数(82227)
所有计算机语言的学习都要从基础开始，《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术，是学习PHP必须掌握的内容，任何PHP项目的实现都离不开这部分的内容，通...
点击数(79404)
php中世界最好的语言
全栈工程师
文章总浏览数
相关视频章节js递归函数怎么实现结果为_百度知道
js递归函数怎么实现结果为
用js递归函数写出，，最后输出结果为...
用js递归函数写出，，最后输出结果为
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
来自知道合伙人认证行家
互联网类行家
采纳数：21741
获赞数：17870
2011年中山职业技术学院毕业，现担任毅衣公司京东小二
递归就是本身调用自己。 如n!=n(n-1)! 你定义函数f(n)=nf(n-1) 而f(n-1)又是这个定义的函数。。这就是递归。
实现递归。简单说来从未知的推到已知的 如：3!=3*2! 2!=2*1！ 1！=1（已知的）
然后从已知再返回调用给上一层。到你所要求的 1!=1（已知） 2！=2*1！=2*1=2 3！=3*2！=3*2=6 递归结束
为你推荐：
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。}