基于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 相关文章推荐
JavaScript调用Activex控件的事件的实现方法
Apr 11 Javascript
获取dom元素那些讨厌的位置封装代码
Jun 23 Javascript
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
Dec 06 Javascript
使用jQuery不判断浏览器高度解决iframe自适应高度问题
Dec 16 Javascript
jquery获取节点名称
Apr 26 Javascript
JavaScript每天定时更换皮肤样式的方法
Jul 01 Javascript
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
Nov 15 Javascript
详解js中==与===的区别
Jan 08 Javascript
折叠菜单及选择器的运用
Feb 03 Javascript
node实现爬虫的几种简易方式
Aug 22 Javascript
JavaScript动画实例之粒子文本的实现方法详解
Jul 28 Javascript
记录一次websocket封装的过程
Nov 23 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实现通用alert函数的方法
2015/03/11 PHP
centos下file_put_contents()无法写入文件的原因及解决方法
2017/04/01 PHP
javascript脚本编程解决考试分数统计问题
2008/10/18 Javascript
用jquery实现自定义风格的滑动条实现代码
2011/04/26 Javascript
javascript权威指南 学习笔记之null和undefined
2011/09/25 Javascript
YUI模块开发原理详解
2013/11/18 Javascript
nodejs实现bigpipe异步加载页面方案
2016/01/26 NodeJs
JavaScript DOM节点操作方法总结
2016/08/23 Javascript
nodeJS模块简单用法示例
2018/04/21 NodeJs
纯JS实现可用于页码更换的飞页特效示例
2018/05/21 Javascript
详解vue填坑之解决部分浏览器不支持pushState方法
2018/07/12 Javascript
解决betterScroll在vue中存在图片时,出现拉不动的问题
2018/09/27 Javascript
Smartour 让网页导览变得更简单(推荐)
2019/07/19 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
2019/11/09 Javascript
基于javascript实现贪吃蛇小游戏
2019/11/25 Javascript
Vue管理系统前端之组件拆分封装详解
2020/08/23 Javascript
[57:09]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第一场 1月26日
2021/03/11 DOTA
解决windows下Sublime Text 2 运行 PyQt 不显示的方法分享
2014/06/18 Python
Python异常学习笔记
2015/02/03 Python
Python 模拟购物车的实例讲解
2017/09/11 Python
Python面向对象程序设计OOP入门教程【类,实例,继承,重载等】
2019/01/05 Python
python re库的正则表达式入门学习教程
2019/03/08 Python
Python基本数据结构与用法详解【列表、元组、集合、字典】
2019/03/23 Python
python GUI库图形界面开发之PyQt5窗口背景与不规则窗口实例
2020/02/25 Python
python中format函数如何使用
2020/06/22 Python
Python+OpenCV图像处理——图像二值化的实现
2020/10/24 Python
美国最大的网上冲印店:Shutterfly
2017/01/01 全球购物
美国电子产品主要品牌的授权在线零售商:DataVision
2019/03/23 全球购物
英国玛莎百货澳大利亚:Marks & Spencer Australia
2019/08/30 全球购物
酒店管理专业毕业生推荐信
2013/11/10 职场文书
建筑专业毕业生推荐信
2013/11/21 职场文书
幼师求职自荐信范文
2014/01/26 职场文书
交通事故协议书范文
2014/04/16 职场文书
关于清明节的演讲稿
2014/09/13 职场文书
2014年乡镇安全生产工作总结
2014/12/02 职场文书
我的中国梦主题班会
2015/08/14 职场文书