首先是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. 循序渐进Python3（十一） --4--  web之jQuery

    jQuery         jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的 ...

  2. 循序渐进Python3（八） -- 0 -- 初识socket

    socket通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄,应用程序通常通过"套接字"向网络发出请求或者应答网络请求. socket起源于Un ...

  3. jsp 访问jdbc实例

    前提条件: 1.安装Java,tomcat,MySQL,eclipse 2.配置java 环境变量 3.配置MySQL参数 4.tomcat能正常启动 使用eclipse编写代码: 1. 新建一个we ...

  4. npm -v 一直闪

    一直闪一般是配置搞错了 参考: windows安装完nodejs后做了相关环境变量配置后,cmd输入npm没反应啊 就光标一直闪 node是正常的 或者 https://segmentfault.co ...

  5. Camstar Portal modeling user guid --WorkCenter workCell workStation的关系

    业务需求:如何让用户登陆时选择  生产线(如:SMT生产线) Operation(如:维修员)  工作单元(如:印刷段) 工作站(如:上板) 关系图: 从上图可以看出: workCell是Resour ...

  6. Windows自带.NET Framework版本大全

    The following is a complete list of which version of the .NET Framework is included in which version ...

  7. Smarty模板函数

    1.{$var=...} 这是{assign}函数的简写版,你可以直接赋值给模版,也可以为数组元素赋值. <{$a = 10}><!--赋值语句--> <{$a}> ...

  8. ---JS canvas学习笔记

    context的fillStyle属性 fillStyle=color | gradient | image | canvas |video strokeStyle也有上述属性. 1.color:#f ...

  9. Window下Qt Creator启动错误解决方法

    很多电脑现在都是用的是双显卡,高性能的独显和性能比较差但耗电少的集显,在Window10系统下右键点击软件,在"图形处理器"里面可以选择使用什么显卡操作此软件.下面是我在运行Qt ...

  10. C#中线程对控件的访问

    Control类提供了一个Invoke方法来给子线程访问主线程的控件,它的原型是酱紫的: object.Control.Invoke(Delegate method); object.Control. ...