js原生轮播

　　今天用js做了轮播图，做的不怎么好，希望大家能够看懂。

效果：

　　1.鼠标放在轮播图上自动停止

　　2.鼠标离开轮播图自动播放

　　3.鼠标点击轮播图上的小圆点跳转到相应的图上。

代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>js轮播</title>

     <style type="text/css" media="screen">

         *{margin: 0;padding: 0;}

         body{width: 100%}

         ul{width: 100%;height: 500px;list-style: none;position: relative;overflow: hidden}

         ul li {float: left;width: 100%;height: 100%;position: absolute;top: 0;left: 0;text-align: center;line-height: 500px;font-size: 40px;font-weight: bold;background: red;z-index: 0;opacity: 0}

         ul li:nth-child(2){background: yellow}

         ul li:nth-child(3){background: pink}

         .anbox{position: absolute;z-index: 999;left: 50%;top: 90%;transform: translate(-50%, 0);}

         .an{width: 20px;height: 20px;background: white;float: left;margin-left: 20px;border-radius: 50%;opacity: 0.6}

         .an:nth-child(1){margin: 0;}

     </style>

 </head>

 <body>

     <ul>

         <li>1</li>

         <li>2</li>

         <li>3</li>

         <div class="anbox">

             <div class="an"></div>

             <div class="an"></div>

             <div class="an"></div>

         </div>

     </ul>

     <script src="js/c.js"></script>

     <script>

         $tag('body')[0].onload = aa;

         var yuans = $class('an');

         var lis = $tag('li');

         var ul = $tag('ul')[0];

         var b = 1;//控制图片和小圆点的下标值;

         // 轮播

         function aa(){

             reset();

             lis[b-1].style.zIndex = b;

             lis[b-1].style.transition = 1+'s';

             lis[b-1].style.opacity = 1;

             yuans[b-1].style.background = $random255();

             yuans[b-1].style.opacity = 1;

             b++;

             if(b==lis.length+1){//重置b值

                 b=1;

             }

         }

         // 鼠标放上去

         var time =setInterval(aa,2000);

         ul.onmousemove = ting;

         function ting(){

             clearInterval(time);

         }

         ul.onmouseout = function(){

             ting = null;

             time =setInterval(aa,2000);

         }

         //鼠标放在小圆点的时候

         for(var x=0;x<yuans.length;x++){

             yuans[x].onclick = yuan;

             yuans[x].value = x;

         }

         function yuan(){

             var i = this.value;

             reset();

             lis[i].style.zIndex =4;

             lis[i].style.opacity = 1;

             yuans[i].style.background = $random255();

         }

         //点击上一个或者下一个

         var page = $class('tag');

         for(var x of page){

             x.onclick = pages;

         }

         function pages(){

             if(this.id == 'left'){

                 font();

             }

         }

         function reset(){                //小圆点和图全部还原

             for(var j=0;j<lis.length;j++){

                 lis[j].style.zIndex = 0;

                 lis[j].style.opacity = 0;

                 yuans[j].style.background = "white";

                 yuans[j].style.opacity = 0.6;

             }

         }

     </script>

 </body>

 </html>

　　轮播就到这里了，里面还有自己封装的函数，就使用了标签，类名，id获取。

js原生轮播的更多相关文章

  1. js原生轮播图

    轮播图是新手学前端的必经之路! 直接上代码! <!DOCTYPE html><html lang="en"><head> <meta ch ...

  2. js 原生轮播图插件

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

  3. 小白之js原生轮播图

    html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  4. Js原生轮播-直接上代码

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

  5. 原生js焦点轮播图

    原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...

  6. 原生js实现轮播图

    原生js实现轮播图 很多网站上都有轮播图,但找到一个系统讲解的却很难,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计 ...

  7. 封装一个简单的原生js焦点轮播图插件

    轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...

  8. 原生JS实现轮播图的效果

    原生JS实现轮播图的效果: 只要缕清了全局变量index的作用,这个轮播图也就比较容易实现了:另外,为了实现轮这个效果,有几处clearInterval()必须写上.废话不多说,直接上代码,修复了几个 ...

  9. 使用原生js将轮播图组件化

    代码地址如下:http://www.demodashi.com/demo/11316.html   这是一个轮播图组件,这里是代码地址,需要传入容器的id和图片地址,支持Internet Explor ...

随机推荐

  1. Android Monkey测试入门

    第一步:搭建环境:主要是安装和搭建java和sdk环境,说白了,对我们安卓开发来说,只要搭建好了Android开发环境,Monkey测试环境基本就是OK的了.可以参考:http://www.cnblo ...

  2. Sqoop 导入及导出表数据子集命令详解

    Sqoop命令详解 1.import命令 案例1:将mysql表test中的数据导入hive的hivetest表,hive的hivetest表不存在. sqoop import --connect j ...

  3. 5分钟搭建 nginx +php --------------(LNMP)新手专用

    5分钟搭建 nginx +php --------------(LNMP)新手专用 2014-11-14 16:48 88876人阅读 评论(2) 收藏 举报 版权声明:本文为博主原创文章,未经博主允 ...

  4. 使用 Visual Studio 分析器找出应用程序瓶颈

    VS的性能分析工具 性能分析工具的选择 打开一个“性能分析”的会话:Debug->Start Diagnotic Tools Without Debugging(或按Alt+F2),VS2013 ...

  5. Android 项目中的资源获取方法

    Android资源文件分类: Android资源文件大致可以分为两种: 第一种是res目录下存放的可编译的资源文件: 这种资源文件系统会在R.java里面自动生成该资源文件的ID,所以访问这种资源文件 ...

  6. [VC6,VC9] [ts,nts,deb] [rpm,msi] 你需要下载什么格式的文件

    1.VC6与VC9的区别 VC6版本是使用Visual Studio 6编译器编译的,如果你的PHP是用Apache来架设的,那你就选择VC6版本. VC9版本是使用Visual Studio 200 ...

  7. Hadoop 管理工具HUE配置-filebrowser配置

    Hue提供了图形化截面管理HDFS数据,可谓之非常方便,但是在配置上,还是有点麻烦的. 1 /home/hadoop/software/cloud/hue/desktop/conf/pseudo-di ...

  8. ubuntu安装最新的mercurial

    Mercurial 是一种轻量级分布式版本控制系统,采用 Python 语言实现,易于学习和使用,扩展性强 之前安装的mercurial版本(2.8.2)太老了,想安装最新版本的. 网上搜到方法 su ...

  9. 服务网关zuul之四：zuul网关配置

    禁用过滤器在Zuul中特别提供了一个参数来禁用指定的过滤器,该参数的配置格式如下:zuul.AccessFilter.pre.disable=true动态加载动态路由通过结合Spring Cloud ...

  10. JavaScript for...in 循环

    JavaScript for...in 语句循环遍历对象的属性. 语法 for (对象中的变量) { 要执行的代码 } 注释:for...in 循环中的代码块将针对每个属性执行一次. 实例 循环遍历对 ...