<!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <meta name="author" content="智能社 - zhinengshe.com" />

 <meta name="copyright" content="智能社 - zhinengshe.com" />

 <meta name="description" content="智能社是一家专注于web前端开发技术的公司，目前主要提供JavaScript培训和HTML5培训两项服务，同时还推出了大量javascript基础知识教程，智能课堂为你带来全新的学习方法和快乐的学习体验。" />

 <title>智能社— http://www.zhinengshe.com</title>

 <style>

 *{ margin:; padding:; list-style:none;}

 #box{ width:534px; height:300px; position:relative; margin:50px auto; overflow:hidden;}

 #box ul{ position:absolute; left:; top:;}

 #box ul li{ float:left; width:534px; height:300px;}

 #box ul li img{ height:300px;}

 #box a{ transition:.2s all ease;}

 #box .prev,#box .next{position:absolute;  top:%; z-index:; height:80px; line-height:80px; background:rgba(,,,0.6); color:#fff; width:80px; text-align:center; margin-top:-40px; display:none;}

 #box .prev{ left:;}

 #box .next{ right:;}

 #box a:hover{ background:rgba(,,,0.4);}

 #box ol{ position:absolute; width:120px; left:%; margin-left:-60px; bottom:10px;}

 #box ol li{ width:20px; height:20px; background:#f60; float:left; margin:2px; text-align:center; text-indent:-9999px; border-radius:%;}

 #box ol li.active{ background:#fff;}

 </style>

 <script>

 window.onload=function(){

     var oBox=document.getElementById('box');

     var oPrev=oBox.children[];

     var oNext=oBox.children[];

     var oUl=oBox.getElementsByTagName('ul')[];

     var aLi=oUl.children;

     var oOl=oBox.getElementsByTagName('ol')[];

     var aBtn=oOl.children;

     //先复制一份

     oUl.innerHTML+=oUl.innerHTML;

     //算宽度

     oUl.style.width=aLi.length*aLi[].offsetWidth+'px';

     var W=oUl.offsetWidth/;

     //移入显示俩按钮

     oBox.onmouseover=function(){

         clearInterval(timer);

         oPrev.style.display='block';

         oNext.style.display='block';

     }

     oBox.onmouseout=function(){

         timer=setInterval(function(){

             iNow--;

             tab();

         },);

         oPrev.style.display='none';

         oNext.style.display='none';

     }

     //覆模循环一一对应。

     var iNow=;

     //选项卡

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

         (function(index){

             aBtn[i].onclick=function(){

                 if(index== && iNow%aBtn.length==aBtn.length-){//循环一圈后，index=0；iNow%aBtn.length=最后一张图片的时候。iNow都处于

                     //++;

                     iNow++;

                 }

                 if(index==aBtn.length- && iNow%aBtn.length==){//循环一圈后，index=最后一个下标；iNow%aBtn.length=第一张图片的时候。iNow都处于

                     //--;

                     iNow--;

                 }

                 if(iNow>){

                     iNow=Math.floor(iNow/aBtn.length)*aBtn.length+index;//Math.floor(iNow/aBtn.length)*aBtn.length  和newMove 对应起来，只要开始动就得走一屏幕。对应的按钮也在对应着变化。

                 }else{

                     if(index== && iNow%aBtn.length==-){

                         iNow++;

                     }

                     iNow=Math.floor(iNow/aBtn.length)*aBtn.length+index;

                 }

                 tab();

                 document.title=iNow;

             }

         })(i);

     }

     function tab(){

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

             aBtn[i].className='';

         }

         if(iNow<){

             aBtn[(iNow%aBtn.length+aBtn.length)%aBtn.length].className='active';

         }else{

             aBtn[iNow%aBtn.length].className='active';

         }

         //oUl.style.left=-iNow*aLi[0].offsetWidth+'px';

         console.log(iNow)

         startMove(oUl,-iNow*aLi[].offsetWidth);

     }

     //点击

     oNext.onclick=function(){

         iNow++;

         tab();

     }

     var timer=null;

     timer=setInterval(function(){

         iNow--;

         tab();

     },);

     oPrev.onclick=function(){

         iNow--;

         tab();

     }

     var left=;

     function startMove(obj,iTarget){

         clearInterval(obj.timer);

         obj.timer=setInterval(function(){

             var iSpeed=(iTarget-left)/;//  总的距离/8得到速度。

                 //判断speed 正负，来取舍不同的值，不能为小数，每次都要求走一个li宽度。

             iSpeed=iSpeed>?Math.ceil(iSpeed):Math.floor(iSpeed);

             if(left==iTarget){//判断l=iTaegrt要关闭定时器

                 clearInterval(obj.timer);

             }else{

                 left+=iSpeed;

                 if(left<){

                     obj.style.left=left%W+'px';

                 }else{

                     obj.style.left=(left%W-W)%W+'px';

                 }

             }

         },);

     }

 }

 </script>

 </head>

 <body>

 <div id="box">

     <a href="javascript:;" class="prev">prev</a>

     <a href="javascript:;" class="next">next</a>

     <ul>

         <li><img src="img/0.jpg"></li>

         <li><img src="img/1.jpg"></li>

         <li><img src="img/2.jpg"></li>

         <li><img src="img/3.jpg"></li>

         <li><img src="img/4.jpg"></li>

     </ul>

     <ol>

         <li class="active"></li>

         <li></li>

         <li></li>

         <li></li>

         <li></li>

     </ol>

 </div>

 </body>

 </html>

自动 点击切换 按钮切换 轮播无缝选项卡 ----原生js的更多相关文章

  1. 轮播插件、原生js编写，弄懂这个，基本上各种轮播都可以自己写了

    直接上代码了: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...

  2. 轮播图--使用原生js的轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 背景大图隔几秒切换（非轮播，淡入淡出）--变形金刚joy007 项目总结

    工作日想了好久,周日回家才想出来的... 图片切换(非轮播,淡入淡出) 1.切换2.停止 <html> <head> <meta content="text/h ...

  4. 浅谈轮播图（原生JavaScript实现）

    现在各种轮播图插件,玲琅满目,用起来也非常方便,通常只需要选择元素然后传入参数就可以了.但是,和授人以鱼不如授人以渔一样的道理,不管怎样最基本的轮播图原理还是应当掌握的.这样不仅有利于我们自己写出来满 ...

  5. JQuery实现图片轮播无缝滚动

    图片轮播无缝滚动实例 实现效果展示预览: 思路: 1.设置当前索引curIndex,和前一张索引prevIndex.(curIndex为下一次要显示的图片索引,prevIndex为现在看见的图片) 2 ...

  6. 原生js+css3实现图片自动切换，图片轮播

    运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...

  7. [Jquery]某宝图片轮播(无缝、带左右切换按钮)

    [效果] 左右移动(非渐隐) [思路] 1.结构与样式 ①最外层div盒子当容器,里面ul宽度无限大并且相对定位(到时候移动其实移的是ul的left) ②按钮的透明度可用background:rgba ...

  8. swipe.js实现支持手拔与自动切换的图片轮播

    一.Html代码如下: <div id='mySwipe' style='max-width:500px;margin:0 auto' class='swipe'> <div cla ...

  9. swiper.js在隐藏/显示切换时，轮播出现bug的解决办法

    swiper在 swiper-container正常状态下显示,轮播是没有问题,但是当 swiper-container由隐藏切换至显示时(比如做图片查看时)会出现滑动bug,滑动卡顿而且最后一张可以 ...

随机推荐

  1. Yii MySQL修改数据库的数据

    最新学习Yii框架,分享一些学习心得,适合初学者,大神请按ctrl + w //第一种方法 <?php /* * $id 代表主键,可以是一个也可以是一个集合. * $attributes 代表 ...

  2. springmvc自定义日期编辑器

    1.控制器 @Controller public class MyController { // 处理器方法 @RequestMapping(value = "/first.do" ...

  3. [html5]placeholder默认颜色

    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #f00; } ::-moz-placeholder { /* Mozilla Fir ...

  4. Model2模型介绍

    在JSP课程中有 Model1 模型的介绍 模型二: 实例接JSP课程,先去看JSP课程了

  5. CentOS6.4安装Hadoop2.0.5 alpha - Single Node Cluster

    1.安装JDK7 rpm到/usr/java/jdk1.7.0_40,并建立软链接/usr/java/default到/usr/java/jdk1.7.0_40 [root@server-308 ~] ...

  6. 怎么做一个bat文件

    怎么做一个bat文件 | 浏览:639 | 更新:2014-11-25 17:02 1 2 3 4 5 6 7 分步阅读 其实做一个.BAT文件很简单,下面我就以做一个清除系统垃圾.BAT文件为例,给 ...

  7. O365 "打开或关闭脚本"功能

    博客地址:http://blog.csdn.net/FoxDave 自定义功能是 SharePoint Online 最具吸引力的功能之一,因为它使管理员和用户可以调整网站和页面的外观以满足组织目 ...

  8. iOS开发：XCTest单元测试（附上一个单例的测试代码）

    测试驱动开发并不是一个很新鲜的概念了.在我最开始学习程序编写时,最喜欢干的事情就是编写一段代码,然后运行观察结果是否正确.我所学习第一门语言是c语言,用的最多的是在算法设计上,那时候最常做的事情就是编 ...

  9. 1、datatable与datagrid之间的绑定

    1.前台代码: 插入一个datagrid控件,设置几列. 这里有两点要注意: 1)为了显示所要查询的日期,我将前台的列名与后台查询出来的日期绑定了,用了x:Name这个属性 2)与后台datatabl ...

  10. TCP/IP 协议：IP 协议

    首先来看一下IP协议在实际中的位置: 我们只关系流程,不关系当前具体的服务类型 1.IP协议概述 作用: 从上图或从应用层->运输层->网络层->链路层来看,IP协议属于网络层,也就 ...