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. mysql的变量信息详解

    mysql的变量详解 执行show variables命令可以查看MySQL服务器的变量 变量名 默认值 说明 对应的配置文件参数 auto_increment_increment 1 自增长类型的初 ...

  2. RedHat6.5系统LVM增加新硬盘实现根文件系统扩容

    一.新增物理空间 二.linux中创建新分区 1.首先查看硬盘信息,用fdisk -l命令,如果有硬盘有剩余空间就可以对其进行分区. [root@master 桌面]# fdisk -l Disk / ...

  3. USB引脚定义

  4. Linux配置Python默认版本

    我们知道在Windows下多版本共存的配置方法就是改可执行文件的名字,配置环境变量. Linux中的配置原理差不多,思路就是生成软链接,配置到环境变量. 在没配置之前,我的Ubuntu中安装了pyth ...

  5. 我的less学习之路

    less注释 可以在代码中使用块样式(/* */)和行内注释(//),但是当编译LESS代码时,单行注释不会显示在CSS文件中.开发中主要维护的是less文件,所以可以使用行内注释,最终编译的css文 ...

  6. 批量输出dwg文件中的文本

    公司来了一批图纸,里面有一部分内容需要复制到excel中,几百张来图每一张都 手工复制,烦死了.编写一个CAD插件,自动导出文本,简单记录在下面. 想法是: 1.输入命令,选择所有dwg文件 2.挨个 ...

  7. 使用R语言-计算均值，方差等

    R语言对于数值计算很方便,最近用到了计算方差,标准差的功能,特记录. 数据准备 height <- c(6.00, 5.92, 5.58, 5.92) 1 计算均值 mean(height) [ ...

  8. HTTP/HLS/RTMP超级负载测试工具

    这个负载测试工具是网游分享的工具,可以在http://blog.csdn.net/win_lin/article/details/11835011 或者https://github.com/winli ...

  9. PAT 乙级 1042 字符统计(20) C++版

    1042. 字符统计(20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 请编写程序,找出一段给定文字中出现最 ...

  10. R语言——实验5-聚类分析

    针对课件中的例子自己实现k-means算法 调用R语言自带kmeans()对给定数据集表示的文档进行聚类. 给定数据集: a)         数据代表的是文本信息. b)        第一行代表词 ...