首先是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. sql一个表中两个字段合并求和

    sql一个表中两个字段,合并求和 SELECT SUM(字段a+'.'+字段b) as total  from TABLE

  2. WPF简单导航框架（Window与Page互相调用）

    相当多的WPF程序都有着丰富的页面和功能,如何使程序在不同页面间转换并降低资源占用,选择适合自己的导航框架就很重要了.最近花了一点时间做了一个简单的导航框架,并在这个过程中对Window.Page.U ...

  3. 方法的覆盖(override)、重载(overload)和重写(overwrite)

    body { background-color: white } .markdown-body { min-width: 200px; max-width: 760px; margin: 0 auto ...

  4. 集合框架遍历方式之——for-each循环

    从Java5起,在Java中有了for-each循环,可以用来循环遍历collection和array.Foreach循环允许你在无需保持传统for循环中的索引,或在使用iterator /ListI ...

  5. textarea之placeholder

    placeholder 属性适用于以下的 <input> 类型:text, search, url, telephone, email 以及 password.这个属性是html5才有的新 ...

  6. 网络-->监控-->OID-->BGP

    说明:暂时发现只适合cisco设备,h3c的交换机只支持部分OID(支持版本.AS号.ROUTER-ID)

  7. 谷歌Cartographer学习（1）-快速安装测试

    谷歌自己提供了安装方法,但是安装比较繁琐,我做了一定的修改,代码放到个人github上,https://github.com/hitcm/. ros下面的安装非常快捷,只需要catkin_make即可 ...

  8. solr多词匹配搜索问题及解决

    使用solr进行某较长词搜索时出现了一些问题,及解决方案. 1.问题:solr默认使用OR方式搜索,当搜索一个很长的次,比如“XX集团股份有限公司”,分词器分词后,使用OR方式匹配,会匹配到很多结果. ...

  9. URAL 1992 CVS 可持久化链栈

    http://www.cnblogs.com/tedzhao/archive/2008/11/12/1332112.html 看这篇的链表部分的介绍应该就能理解“可持久化”了 动态分配内存的会T,只能 ...

  10. spring mvc（1）：基础入门

      依赖 pom.xml ( maven ) <properties>  <spring.version>3.0.5.RELEASE</spring.version> ...