<!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. android 中 webview 怎么用 localStorage?

    我在 android里面 使用html5的 localStorage 为什么存不进去也读不出来呀? 网上搜了好多都没效果 1 2 3 4 5 6 7 8 9 mainWebView = (WebVie ...

  2. JQ判断屏幕宽度

    <script> if (screen.width < 768){....} </script>

  3. jquery统计页面的pv/ip及停留时间等

    我们在做网站的时候经常需要统计网站的访问信息,这里介绍一个用jquery写的一个统计方法 新建一个js文件jun_record.js 代码如下: var start; var end; var tim ...

  4. Top Five Hacker Tools Every CISO Should Understand

    As the role of the CISO continues to evolve within organizations towards that of an executive level ...

  5. Redis应用场景(转)

    (来源:http://www.cnblogs.com/shanyou/archive/2012/09/04/2670972.html) Redis常用数据类型 Redis最为常用的数据类型主要有以下五 ...

  6. tomcat简单文服

    1.修改tomcat配置文件 web.xml 将listings的value值改为true. DefaultServlet在Tomcat中主要是做目录列表(Directory Listing)用. 2 ...

  7. SecureCRT清屏

    Ctrl + l:清屏Ctrl + c:终止命令Ctrl + z:挂起命令

  8. Python显示函数调用堆栈

    网上找到如下几个思路: 1.用inspect模块 2.用sys._getframe模块 3.用sys.exc_traceback,先抛一个异常,然后抓出traceback #!/usr/bin/env ...

  9. Python使用CGIHTTPServer调用shell作为cgi脚本

    #!/bin/bash echo "Content-Type:text/html" echo "" echo "hello world!" ...

  10. mysql-5.6.17-win32免安装版配置

    下载mysql-5.6.17-win32:官网下载地址百度   解压到自定义目录,我这里演示的是D:\wamp\mysql\   复制根目录下的my-default.ini,改名为my.ini,my. ...