话说轮播图效果是前端er学习JS的必经之路啊,很多同学写的第一个JS效果应该就是它了,在各大网站我们都会经常见到,但是无缝滚动运动效果的轮播图,对于小白们来说还是有一定难度的。
我们来看看思路吧~
首先我们要实现的效果有以下几点:
小圆点:点击小圆点显示与之对应的图片
向左和向右按钮:点击向左按钮图片向后运动,点击向右按钮图片向前运动
定时器:每隔 2s 自动播放
主要难点在于:
当图片运动到最后一张,点击向右的按钮时,应该显示第一张;
当前显示的是第一张,点击向左的按钮时,应该显示最后一张;
思路:
1、先将第一张图片复制 添加到 ul 最后面,将最后一张图片复制 添加到 ul 最前面(此时 ul 的第一张图片是pic3,最后一张图片是pic0);
2、当图片(ul)运动到pic3,继续向前运动,运动到最后一张pic0时,瞬间把 ul 拉回到第二张图片pic0的位置,然后在继续向前运动;
3、当图片(ul)向后运动到第一张图片pic3时,瞬间把 ul 拉回到倒数第二张图片pic3的位置。
4、还有非常关键的一点:定义iNow变量,用于对应当前显示的图片与ol中的小圆点,并且可以用来关联 ul 的位置。
html代码:
<div id="tab"> <ul> <li><img src="image/pic0.jpg" alt="" /></li> <li><img src="image/pic1.jpg" alt="" /></li> <li><img src="image/pic2.jpg" alt="" /></li> <li><img src="image/pic3.jpg" alt="" /></li> </ul> <ol> <li class="on"></li> <li></li> <li></li> <li></li> </ol> <a href="javascript:;" rel="external nofollow" rel="external nofollow" class="prev" id="prev"><</a> <a href="javascript:;" rel="external nofollow" rel="external nofollow" class="next" id="next">></a> </div>
css代码:
*{margin: 0; padding: 0;} li{ list-style: none;} #tab{ width: 670px; height: 240px; border: 1px solid #ccc; margin: 50px auto; position: relative; } #tab ul{ width: 2680px; height: 240px; position: absolute; left: 0; top: 0; overflow: hidden; } #tab ul li{ float: left; width: 670px; } #tab ul li img{ width: 670px; } #tab ol{ width: 80px; position: absolute; bottom: 10px; left: 50%; margin-left: -40px; overflow: hidden; } #tab ol li{ float: left; width: 10px; height: 10px; background: #ccc; border-radius: 50%; margin: 5px; cursor: pointer; } #tab ol .on{ background: #f00; } #tab .prev,#tab .next{ display: none; width: 40px; height: 60px; background: rgba(0,0,0,.3); filter:alpha(opacity:30); text-decoration: none; text-align: center; line-height: 60px; font-size: 30px; color: #fff; position: absolute; top: 50%; margin-top: -30px; } #tab .prev{ left: 0; } #tab .next{ right: 0; }
js 代码:
其中animate()是封装好的运动框架,最后面附有说明
window.onload = function(){ var oTab = document.getElementById('tab'); var oUl = oTab.getElementsByTagName('ul')[0]; var aLi1 = oUl.children; var oOl = oTab.getElementsByTagName('ol')[0]; var aLi2 = oOl.children; var prev = document.getElementById('prev'); var next = document.getElementById('next'); //设置ul的初始位置 var iNow = 1; oUl.style.left=-aLi1[0].offsetWidth*iNow+'px'; //定时器 var timer = null; //克隆第一张图片 添加在ul的最后面 var oLi1 = aLi1[0].cloneNode(true); //克隆最后一张图片 添加在ul的最前面 var oLi2 = aLi1[aLi1.length-1].cloneNode(true); oUl.appendChild(oLi1); oUl.insertBefore(oLi2,aLi1[0]); oUl.style.width = aLi1[0].offsetWidth*aLi1.length+"px"; //鼠标移入tab: 关闭定时器,左右按钮显示 oTab.onmouseover = function(){ clearInterval(timer); prev.style.display = 'block'; next.style.display = 'block'; } //鼠标移出tab: 开启定时器,左右按钮隐藏 oTab.onmouseout = function(){ timer = setInterval(function(){ toNext(); },2000); prev.style.display = 'none'; next.style.display = 'none'; } //点击小圆点 for(var i=0;i<aLi2.length;i++){ (function(index){ aLi2[index].onclick = function(){ iNow = index+1; for(var i=0;i<aLi2.length;i++){ aLi2[i].className = ''; } aLi2[index].className = 'on'; animate(oUl,{left: -iNow*aLi1[0].offsetWidth}); } })(i); } //上一个 prev.onclick=function(){ iNow--; animate(oUl,{left: -iNow*aLi1[0].offsetWidth},{complete:function(){ if(iNow == 0){ iNow = aLi1.length-2; oUl.style.left=-aLi1[0].offsetWidth*iNow+'px'; } for(var i=0;i<aLi2.length;i++){ aLi2[i].className = ''; } aLi2[iNow-1].className = 'on'; }}); } //下一个 next.onclick=function(){ toNext(); } function toNext(){ iNow++; animate(oUl,{left: -iNow*aLi1[0].offsetWidth},{complete:function(){ if(iNow == aLi1.length-1){ iNow = 1; oUl.style.left=-aLi1[0].offsetWidth*iNow+'px'; } for(var i=0;i<aLi2.length;i++){ aLi2[i].className = ''; } aLi2[iNow-1].className = 'on'; }}); } //设置定时器 timer = setInterval(function(){ toNext(); },2000); }
封装的animate()运动框架
/* * 参数说明: * obj: 运动对象 * json(json形式): 需要修改的属性 * options(json形式): * duration: 运动时间 * easing: 运动方式(匀速、加速、减速) * complete: 运动完成后执行的函数 */ function animate(obj,json,options){ var options=options || {}; var duration=options.duration || 500; //运动时间,默认值为500ms; var easing=options.easing || 'linear'; //运动方式,默认为linear匀速 var start={}; var dis={}; for(var name in json){ start[name]=parseFloat(getStyle(obj,name)); //起始位置 dis[name]=json[name]-start[name]; //总距离 } var count=Math.floor(duration/30); //总次数 var n=0; //次数 clearInterval(obj.timer); obj.timer=setInterval(function(){ if(n>count){ clearInterval(obj.timer); options.complete && options.complete(); }else{ for(var name in json){ switch(easing){ //匀速 case 'linear': var a=n/count; var cur=start[name]+dis[name]*a; //当前位置 break; //加速 case 'ease-in': var a=n/count; var cur=start[name]+dis[name]*a*a*a; break; //减速 case 'ease-out': var a=1-n/count; var cur=start[name]+dis[name]*(1-a*a*a); break; } if(name=='opacity'){ obj.style.opacity=cur; obj.style.filter = 'alpha(opacity='+cur*100+')'; //兼容IE8及以下 }else{ obj.style[name]=cur+'px'; } } } n++; },30); } //获取非行间样式 function getStyle(obj,sName){ return (obj.currentStyle || getComputedStyle(obj,false))[sName]; }
以上这篇原生JS实现图片无缝滚动方法(附带封装的运动框架)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持小牛知识库。
本文向大家介绍原生javascript实现图片无缝滚动效果,包括了原生javascript实现图片无缝滚动效果的使用技巧和注意事项,需要的朋友参考一下 图片水平无缝滚动效果在大量的网站都有应用,特别是一些企业网站在展示产品的时候,因为是动态效果,所以能够给网站增色不少,相比静态图片展示更能够吸引用户的注意力,下面就通过实例代码介绍一下如何实现此效果。 代码如下: 希望对大家学习javascript
本文向大家介绍原生js实现水平方向无缝滚动,包括了原生js实现水平方向无缝滚动的使用技巧和注意事项,需要的朋友参考一下 水平方向无缝滚动 滚动支持图片,文字 原理 :一个大的盒子中放置两个盒子,通过设置offsetWidth,scrollLeft的关系来实现,而且还用到定时器函数setInterval,当手指移动上去定义滚动,离开继续滚动。兼容各大浏览器。 HTML代码 CSS代码 Javascr
本文向大家介绍js实现无缝滚动图,包括了js实现无缝滚动图的使用技巧和注意事项,需要的朋友参考一下 效果如下: 代码如下: 以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持呐喊教程!
本文向大家介绍js实现图片无缝滚动特效,包括了js实现图片无缝滚动特效的使用技巧和注意事项,需要的朋友参考一下 首先,无缝滚动的第一个重点就是——动。关于怎么让页面的元素节点动起来,这就得学明白关于JavaScript中定时器的相关知识。 JS中的创建定时器的方法包括两种:setTimeout和setInterval。首先它们接收的参数相同:第一个参数是一个函数,用于定时器执行,第二个参数是一
本文向大家介绍Javascript 实现图片无缝滚动,包括了Javascript 实现图片无缝滚动的使用技巧和注意事项,需要的朋友参考一下 效果 : 鼠标移入图片 停止滚动, 鼠标移出自动滚动 可以调整向左或右方向滚动 以上是一个简单的布局,下面是主要的Javascript 代码 简单讲下思路: 首先设置ul 里面的图片一共有8张 oUl.innerHTML += oUl.innerHTML; 在
本文向大家介绍js代码实现无缝滚动(文字和图片),包括了js代码实现无缝滚动(文字和图片)的使用技巧和注意事项,需要的朋友参考一下 一款适用于方案和图片的JS无缝滚动代码,可控制向左或向右滚动,代码不算复杂,而且本无缝滚动代码兼容性也挺好,你几乎不需要修改什么代码,就能使用了。测试时候把那些带标号的方块都改成图片吧,这样就更有感觉了。 代码如下: 以上所述就是本文针对js代码实现无缝滚动(文字和图