基于JavaScript实现焦点图轮播效果


Posted in Javascript onMarch 27, 2017

     不管是高校的网站还是电商的页面,焦点图的切换和轮播应该是一项不可或缺的应用。今天把焦点图轮播制作的技术要点做下笔记,以供日后查看。 

一、结构层(HTML)

焦点图的HTML结构很简单,就是一个父容器(id=box),包含三个子容器,分别存放图片(id=pics)、底部按钮(id=dots)、作用切换箭头(class=turn)。加上样式后就是下图二的布局。

基于JavaScript实现焦点图轮播效果

基于JavaScript实现焦点图轮播效果

二、表示层(CSS)

页面的表现和风格总是离不开CSS。为叙述方便,后面采用id选择符名或类选择符名代表各div模块。

1.box

box作为父容器,是整个焦点图轮播结构在网页的直观表现,它的宽高就是要显示的图片的宽高。我将图片设置为宽600px、高400px,使父容器box居中显示,并加了阴影。样式大概都可以随自己爱好设置,但溢出一定要隐藏,定位一定要设置为相对定位,以使子容器的绝对定位准确。

#box{
 width: 600px;
 height: 400px;
 margin-top: 100px;
 margin-left: auto;
 margin-right: auto;
 overflow: hidden;
 position: relative;
 box-shadow: 10px 10px 5px #888;
}

 2.pics

 

pics用于放置图片,因为是制作左右切换功能,高仍是一张图片的高,但宽=(展示的图片数量+2)*图片宽,原因在行为层再说明。

另外需要注意的是,由展示图片可知,pics在左右切换箭头和底部切换按钮的下层,所以z-index要设为1。

#pics{
 width: 5400px;
 height: 400px;
 position: absolute;
 z-index: 1;
}

3.dots

z-index设为2,置为上层显示;定位为绝对定位;其他样式随喜好。这里我设置了鼠标滑过的样式,以及配合js对应图片位置改变的样式(on)。

#dots{
 width: 120px;
 height: 10px;
 position: absolute;
 bottom: 25px;
 left: 40%;
 z-index: 2;
}
 
#dots span{
 width: 10px;
 height: 10px;
 float: left;
 margin-right: 5px;
 background: #333;
 border: solid 1px #FFF;
 border-radius: 50%;
 cursor: pointer;
}
 
#dots .on{background: orangered;}
#dots span:hover{background: orangered;}

4.turn

左右箭头的重要样式与dots一致,其他自定义。这里我设置了鼠标滑过box,才显现箭头。

.turn{
 width: 40px;
 height: 40px;
 color: #fff;
 background: orangered;
 line-height: 39px;
 text-align: center;
 font-size: 36px;
 font-weight: bold;
 opacity: 0.5;
 position: absolute;
 top: 180px;
 display: none;
 z-index: 2;
 cursor: pointer;
}
.turn:hover{opacity: 0.8;}
#box:hover .turn{display: block;}

至此页面的样式和布局完成,但行为层方法和功能的实现才是重点。

三、行为层(JavaScript)

定义函数前,先在全局作用域中获得页面的节点。

var box = document.getElementById('box');
var pics = document.getElementById('pics');
var dots = document.getElementById('dots').getElementsByTagName('span');
var pre = document.getElementById('pre');
var next = document.getElementById('next');

1.图片切换动画

轮播图的核心方法,在于图片的切换动画。而此函数的重点,是接收一个位移量offset,然后改变pics相对于box的left值,从而对图片进行显示。

之前CSS设置的,box的宽为600px,但pics的宽却为5400px,由于box溢出隐藏,所以页面只会显示一张图片;通过接收具体位移量offset,改变left值(减去或加上n个图片宽度),就可以改变显示的图片。

此外还有两个问题,如果不设置图片切换的速度,图片就会整张整张的变换,没有进入切换的效果;而且如果不停的点击切换,就会消耗太多的内存造成电脑卡机,出现页面停在前一张图未切换完就出现下一张等情况。所以要对图片做一个速度处理,以及一张图片为切换完就不允许其他切换的设置。

//图片切换函数
 function turn(offset){ 
 turned = true; //切换允许标志,在全局作用域中定义,true表示关闭允许切换
 var new_left = parseInt(pics.style.left) + offset; //最后left值
 var total_time = 300; //位移总时间
 var interval = 10; //每次位移间隔时间
 var speed = offset/(total_time/interval); //位移速度——每次位移量

 function go(){
 if((speed < 0 && parseInt(pics.style.left) > new_left) || (speed > 0 && parseInt(pics.style.left) < new_left)){ //右切||左切
 pics.style.left = parseInt(pics.style.left) + speed +'px';
 setTimeout(go,interval);
 }else{
 turned = false; //已切换完毕,开启允许切换
 pics.style.left = new_left +'px';
 if( new_left < -4200){
  pics.style.left = -600 +'px';
 }
 else if( new_left > -600){
  pics.style.left = -4200 +'px';
 }
 }
 }
 go();
 }

2.箭头切换

在图片切换函数turn()基础上传入参数。因为是左右切换,所以每次直接传入一个图片宽度。向右切换传入-600,左切传入600。

这里要注意的就是,图片与底部按钮的同步,到两边的最后一张后参数的重置,以及是否允许切换的判断。

//箭头切换实现
 next.onclick = function(){
 if(index == 7){
 index = 1;
 }else{
 index += 1;
 }
 show_dots();
 if(!turned){
 turn(-600);
 }
 };
 pre.onclick = function(){
 if(index == 1){
 index = 7;
 }else{
 index -= 1;
 }
 show_dots();
 if(!turned){
 turn(600);
 }
 };

3.底部按钮实现

按钮与箭头的不同,在于点击它可以切换到任意一张图片,所以在对切换函数turn()传入参数前要先做一个计算。另外按钮对应样式的变化也不能忘记。

//按钮切换样式
 function show_dots(){
 for(var i = 0; i < dots.length; i++){
 if(dots[i].className == 'on'){
 dots[i].className = '';
 break;
 }
 }
 dots[index - 1].className = 'on';
 }
 //按钮切换实现
 for(var i = 0; i < dots.length; i++){
 dots[i].onclick= function(){
 if(this.className == 'on'){
 return;
 }
 var my_index = parseInt(this.getAttribute('index')); //注意! index是自定义属性
 var offset = -600 * (my_index - index);


 //计算切换位移量

 if(!turned){
 turn(offset);
 }
 index = my_index;
 show_dots();
 }
 }

4. 自动播放

自动播放自然就是设置定时器和清除定时器的问题,这里不再赘述。

//定时动画
 function play(){
 time = setInterval(function(){
 next.onclick();
 },3000); 
 }
 //动画停止
 function stop(){clearInterval(time);}

 play();
 box.onmouseover = stop;
 box.onmouseout = play;

最后附上demo和源码链接:demo、源码。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个用js实现控制台控件的代码
Sep 04 Javascript
JavaScript 继承详解(三)
Jul 13 Javascript
两种简单实现菜单高亮显示的JS类代码
Jun 27 Javascript
js计算文本框输入的字符数
Oct 23 Javascript
BootStrap实用代码片段之一
Mar 22 Javascript
第六篇Bootstrap表格样式介绍
Jun 21 Javascript
javascript 判断页面访问方式电脑或者移动端
Sep 19 Javascript
js自制图片放大镜功能
Jan 24 Javascript
angular中的cookie读写方法
Aug 02 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
Sep 12 Javascript
node.js Promise对象的使用方法实例分析
Dec 26 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
Sep 04 Javascript
Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能
Mar 27 #Javascript
JS闭包用法实例分析
Mar 27 #Javascript
vue 2.0组件与v-model详解
Mar 27 #Javascript
JavaScript无缝滚动效果的实例代码
Mar 27 #Javascript
JS数组搜索之折半搜索实现方法分析
Mar 27 #Javascript
javascript实现下雨效果
Mar 27 #Javascript
HTML的select控件美化
Mar 27 #Javascript
You might like
使用php转义输出HTML到JavaScript
2015/03/27 PHP
Laravel推荐使用的十个辅助函数
2019/05/10 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
jquery select下拉框操作的一些说明
2010/04/02 Javascript
js 获取Listbox选择的值的代码
2010/04/15 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
2014/08/22 Javascript
javascript实现动态标签云
2015/10/16 Javascript
JQuery zClip插件实现复制页面内容到剪贴板
2015/11/02 Javascript
javascript实现uploadify上传格式以及个数限制
2015/11/23 Javascript
js提交form表单,并传递参数的实现方法
2016/05/25 Javascript
Node.js 实现简单小说爬虫实例
2016/11/18 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
2017/05/19 Javascript
JS实现瀑布流布局
2017/10/21 Javascript
three.js中文文档学习之如何本地运行详解
2017/11/20 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
2018/09/26 Javascript
js module大战
2019/04/19 Javascript
layui框架与SSM前后台交互的方法
2019/09/12 Javascript
vue多页面项目中路由使用history模式的方法
2019/09/23 Javascript
vue项目中定义全局变量、函数的几种方法
2019/11/08 Javascript
[16:43]Heroes19_剃刀(完美)
2014/10/31 DOTA
[03:49]辉夜杯现场龙骑士COSER秀情商“我喜欢芬队!”
2015/12/27 DOTA
[02:36]DOTA2上海特锦赛 回忆电竞生涯的重要瞬间
2016/03/25 DOTA
[01:56]生活中的妖精之七夕特别档
2016/08/09 DOTA
Python 正则表达式操作指南
2009/05/04 Python
在Python中使用swapCase()方法转换大小写的教程
2015/05/20 Python
python3实现ftp服务功能(客户端)
2017/03/24 Python
Python基于time模块求程序运行时间的方法
2017/09/18 Python
python并发2之使用asyncio处理并发
2017/12/21 Python
html5的websockets全双工通信详解学习示例
2014/02/26 HTML / CSS
美国维生素、补充剂、保健食品购物网站:Vitacost
2016/08/05 全球购物
Java语言程序设计测试题改错题部分
2014/07/22 面试题
大学生思想汇报范文
2013/12/31 职场文书
县委党的群众路线教育实践活动工作情况报告
2014/10/25 职场文书
新闻通讯稿范文
2015/07/22 职场文书
班主任工作总结范文
2015/08/13 职场文书
2016暑期政治学习心得体会
2016/01/23 职场文书