js原生代码实现轮播图的实例讲解


Posted in Javascript onJuly 28, 2017

轮播图是现在网站网页上最常见的效果之一,对于轮播图的功能,要求不同,效果也不同。我们见过很多通过不同的方式,实现这一效果,但是有很多比较麻烦,而且不容易理解,兼容性也不好。在这里分享一下,用js原生代码,实现轮播图的常见效果!思路比较清晰,而且可重复性高,也几乎包含了现在网页上轮播实现的所有效果!

一、现在我们来看看它是什么样的效果,截一张图给大家看:

js原生代码实现轮播图的实例讲解

二、无论我们做什么特效,都要记住一个原则,先写静态的代码,再做动态的处理!

我们的轮播静态效果用html和css来实现:

1、为了代码的规范性,我们采用css和js外联的方式,如下:

js原生代码实现轮播图的实例讲解

2、body的部分也需要我们规范的命名:

js原生代码实现轮播图的实例讲解

好了,到这里我们们的html部分就结束了!现在框架已经搭建好,下一步是css样式设置了:

3、css样式的设置,灵活性比较大,因为这要根据我们的页面来做具体设置和规定,下面的效果仅供参考! 我们直接上代码:

/*内外边距的设置*/
* {
margin:0;
padding:0; 
}
/*图片在box中的位置*/
img {
vertical-align: top;
}
/*盒子box的整体样式*/
.css_box {
width: 500px;
height: 265px;
margin:100px auto;
position: relative;
overflow: hidden;
border: 1px solid green;
}
/*滚动盒子样式*/
.slider {
width: 500px;
height: 200px;
border: 1px solid red;

}
/*滚动盒子主要部分的样式*/
.slider-main {
border: 1px solid yellow;
width: 500px;
height: 200px;
}
/*滚动盒子主要部分的图片样式*/
.slider-main-img {
position: absolute;
top: 0;
left: 0;
width: 500px;
height: 200px;
}
.slider-main-img img {
width: 100%;
}
/*两侧滚动控制的样式*/
.slider_ctrl {
text-align: center;
padding-top: 25px;
}
/*这样的类名,在html中找不到,但是又起到了作用,所以只有可能是是在js中创建了这样的类名!*/
/*控制点选轮播图的样式*/
.slider-ctrl-con {
width: 24px;
height: 20px;
display:inline-block;
background:url(../images/icon.jpg) no-repeat -24px -782px;
margin: 0 5px;
cursor: pointer;
text-indent: -20em;
overflow: hidden;
}
.current {
background-position: -24px -762px;
}

/*滑动控制的两个span样式*/
.slider-ctrl-prev,.slider-ctrl-next {
position: absolute;
top: 50%;
margin-top: -35px;
background:url(../images/icon.jpg) no-repeat 6px top;
width: 30px;
height: 35px;
opacity: 0.8;
cursor: pointer;
}
.slider-ctrl-prev {
left: 0;
}
.slider-ctrl-next {
right: 0;
background-position: -6px -44px;
}
/*css样式到此暂时结束*/

好了,到此我们的静态的效果已经搭建好,要想实现我们需要的功能js是我们的核心,下面我们就用原生的代码来实现它:

关键技术一:我们的轮播图要动起来,利用定时器现在自动滚动的效果,图片的转换牵涉到了层叠,最后我们再考虑到浏览器的兼容问题!

做到这些,是我们js的第一步。等等,因为几乎所有的轮播都要实现这些效果,如果我们再能做一个封装,随时调用,那是不是就太完美了,

没错,我们就是要这么做!

我在这里封装了一个名叫animate的函数,函数封装完成后我们只需要调用即可实现:

// 这是一个运动框架,而且是多属性的!
// 创建一个名为animate的函数!obj为对象,json是json值,fn是回调函数!
function animate(obj,json,fn) 
{ 
clearInterval(obj.timer);//清除定时器,这一步是有影响的!
// 给对象设置一个定时器!
obj.timer = setInterval(function() 
{
var flag = true; //用来判断定时器什么时候停止!

//for in 循环,遍历json对象! 
for(var attr in json){ 

var current = 0;
// 当前的状态,这一步很重要!
if(attr == "opacity")
{
current = parseInt(getStyle(obj,attr)*100);
}
else
{
current = parseInt(getStyle(obj,attr));
}
// 步长!
var step = ( json[attr] - current) / 10; 
step = step > 0 ? Math.ceil(step) : Math.floor(step);

// 判断透明度!
if(attr == "opacity") 
{ //in是一个二元的运算符,意思是第一个操作数的值是第二个操作数的属性名,会返回true!
// 这样就可以判断这个对象的样式上中是否有opacity的属性了!
if("opacity" in obj.style) 
{
// 如果条件成立,设置透明度值
obj.style.opacity = (current + step) /100;
}
else
{ 
// 如果不成立,则使用滤镜功能!

obj.style.filter = "alpha(opacity = "+(current + step)+")";

}
}

// 层叠!
else if(attr == "zIndex")
{
obj.style.zIndex = json[attr];
}
else
{
obj.style[attr] = current + step + "px" ;
}
// 截止值!
if(current != json[attr]) 
{
flag = false;
}
}
if(flag) 
{
clearInterval(obj.timer);
// 如果有回调就使用回调!
if(fn) 
{
fn(); 
}
}
},5)
}
// 考虑兼容性问题!
function getStyle(obj,attr) { 
if(obj.currentStyle) 
{
return obj.currentStyle[attr]; 
}
else
{
return window.getComputedStyle(obj,null)[attr]; 
}
}
// 多属性运动框架结束!

关键技术二:有了animate的封装函数, 为我们节省了不少的力气,可是我们面对不用的要求还要

有不同的效果啊,下面就让我们来实现具体的效果!

1、我们使用js的从古到今没有变过的第一步:获取所有需要的元素,即是DOM的操作:

js原生代码实现轮播图的实例讲解

2、进行for循环,开始遍历所有的图片内容:

js原生代码实现轮播图的实例讲解

3、遍历按钮:

js原生代码实现轮播图的实例讲解

js原生代码实现轮播图的实例讲解

4、设置setSquare函数:

js原生代码实现轮播图的实例讲解

5、设置定时器:

js原生代码实现轮播图的实例讲解

6、鼠标经过的时候的效果:

js原生代码实现轮播图的实例讲解

以上这篇js原生代码实现轮播图的实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
tagName的使用,留一笔
Jun 26 Javascript
jquery对dom的操作常用方法整理
Jun 25 Javascript
javascript工厂方式定义对象
Dec 26 Javascript
Javascript中String的常用方法实例分析
Jun 13 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
Jan 23 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
Jul 27 Javascript
vue 动态绑定背景图片的方法
Aug 10 Javascript
浅谈v-for 和 v-if 并用时筛选条件方法
Nov 07 Javascript
vue.js this.$router.push获取不到params参数问题
Mar 03 Javascript
详解vue-router的Import异步加载模块问题的解决方案
May 13 Javascript
js实现tab栏切换效果
Aug 02 Javascript
axios封装与传参示例详解
Oct 18 Javascript
js弹性势能动画之抛物线运动实例详解
Jul 27 #Javascript
js学习总结之dom2级事件基础知识详解
Jul 27 #Javascript
Angular指令之restict匹配模式的详解
Jul 27 #Javascript
Angularjs的$http异步删除数据详解及实例
Jul 27 #Javascript
js学习总结之DOM2兼容处理this问题的解决方法
Jul 27 #Javascript
Angularjs的键盘事件的绑定
Jul 27 #Javascript
Angularjs 事件指令详细整理
Jul 27 #Javascript
You might like
用Simple Excel导出xls实现方法
2012/12/06 PHP
php命令行使用方法和命令行参数说明
2014/04/08 PHP
php利用header函数下载各种文件
2016/08/24 PHP
javascript英文日期(有时间)选择器
2007/05/02 Javascript
兼容IE和FF的js脚本代码小结(比较常用)
2010/12/06 Javascript
jQuery参数列表集合
2011/04/06 Javascript
javascript加号"+"的二义性说明
2013/03/04 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
2013/08/06 Javascript
在jquery中combobox多选的不兼容问题总结
2013/12/24 Javascript
js获取元素相对窗口位置的实现代码
2014/09/28 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
2016/03/05 Javascript
jQuery设计思想
2017/03/07 Javascript
js鼠标经过tab选项卡时实现切换延迟
2017/03/24 Javascript
NodeJs中express框架的send()方法简介
2017/06/20 NodeJs
Angular 表单控件示例代码
2017/06/26 Javascript
angularjs路由传值$routeParams详解
2020/09/05 Javascript
vue2实现数据请求显示loading图
2017/11/28 Javascript
JS实现求字符串中出现最多次数的字符和次数示例
2019/07/05 Javascript
[48:35]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 TNC vs Optic
2018/04/03 DOTA
详谈python3 numpy-loadtxt的编码问题
2018/04/29 Python
对numpy中的transpose和swapaxes函数详解
2018/08/02 Python
influx+grafana自定义python采集数据和一些坑的总结
2018/09/17 Python
python 实现UTC时间加减的方法
2018/12/31 Python
python正则表达式匹配IP代码实例
2019/12/28 Python
python3.6连接mysql数据库及增删改查操作详解
2020/02/10 Python
python中Django文件上传方法详解
2020/08/05 Python
迪拜领先运动补剂零售品牌中文站:Sporter商城
2019/08/20 全球购物
高中生学习生活的自我评价
2013/11/27 职场文书
课程设计心得体会
2013/12/28 职场文书
大学生两会学习心得体会
2014/03/10 职场文书
捐助倡议书范文
2014/04/15 职场文书
班组建设经验交流材料
2014/05/12 职场文书
迎七一演讲稿
2014/09/12 职场文书
教师工作表现自我评价
2015/03/05 职场文书
idea以任意顺序debug多线程程序的具体用法
2021/08/30 Java/Android
分析SQL窗口函数之排名窗口函数
2022/04/21 Oracle