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 相关文章推荐
动态创建的表格单元格中的事件实现代码
Dec 30 Javascript
图片上传即时显示缩略图的js代码
May 27 Javascript
js实现精美的图片跟随鼠标效果实例
May 16 Javascript
jquery仿QQ登录账号选择下拉框效果
Mar 22 Javascript
Bootstrap媒体对象的实现
May 01 Javascript
js替换字符串中所有指定的字符(实现代码)
Aug 17 Javascript
通过fastclick源码分析彻底解决tap“点透”
Dec 24 Javascript
vue渲染时闪烁{{}}的问题及解决方法
Mar 28 Javascript
通过函数作用域和块级作用域看javascript的作用域链
Aug 05 Javascript
移动端图片上传旋转、压缩问题的方法
Oct 16 Javascript
Vue绑定内联样式问题
Oct 17 Javascript
Vue Echarts实现可视化世界地图代码实例
May 07 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
《DOTA3》开发工作已经开始 《DOTA3》将代替《DOTA2》
2021/03/06 DOTA
php实现ping
2006/10/09 PHP
PHP如何解决网站大流量与高并发的问题
2011/06/25 PHP
2014年10个最佳的PHP图像操作库
2014/07/14 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
Mootools 1.2教程 选项卡效果(Tabs)
2009/09/15 Javascript
获得所有表单值的JQuery实现代码[IE暂不支持]
2012/05/24 Javascript
重写javascript中window.confirm的行为
2012/10/21 Javascript
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
2012/12/21 Javascript
javascript中call和apply方法浅谈
2013/09/27 Javascript
JS实现拖动示例代码
2013/11/01 Javascript
ajax+jQuery实现级联显示地址的方法
2015/05/06 Javascript
JS实现跟随鼠标的链接文字提示框效果
2015/08/06 Javascript
IE6兼容透明背景图片及解决方案
2015/08/19 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
2016/05/09 Javascript
微信小程序之onLaunch与onload异步问题详解
2019/03/28 Javascript
原生js生成图片验证码
2020/10/11 Javascript
springboot+vue实现文件上传下载
2020/11/17 Vue.js
[55:35]VGJ.S vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
python切换hosts文件代码示例
2013/12/31 Python
轻松实现python搭建微信公众平台
2016/02/16 Python
windows下 兼容Python2和Python3的解决方法
2018/12/05 Python
python3.6生成器yield用法实例分析
2019/08/23 Python
python 实现dict转json并保存文件
2019/12/05 Python
numpy实现神经网络反向传播算法的步骤
2019/12/24 Python
Python发送邮件封装实现过程详解
2020/05/09 Python
iphoneX 适配客户端H5页面的方法教程
2017/12/08 HTML / CSS
俄罗斯在线手表和珠宝商店:AllTime
2019/09/28 全球购物
主管会计岗位责任制
2014/02/10 职场文书
《颐和园》教学反思
2014/02/26 职场文书
保险经纪人求职信
2014/03/11 职场文书
解除劳动合同协议书
2014/09/17 职场文书
大二学生自我检讨书
2014/10/23 职场文书
2015年幼儿园保育工作总结
2015/05/12 职场文书
采购部2015年度工作总结
2015/07/24 职场文书
详解nginx location指令
2022/01/18 Servers