首先是html实现页面结构及主程序

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>基本动画-焦点图轮播</title>

 <style type="text/css">

 #outer{ width:450px; height:230px; position:relative; margin:50px auto; background:pink; overflow:hidden;}

 #inner{ width:2700px; height:230px; position:absolute; top:0px; left:0;}

 #inner div{ width:450px; height:230px; float:left; line-height:230px; text-align:center; font-size:36px; font-weight:bold; color:#fff; background:red;}

 ul#btn{ margin:0; padding:0; list-style:none; position:absolute; bottom:15px; right:15px; height:30px; width:230px;}

 ul#btn li{ float:left; width:25px; margin-right:5px; height:25px; border:4px solid orange; border-radius:50%; font-size:24px; font-weight:bold; line-height:25px; text-align:center; background:#366; cursor:pointer; -webkit-user-select:none;  }

 ul#btn li.current{ background:white;}

 </style>

 </head>

 <body>

 <div id="outer">

     <div id="inner">

         <div>111111111111</div>

         <div style="background:yellow; color:blue">222222222222</div>

         <div style="background:black;">333333333333</div>

         <div style="background:purple;">444444444444</div>

         <div style="background:blue;">555555555555</div>

         <div>111111111111</div>

     </div>

     <ul id="btn">

         <li class="current" >1</li>

         <li >2</li>

         <li >3</li>

         <li >4</li>

         <li >5</li>

     </ul>

 </div>

 </body>

 </html>

 <script src="move.js"></script>

 <script>

 var oLis=document.getElementById('btn').getElementsByTagName('li');

 var oInner=document.getElementById('inner');

 for(var i=0;i<oLis.length;i++){

     oLis.item(i).n=i;

     oLis.item(i).onclick=function(){

         move(oInner,"left",this.n*-450);

     }

 }

 var step=0;

 function autoMove(){

     if(step==oLis.length){//第六个图片对应是第一个li

         oLis.item(0).className="";

     }else{//正常情况下，step在累加之前，总是表示上一个LI的索引

         oLis.item(step).className="";

     }

     step++;

     if(step==oLis.length+1){//如果走到了第六张，则把坐标切换到第一张上来。

         //alert(1);//暂停一下，更能理解原理

         oInner.style.left=0;//切换坐标

         step=1;    //然后再从第一张往第二张上走，所以让step=1；

     }

     if(step==5){//第5个索引（就是第六张）对应的是第一张DIV，所以这儿要做个判断

         oLis.item(0).className="current";

     }else{//正常情况下走到第几张，就让对应的li切换背景

         oLis.item(step).className="current";

     }

     move(oInner,"left",step*-450);

 }

 window.setInterval(autoMove,2000);

 </script>

接下来在move.js里实现辅助函数

 function move(ele,attr,target,fnCallback){

     clearInterval(ele[attr+"timer"]);

     function _move(){//闭包方法

         var cur=css(ele,attr);//当前位置

         var nSpeed=(target-cur)/10;

         nSpeed=nSpeed>0?Math.ceil(nSpeed):Math.floor(nSpeed);

         css(ele,attr,cur+nSpeed);

         if(nSpeed===0){

             clearInterval(ele[attr+"timer"]);

             ele[attr+"timer"]=null;

             if(typeof fnCallback=="function"){

                 fnCallback.call(ele);

                 //用call去执行fnCallback，则可以让fnCallback在运行的时候，里面的this关键字指向当前运动的这个元素

             }

             //ele.style.backgroundColor="green";

         }

     }

     ele[attr+"timer"]=window.setInterval(_move,20);

 }

 function css(ele,attr,val){//如果传两个参数，则是取值。三个参数，则赋值

     if(typeof val=="undefined"){

         try{

             return parseFloat(window.getComputedStyle(ele,null)[attr]);

         }catch(e){

             return parseFloat(ele.currentStyle[attr]);

         }

     }else if(typeof val=="number"){

         if(attr=="opacity"){

             ele.style.opacity=val;

             ele.style.filter="alpha(opacity="+val*100+")";

         }else{

             ele.style[attr]=val+"px";

         }

     }

 }

原生js-焦点图轮播的更多相关文章

  1. [Js]焦点图轮播效果

    一.所用到的知识点 1.DOM操作 2.定时器 3.事件运用 4.Js动画 5.函数递归 6.无限滚动大法 二.结构和样式 <div id="banner" class=&q ...

  2. 原生JavaScript实现焦点图轮播

    不管是高校的网站还是电商的页面,焦点图的切换和轮播应该是一项不可或缺的应用.今天把焦点图轮播制作的技术要点做下笔记,以供日后查看. 一.结构层(HTML) 焦点图的HTML结构很简单,就是一个父容器( ...

  3. jQuery与原生js实现banner轮播图

    jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...

  4. 原生JS实现简易轮播图

    原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...

  5. JS、JQ实现焦点图轮播效果

    JS实现焦点图轮播效果 效果图: 代码如下,复制即可使用: (不过里面的图片路径需要自己改成自己的图片路径,否则是没有图片显示的哦) <!DOCTYPE html> <html> ...

  6. JS实现焦点图轮播效果

    大家平时逛淘宝网的时候,在首页就能看到焦点图轮播的效果,就是这个样子的: PS:想起每每打开淘宝,总会被这个玩意先夺眼球,偶尔还去点进去溜溜,幸好我定力好,总能控制住自己的购买欲望,为自己不用剁手感到 ...

  7. jQuery制作焦点图(轮播图)

    焦点图(轮播图) 案例 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

  8. 原生js实现图片轮播思路分析

    一.复习原生js实现图片轮播 1.要点 自动轮播 点击小圆圈按钮,显示相应图片 点击左右箭头,实现向前向后轮播图片 2.实现思路 <div id="container"> ...

  9. JavaScript基础 -- 焦点图轮播(转载)

    首先将HTML结构搭建好: <div id="container"> <div id="list" style="left: -60 ...

  10. 用jQuery基于原生js封装的轮播

    我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址 ...

随机推荐

  1. 控制台telnet连接后无法关闭

    按下ctrl+］然后再quit就可以close connection

  2. IT青年深圳销售求职经历

    今年五月份,辞掉了一份月薪5k ,没有加班,双休,福利不错的IT工作,我始终觉得这样的工作太过平稳,没有任何激情,虽然没想好接下来的路怎么走,但是最终我还是选择了裸辞.在所在的城市玩了半个月,算是作最 ...

  3. Volley-XUtils-OkHttp三种方式实现单张多张图片上传

    OkHttp可以作为Volley底层传输协议,速度更快,传大量图片建议使用.OkHttp更多功能请看OkHttp的使用 xUtils 支持大文件上传,更全面的http请求协议支持(10种谓词),拥有更 ...

  4. maven 编译项目时：报com.sun.image.codec.jpeg不存在

    项目中用到图片处理相关的一些工具类,在eclipse开发工具内,程序并没有什么问题,都可以正常使用,项目也没有报错,但通过maven 进行编译打包时,则会报错: 程序包com.sun.image.co ...

  5. Linux内核的总结认识

    转载博文: http://www.linuxdiyf.com/linux/11234.html 1．内核是怎样实现其管理的职能? 以前在学校时一直不能理解内核是怎么做管理?比如内核如何知道在什么时候对 ...

  6. SQL Server 导出数据到 PostgreSQL

    乘着倒数据这会儿,把方法记录一下 需求:因为数据迁移,需要将SQL Server 2012中的数据库导入到PostgreSQL 数据库中 思路:创建一个空的数据库,便于导入数据.下载PostgreSQ ...

  7. iOS开发中对RunLoop的个人心得

    从接触iOS到现在也有将近两年了,对iOS中的RunLoop也有了一定的认识,下面讲讲个人对RunLoop的理解.   初识RunLoop RunLoops是与线程相关联的基础部分,一个Run Loo ...

  8. Storyboard中segue（转场）使用

    源引:http://www.2cto.com/kf/201210/161737.html 一.视图切换类型介绍在storyboard中,segue有几种不同的类型,在iphone和ipad的开发中,s ...

  9. android访问webservice

    // nameSpace 命名空间,methodName:方法名字:maps:参数集合:webserviceUrl:访问的webservice的网址:比如:http://17.18.199.100:8 ...

  10. [题解]noip2016普及组题解和心得

    [前言] 感觉稍微有些滑稽吧,毕竟每次练的题都是提高组难度的,结果最后的主要任务是普及组抱一个一等奖回来.至于我的分数嘛..还是在你看完题解后写在[后记]里面.废话不多说,开始题解. 第一题可以说的内 ...