原生JS实现幻灯片轮播效果
在以往的认知中,一直以为用原生JS写轮播是件很难得事情,今天上班仿照网上的写了一个小demo。小试牛刀。
大致效果:
html结构很简单,两个列表,一个代表图片列表,一个是右下角序号列表。
<div id="box">
<ul class="list">
<li><img src="01.jpg" width="490" height="170" /></li>
<li><img src="02.jpg" width="490" height="170" /></li>
<li><img src="03.jpg" width="490" height="170" /></li>
<li><img src="04.jpg" width="490" height="170" /></li>
<li><img src="05.jpg" width="490" height="170" /></li>
</ul>
<ul class="count">
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
布局的大致想法是图片全部绝对定位重合,透明度为1,右下角序号给选中的添加样式。样式都很简单。
关于JS方面,自己还是捉摸了很久,刚开始实现时,当鼠标移入右下角对应序列号时图片能够准时切换,但是鼠标移出时便不能自动播放,关于setInterval和clearInterval自己的处理还是不是很好。借鉴了网上的案列之后,具体的实现逻辑简单为,先写一个图片的展现方法,和鼠标移出图片时的定时函数。这样可以在事件中直接调用,值得注意的一点就是在鼠标移入时,记得清除定时器。下面上代码:
这是图片展示函数,参数为当前的展示的index。先让所有图片透明度为0;所有下标没有样式,然后给当前的加上样式,透明度为1;
function show(a){
for(var i=0;i<oLi.length;i++){
oLi[i].style.opacity= 0;
oImg[i].className = '';
}
oLi[a].style.opacity = 200;
oImg[a].className = 'current';
}
然后写一个鼠标移除时的定时器,图片自动轮播函数:
function autoplay(){
time = setInterval(function(){
b++;
if(b>=oImg.length){
b=0;
}
show(b);
},1000);
}
autoplay();//自动运行
最后是鼠标移入移出事件:
for(var i=0;i<oImg.length;i++){
oImg[i].index = i;
oImg[i].onmouseover=function(){
clearInterval(time);
show(this.index)
}
oImg[i].onmouseout=function(){
autoplay();
}
}
代码只是写了一个结构骨架,实现大致效果,具体可以优化的地方还有很多,对于动效方面可以对透明度的改变设置一个函数,让透明度缓慢变成1,或者对图片的定位和移动方向进行改变,实现真正意义上的左右轮播。大致原理都是差不多的。
原生JS实现轮播,于我而言还是有点小难度的,因为JS写的比较少,所以对于整体的逻辑把握不好,虽有曲折,但是靠着自己也是写了出来。
总结一些轮播遇到的大致困难,第一个是对于鼠标移出时的定时自动轮播,刚开始自己是写在事件onmouseout里面的,但是测试过程中发现事件只会触发一次,所以导致轮播不能执行,所以选择在重新写了一个方法。第二个就是对于函数的传参问题,我写函数一直没有传参的习惯,都是匿名函数,虽然知道适用场景不同,对函数的运用应该灵活,可能是因为做的项目太少,经验还是太不足,第三个就是细节方面,例如移入时清除定时器,轮播要先执行一次等。总之收获还是很大的。
感谢阅读。
原生JS实现幻灯片轮播效果的更多相关文章
- 原生js实现图片轮播效果
思路:设置父容器(一定宽度,一定高度,相对定位,子容器超出部分进行隐藏),子容器图片并排(浮动,绝对定位,每次点击进行相应的左或右偏移量) 1.html: <!DOCTYPE html> ...
- 原生JS实现简易轮播图
原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...
- 原生js实现无缝轮播
原生js实现无缝轮播 因为要做到无缝,所以就要把第一张图片和最后一张连接起来,在此处采用js克隆了第一张图片的节点,添加到最后,显示图片序号的小圆按钮也是使用js动态添加的. html部分 <d ...
- 用jQuery基于原生js封装的轮播
我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址 ...
- jQuery与原生js实现banner轮播图
jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...
- 原生js实现图片轮播思路分析
一.复习原生js实现图片轮播 1.要点 自动轮播 点击小圆圈按钮,显示相应图片 点击左右箭头,实现向前向后轮播图片 2.实现思路 <div id="container"> ...
- 自己用原生JS写的轮播图,支持移动端触屏滑动,面向对象思路。分页器圆点支持click和mouseover。
自己用原生javascript写的轮播图,面向对象思路,支持移动端手指触屏滑动.分页器圆点可以选择click点击或mouseover鼠标移入时触发.图片滚动用的setInterval,感觉setInt ...
- html中使用JS实现图片轮播效果
1.首先是效果图,要在网页中实现下图的轮播效果,有四张图片,每张图片有自己的标题,然后还有右下角的小方框,鼠标悬浮在小方框上,会切换到对应的图片中去. 2.先是HTML中的内容,最外层是轮播图整个的容 ...
- 自己用原生JS写的轮播图,支持移动端触摸滑动,分页器圆点可以支持mouseover鼠标移入和click点击,高手看了勿喷哈
自己用原生JavaScript写的轮播图,分页器圆点按钮可支持click点击,也可支持mouseover鼠标悬浮触发,同时支持移动端触摸滑动,有兴趣的友友可以试试哈,菜鸟一枚,高手看了勿喷,请多多指正 ...
随机推荐
- 解决Scrapy抓取中文结果保存为文件时的编码问题
import json import codecs # Define your item pipelines here # # Don't forget to add your pipeline to ...
- 如何成为一名优秀的web前端工程师(前端攻城师)?
程序设计之道无远弗届,御晨风而返.———— 杰佛瑞 · 詹姆士 我所遇到的前端程序员分两种:第一种一直在问:如何学习前端?第二种总说:前端很简单,就那么一点东西. 我从没有听到有人问:如何做一名优秀. ...
- PHP 遍历文件目录
/********************** 一个简单的目录递归函数 第一种实现办法:用dir返回对象 ***********************/ function tree($directo ...
- Preferred Java way to ping a HTTP Url for availability
I need a monitor class that regularly checks whether a given HTTP URL is available. I can take care ...
- hdoj 3665 Seaside【最短路】
Seaside Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Sub ...
- 【oracle】触发器简单实现
目标:实现实时备份uertest表数据至usertest_temp中,两表结构一致 解决:用oracle触发器实现同步 结果: 1.建表 -- 简单的用户表 create table USERTEST ...
- cocos 事件分发2
cocos的事件分发器CCTouchDispatcher,存在两个通道, m_pTargetedHandlers存储CMenu,CScrollView的事件处理器, 这里的处理器,在处理过消息后,会声 ...
- IO(Input Output)流__字节流
续: ------->>>>字节流 IntputStream OutputStream 需求:想要操作图片数据,就需要用到字节流. 读写操作: FileOutputStrea ...
- Java和Tomcat类加载机制
转自:http://blog.csdn.net/codolio/article/details/5027423 加载类是运行程序的基础,了解Java和Tomcat的类加载机制对更有效地开发.调试Web ...
- 简约的返回顶部效果(jQuery)
博客建好也快一个月了,主题是在原有主题的基础上做的修改,喜欢这样的清新简约风格,为了更好的体验,以后也会经常做修改. 一般博客的文章都比较长,看到下面不能快速返回到顶部还真是不方便,今天自己动手写了一 ...