基于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 相关文章推荐
通过pjax实现无刷新翻页(兼容新版jquery)
Jan 31 Javascript
模拟javascript中的sort排序(简单实例)
Aug 17 Javascript
关于js二维数组和多维数组的定义声明(详解)
Oct 02 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
Oct 25 Javascript
Bootstrap 模态框(Modal)插件代码解析
Dec 21 Javascript
js实现随机抽选效果、随机抽选红色球效果
Jan 13 Javascript
安装vue-cli报错 -4058 的解决方法
Oct 19 Javascript
在vue2.0中引用element-ui组件库的方法
Jun 21 Javascript
微信小程序文章详情页面实现代码
Sep 10 Javascript
Vue.js 使用v-cloak后仍显示变量的解决方法
Nov 19 Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
Dec 28 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
Nov 26 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的FTP学习(一)[转自奥索]
2006/10/09 PHP
php&amp;java(三)
2006/10/09 PHP
PHP mcrypt可逆加密算法分析
2011/07/19 PHP
php计算程序运行时间的简单例子分享
2014/05/10 PHP
PHP使用curl_multi实现并发请求的方法示例
2018/04/29 PHP
Yii框架通过请求组件处理get,post请求的方法分析
2019/09/03 PHP
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
2013/05/27 Javascript
jQuery scroll事件实现监控滚动条分页示例
2014/04/04 Javascript
JS对字符串编码的几种方式使用指南
2015/05/14 Javascript
jquery.mousewheel实现整屏翻屏效果
2015/08/30 Javascript
jquery中checkbox使用方法简单实例演示
2015/11/24 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
2016/01/10 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
2016/09/09 Javascript
js关于getImageData跨域问题的解决方法
2016/10/14 Javascript
getElementById().innerHTML与getElementById().value的区别
2016/10/27 Javascript
微信小程序 解析网页内容详解及实例
2017/02/22 Javascript
使用JavaScript实现alert的实例代码
2017/07/06 Javascript
jQuery Easyui Treegrid实现显示checkbox功能
2017/08/08 jQuery
详解NodeJS Https HSM双向认证实现
2019/03/12 NodeJs
Vue 进阶之路(三)
2019/04/18 Javascript
浅析Angular 实现一个repeat指令的方法
2019/07/21 Javascript
JS函数进阶之prototy用法实例分析
2020/01/15 Javascript
[01:19:46]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第一场 2月28日
2021/03/11 DOTA
详解Python编程中对Monkey Patch猴子补丁开发方式的运用
2016/05/27 Python
Python字符串、整数、和浮点型数相互转换实例
2018/08/04 Python
Python PIL图片添加字体的例子
2019/08/22 Python
python通过链接抓取网站详解
2019/11/20 Python
Python 用turtle实现用正方形画圆的例子
2019/11/21 Python
音频处理 windows10下python三方库librosa安装教程
2020/06/20 Python
原装进口全世界:天猫国际
2016/08/03 全球购物
美国女孩洋娃娃店:American Girl
2017/10/24 全球购物
美国最大的在线水培用品商店:GrowersHouse.com
2018/08/14 全球购物
cf战队收人口号
2014/06/21 职场文书
2014年有孩子的离婚协议书范本
2014/10/08 职场文书
2014年乡镇工作总结
2014/11/21 职场文书
优质护理心得体会
2016/01/22 职场文书