首先是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. The user specified as a definer ('root'@'%') does not exist

    The user specified as a definer ('root'@'%') does not exist 此种报错主要是针对访问视图文件引起的(没有权限) 解决方法: 2.进入mysql ...

  2. Android开源框架——Volley

    Volley 是 Google 在 2013 I/O 大会上推出的 Android 异步网络请求框架和图片加载框架.特别适合数据量小,通信频繁的网络操作.Volley 主要是通过两种 Diapatch ...

  3. js算出生日是当年第多少天

    var year, month, day, monthSum = 0; var arr = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, ...

  4. (十三) [终篇] 一起学 Unix 环境高级编程 (APUE) 之 网络 IPC：套接字

    . . . . . 目录 (一) 一起学 Unix 环境高级编程 (APUE) 之 标准IO (二) 一起学 Unix 环境高级编程 (APUE) 之 文件 IO (三) 一起学 Unix 环境高级编 ...

  5. PHP读取Excel数据写入数据库（包含图片和文字）

    public function test(){ $exts = 'xlsx'; //导入PHPExcel类库,因为PHPExcel没有用命名空间,只能inport导入 import("Org ...

  6. jdk8 Lambda表达式与匿名内部类比较

    Labmda表达式与匿名内部类 前言 Java Labmda表达式的一个重要用法是简化某些匿名内部类(Anonymous Classes)的写法.实际上Lambda表达式并不仅仅是匿名内部类的语法糖, ...

  7. 【转】Win7 64bit Oracle 11g 使用PL/SQL Developer 连接时提示“SQL*Net not properly installed”

    转载:http://www.cnblogs.com/xihuaodc/p/3189257.html  因为之前的Oracle不能用了,所以重新安装了64位的Oracle,安装一路正常 完了之后安装了P ...

  8. WNDR3700V4恢复原厂固件(使用TFTP刷网件原厂固件)

    WNDR3700v4原厂固件下载地址: http://support.netgear.cn/doucument/More.asp?id=2203 操作方法: 1.将设备断电: 2.按住设备背面的Res ...

  9. Javascript 处理时间大全

    1. 获取从今天算起,几天后的日期 function GetDateStr(AddDayCount) { var dd = new Date(); dd.setDate(dd.getDate() + ...

  10. C# ToString("x2")的理解

    1).转化为16进制. 2).大写X:ToString("X2")即转化为大写的16进制. 3).小写x:ToString("x2")即转化为小写的16进制. ...