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 相关文章推荐
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
Jun 16 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
Jul 22 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
Aug 11 Javascript
JavaScript实现分页效果
Mar 28 Javascript
如何通过setTimeout理解JS运行机制详解
Mar 23 Javascript
微信小程序自定义导航栏实例代码
Apr 05 Javascript
layui 监听select选择 获取当前select的ID名称方法
Sep 24 Javascript
js prototype深入理解及应用实例分析
Nov 25 Javascript
vue中改变滚动条样式的方法
Mar 03 Javascript
JS中准确判断变量类型的方法
Jun 01 Javascript
小程序实现点击tab切换左右滑动
Nov 16 Javascript
五句话帮你轻松搞定js原型链
Dec 09 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
phpmyadmin显示utf8_general_ci中文乱码的问题终级篇
2013/04/08 PHP
PHP实现的DES加密解密实例代码
2016/04/06 PHP
PHP Oauth授权和本地加密实现方法
2016/08/12 PHP
PHP基于接口技术实现简单的多态应用完整实例
2017/04/26 PHP
PHP实现的CURL非阻塞调用类
2018/07/26 PHP
jquery交替变换颜色的三种方法 实例代码
2013/11/19 Javascript
ECMAScript6块级作用域及新变量声明(let)
2015/06/12 Javascript
javascript中substring()、substr()、slice()的区别
2015/08/30 Javascript
详解浏览器渲染页面过程
2017/02/09 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
2017/04/04 Javascript
ReactNative实现图片上传功能的示例代码
2017/07/11 Javascript
Vue Autocomplete 自动完成功能简单示例
2019/05/25 Javascript
使用Karma做vue组件单元测试的实现
2020/01/16 Javascript
详解如何使用React Hooks请求数据并渲染
2020/10/18 Javascript
Python中删除文件的程序代码
2011/03/13 Python
详解Python迭代和迭代器
2016/03/28 Python
详解python的几种标准输出重定向方式
2016/08/15 Python
详解Python 装饰器执行顺序迷思
2018/08/08 Python
Python datetime和unix时间戳之间相互转换的讲解
2019/04/01 Python
python 反编译exe文件为py文件的实例代码
2019/06/27 Python
Django的models模型的具体使用
2019/07/15 Python
python:按行读入,排序然后输出的方法
2019/07/20 Python
python验证码图片处理(二值化)
2019/11/01 Python
Python Django2.0集成Celery4.1教程
2019/11/19 Python
Django如何使用jwt获取用户信息
2020/04/21 Python
python调用jenkinsAPI构建jenkins,并传递参数的示例
2020/12/09 Python
挪威户外活动服装和装备购物网站:Bergfreunde挪威
2016/10/20 全球购物
中医药大学市场营销专业自荐信
2013/09/29 职场文书
幼师求职自荐信范文
2014/01/26 职场文书
2014个人反腐倡廉思想汇报
2014/09/15 职场文书
党员对十八届四中全会的期盼思想汇报范文
2014/10/17 职场文书
财务年终工作总结大全
2019/06/20 职场文书
Python基础之进程详解
2021/05/21 Python
python爬取豆瓣电影TOP250数据
2021/05/23 Python
js实现自动锁屏功能
2021/06/02 Javascript
js前端面试常见浏览器缓存强缓存及协商缓存实例
2022/06/21 Javascript