JS实现焦点图轮播效果的方法详解


Posted in Javascript onDecember 19, 2016

本文实例讲述了JS实现焦点图轮播效果的方法。分享给大家供大家参考,具体如下:

效果图如下:

JS实现焦点图轮播效果的方法详解

一、所用到的知识点

1.DOM操作

2.定时器

3.事件运用

4.Js动画

5.函数递归

6.无限滚动大法

二、结构和样式

<div id="banner" class="banner">
  <ul id="list-banner" class="list-banner fn-clear" style="left:-624px;">
      <li><a href="#"><img src="images/banner4.jpg" width="624" height="200" alt="" title="" /></a></li>
      <li><a href="#"><img src="images/banner1.jpg" width="624" height="200" alt="" title="" /></a></li>
      <li><a href="#"><img src="images/banner2.jpg" width="624" height="200" alt="" title="" /></a></li>
      <li><a href="#"><img src="images/banner3.jpg" width="624" height="200" alt="" title="" /></a></li>
      <li><a href="#"><img src="images/banner4.jpg" width="624" height="200" alt="" title="" /></a></li>
      <li><a href="#"><img src="images/banner1.jpg" width="624" height="200" alt="" title="" /></a></li>
  </ul>
  <div class="list-num-wp">
    <div id="list-num" class="list-num fn-clear">
      <a href="#" class="hover"></a>
      <a href="#"></a>
      <a href="#"></a>
      <a href="#"></a>
    </div>
  </div>
  <div class="left">
    <a id="left" href="#"></a>
  </div>
  <div class="right">
    <a id="right" href="#"></a>
  </div>
</div>
.banner{position:relative;width:624px;height:200px;overflow:hidden;}
.banner .list-banner{position:absolute;width:5000px;}
.banner .list-banner li{float:left;width:624px;height:200px;}
.banner .list-num-wp{position:absolute;bottom:7px;width:624px;height:11px;}
.banner .list-num{width:100px;margin:0 auto;}
.banner .list-num a{display:inline;float:left;width:11px;height:11px;margin:0 7px; background:url(../images/list-num.png) no-repeat;}
.banner .list-num a:hover{background:url(../images/list-num-hover.png));}
.banner .list-num a.hover{background:url(../images/list-num-hover.png);}
.banner .left a{display:block;position:absolute;width:49px;height:49px;top:75px;left:4px;background:url(../images/arrow.gif) 0 0;filter: Alpha(opacity=50);-moz-opacity:.5;opacity:0.5;}
.banner .right a{display:block;position:absolute;width:49px;height:49px;top:75px;right:4px;background:url(../images/arrow.gif) 0 -49px;filter: Alpha(opacity=50);-moz-opacity:.5;opacity:0.5;}

三、脚本思路

1.先左右按钮功能

window.onload=function(){
  var prev=document.getElementById("left");
  var next=document.getElementById("right");
  var list_banner=document.getElementById("list-banner");
  next.onclick=function(){
    list_banner.style.left=parseInt(list_banner.style.left)-624+'px';  //注:html上的ul要加行间样式left:0;,否则这里动不起来
  }
  prev.onclick=function(){
    list_banner.style.left=parseInt(list_banner.style.left)+624+'px';
  }
}

2.左右按钮点击的两句话很像,封装成函数

function animate(offset){
    list_banner.style.left=parseInt(list_banner.style.left)+offset+'px';
}
next.onclick=function(){
    animate(-624);
}
prev.onclick=function(){
    animate(624);
}

3.无限滚动

①假图的做法

即图片为412341,小于最后一张位置的时候,回到第一张的位置,大于 第一张位置的时候,拉到最后一张的位置

function animate(offset){
  var newLeft=parseInt(list_banner.style.left)+offset;
  list_banner.style.left=newLeft+'px';
  if(newLeft<-2496){
    list_banner.style.left=-624+"px";
  }
  if(newLeft>-624){
    list_banner.style.left=-2496+"px";
  }
}

4.小圆点跟着左右按钮切换

var index=1;
function showDot(){
  for(var i=0;i<list_num.length;i++){
    list_num[i].className="";
  }
  list_num[index-1].className="hover";
}
next.onclick=function(){
  animate(-624);
  index++;
  if(index>4){
    index=1;
  }
  showDot();
}
prev.onclick=function(){
  animate(624);
  index--;
  if(index<1){
    index=4;
  }
  showDot();
}

5.点击小圆点图片滚动及小圆点切换

for(var i=0;i<list_num.length;i++){
  list_num[i].onclick=function(){
    if(this.className=="hover"){
      return;
    }
    var myIndex=parseInt(this.getAttribute("index"));
    var offset=-624*(myIndex-index);
    index=myIndex;
    animate(offset);
    showDot();
  }
}

①点自己的时候不执行下列代码

<div class="list-num-wp">
    <div id="list-num" class="list-num fn-clear">
      <a index="1" href="#" class="hover"></a>
      <a index="2" href="#"></a>
      <a index="3" href="#"></a>
      <a index="4" href="#"></a>
    </div>
</div>

关键是要取到点击的是第几张图片,不能直接var myIndex=this.index;因为index是自定义属性,dom自带属性可以通过点来获取,自定义属性不行,.getAttribute()既可以获取自定义属性,又可以获取dom自带属性

③更新index值,index=myIndex;

6.动画函数(有一个渐变的运动过程)

function animate(offset){
    animated=true;
    var newLeft=parseInt(list_banner.style.left)+offset;
    var time=300;     //位移总时间
    var interval=30;    //位移间隔时间
    var speed=offset/(time/interval);    //每次移动距离
    speed=speed>0?Math.ceil(speed):Math.floor(speed);    //可能存在小数,取整
    function go(){
      if((speed < 0 && parseInt(list_banner.style.left)>newLeft)||(speed>0&&parseInt(list_banner.style.left)<newLeft)){   //newLeft目标值
        list_banner.style.left=parseInt(list_banner.style.left)+speed+'px';
        setTimeout(go,interval);  //不止做一次运动(go函数),每隔30毫秒前进一下
      }
      else{
        animated=false;
        list_banner.style.left=newLeft+'px';
        if(newLeft<-2496){
          list_banner.style.left=-624+"px";
        }
        if(newLeft>-624){
          list_banner.style.left=-2496+"px";
        }
      }
    }
    go();
}
next.onclick=function(){
    if(!animated){
      index++;
    }
    if(index>4){
      index=1;
    }
    showDot();
    if(!animated){
      animate(-624);
    }
}
prev.onclick=function(){
    if(!animated){
      index--;
    }
    if(index<1){
      index=4;
    }
    showDot();
    if(!animated){
      animate(624);
    }
}
for(var i=0;i<list_num.length;i++){
    list_num[i].onclick=function(){
      if(this.className=="hover"){
        return;
      }
      var myIndex=parseInt(this.getAttribute("index"));
      var offset=-624*(myIndex-index);
      index=myIndex;
      showDot();
      if(!animated){
        animate(offset);
      }
    }
}

①一个函数不停地在一个条件后调用自身,这种做法就叫做递归,这里通过递归可以实现animate这个函数的动画效果

②不停点就意味着不停调用animate函数,可能会造成卡顿,图片乱刷,需要优化,引进变量animated

7.自动播放

function autoplay(){
    timer=setInterval(function(){
      next.onclick();
    },1000)
}
function stopautoplay(){
    clearInterval(timer);
}
banner.onmouseover=stopautoplay;
banner.onmouseout=autoplay;
autoplay();

setTimeout只执行一次,之前一直执行,是因为递归

setInterval是每隔多少时间

8.假图的优化

实际运用中,图片肯定是按顺序存放,所以假图最好通过js来生成,而不是本身写在html上

var img_first=list_banner.getElementsByTagName("li")[0];
var img_last=list_banner.getElementsByTagName("li")[3];
list_banner.appendChild(img_first.cloneNode(true));
list_banner.insertBefore(img_last.cloneNode(true),list_banner.getElementsByTagName("li")[0]);

appendChild是将新的节点添加到目标的最后一个子节点之后

insertBefore是将新的节点添加到已存在的子节点之前

cloneNode方法,true表示深克隆,false表示浅克隆,深克隆是将标签和标签里的内容都复制过来,而浅克隆不复制内容

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
Iframe thickbox2.0使用的方法
Mar 05 Javascript
JavaScript基础知识学习笔记
Dec 02 Javascript
jQuery中extend函数的实现原理详解
Feb 03 Javascript
JavaScript判断用户是否对表单进行了修改的方法
Mar 18 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
Jun 25 Javascript
为何JS操作的href都是javascript:void(0);呢
Nov 12 Javascript
JavaScript来实现打开链接页面的简单实例
Jun 02 Javascript
在vue项目中使用Nprogress.js进度条的方法
Jan 31 Javascript
vue渲染时闪烁{{}}的问题及解决方法
Mar 28 Javascript
微信头像地址失效踩坑记附带解决方案
Sep 23 Javascript
js中!和!!的区别与用法
May 09 Javascript
JS字符串和数组如何实现相互转化
Jul 02 Javascript
jQuery拖拽通过八个点改变div大小
Nov 29 #Javascript
jQuery网页定位导航特效实现方法
Dec 19 #Javascript
关于微信上网页图片点击全屏放大效果
Dec 19 #Javascript
详解jQuery lazyload 懒加载
Dec 19 #Javascript
JS实现滑动门效果的方法详解
Dec 19 #Javascript
jQuery纵向导航菜单效果实现方法
Dec 19 #Javascript
简单理解js的冒泡排序
Dec 19 #Javascript
You might like
php实现mysql数据库备份类
2008/03/20 PHP
Windows下XDebug 手工配置与使用说明
2010/07/11 PHP
php版本的cron定时任务执行器使用实例
2014/08/19 PHP
js输出列表实现代码
2010/09/12 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
2014/05/20 Javascript
jquery衣服颜色选取插件效果代码分享
2015/08/28 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
2015/09/14 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
2015/10/15 Javascript
react路由配置方式详解
2017/08/07 Javascript
微信小程序之多文件下载的简单封装示例
2018/01/29 Javascript
vue将对象新增的属性添加到检测序列的方法
2018/02/24 Javascript
浅谈Angular HttpClient简单入门
2018/05/04 Javascript
浅谈对于react-thunk中间件的简单理解
2019/05/01 Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
2019/07/12 jQuery
Node.js爬虫如何获取天气和每日问候详解
2019/08/26 Javascript
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
2020/03/07 Javascript
vue绑定数字类型 value为数字的实例
2020/08/31 Javascript
vue项目配置同一局域网可使用ip访问的操作
2020/10/23 Javascript
[02:40]DOTA2超级联赛专访430 从小就爱玩对抗性游戏
2013/06/18 DOTA
Python使用百度API上传文件到百度网盘代码分享
2014/11/08 Python
Python 冒泡,选择,插入排序使用实例
2015/02/05 Python
python xml.etree.ElementTree遍历xml所有节点实例详解
2016/12/04 Python
Python生成器以及应用实例解析
2018/02/08 Python
删除python pandas.DataFrame 的多重index实例
2018/06/08 Python
python实现朴素贝叶斯算法
2018/11/19 Python
Python实现字符串匹配的KMP算法
2019/04/04 Python
使用django和vue进行数据交互的方法步骤
2019/11/11 Python
Python单例模式的四种创建方式实例解析
2020/03/04 Python
matplotlib.pyplot.plot()参数使用详解
2020/07/28 Python
使用scrapy ImagesPipeline爬取图片资源的示例代码
2020/09/28 Python
重新定义牛仔布,100美元以下:Warp + Weft
2018/07/25 全球购物
历史系自荐信范文
2013/12/24 职场文书
公司副总经理任命书
2014/06/05 职场文书
个人剖析材料范文
2014/09/30 职场文书
司机岗位职责
2015/02/04 职场文书
幼儿园教师个人总结
2015/02/05 职场文书