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 相关文章推荐
use jscript List Installed Software
Jun 11 Javascript
javascript面向对象的方式实现的弹出层效果代码
Jan 28 Javascript
jQuery取得设置清空select选择的文本与值
Jul 08 Javascript
jquery datatable后台封装数据示例代码
Aug 07 Javascript
JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
Mar 02 Javascript
Javascript中的arguments对象
Jun 20 Javascript
DOM 事件的深入浅出(二)
Dec 05 Javascript
详谈js对url进行编码和解码(三种方式的区别)
Aug 16 Javascript
详解Vuex管理登录状态
Nov 13 Javascript
webpack打包node.js后端项目的方法
Mar 10 Javascript
20个必会的JavaScript面试题(小结)
Jul 02 Javascript
vue视频播放插件vue-video-player的具体使用方法
Nov 08 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
PHP文章按日期(月日)SQL归档语句
2012/11/29 PHP
深入mysql_fetch_row()与mysql_fetch_array()的区别详解
2013/06/05 PHP
YII框架模块化处理操作示例
2019/04/26 PHP
一实用的实现table排序的Javascript类库
2007/09/12 Javascript
浮动的div自适应居中显示的js代码
2013/12/23 Javascript
nodejs之请求路由概述
2014/07/05 NodeJs
jQuery oLoader实现的加载图片和页面效果
2015/03/14 Javascript
js操作table元素实现表格行列新增、删除技巧总结
2015/11/18 Javascript
全屏滚动插件fullPage.js使用实例解析
2016/10/21 Javascript
JS实现的相册图片左右滚动完整实例
2016/11/23 Javascript
基于JavaScript实现轮播图原理及示例
2020/04/10 Javascript
angularJS的radio实现单项二选一的使用方法
2018/02/28 Javascript
JavaScript生成指定范围的时间列表
2018/03/19 Javascript
JS实现二维数组元素的排列组合运算简单示例
2019/01/28 Javascript
node基于async/await对mysql进行封装
2019/06/20 Javascript
Node.js 中判断一个文件是否存在
2020/08/24 Javascript
js实现随机点名功能
2020/12/23 Javascript
[01:18:36]LGD vs VP Supermajor 败者组决赛 BO3 第一场 6.10
2018/07/04 DOTA
Python解释执行原理分析
2014/08/22 Python
Python实现遍历windows所有窗口并输出窗口标题的方法
2015/03/13 Python
简单介绍使用Python解析并修改XML文档的方法
2015/10/15 Python
Python中的字符串操作和编码Unicode详解
2017/01/18 Python
django认证系统实现自定义权限管理的方法
2018/07/16 Python
PyQt4 treewidget 选择改变颜色,并设置可编辑的方法
2019/06/17 Python
python for循环remove同一个list过程解析
2019/08/14 Python
python实现同一局域网下传输图片
2020/03/20 Python
Python3.7 读取音频根据文件名生成脚本的代码
2020/04/07 Python
Python3如何使用range函数替代xrange函数
2020/10/05 Python
购买中国最好的电子产品:Geekbuying
2018/03/13 全球购物
bonprix荷兰网上商店:便宜的服装、鞋子和家居用品
2020/07/04 全球购物
公务员政审个人鉴定
2014/02/25 职场文书
公共机构节能宣传周活动总结
2014/07/09 职场文书
房地产经营管理专业自荐信
2014/09/02 职场文书
幸福来敲门观后感
2015/06/04 职场文书
2016年学校党支部创先争优活动总结
2016/04/05 职场文书
mysql字符串截取函数小结
2021/04/05 MySQL