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. monkey如何获取app包名

    别人学习网址:http://www.51testing.com/html/58/15092658-2984032.html 使用aapt    aapt是sdk自带的一个工具,在sdk\builds- ...

  2. Spring4相关jar包介绍（转）

    Spring4相关jar包介绍 spring-core.jar(必须):这个jar 文件包含Spring 框架基本的核心工具类.Spring 其它组件要都要使用到这个包里的类,是其它组件的基本核心,当 ...

  3. Redis sortedset有效集合数据结构

    1. 增加一个有效集合 2. 查看元素个数 3. zscore 4. zcount 5. 返回指定元素的索引 zrank 6.zincrby 给元素a加90分 7. zrange查看范围

  4. Hive介绍和Hive环境搭建

    一.Hive介绍 Hive包含用户接口.元数据库.解析器和数据仓库等组件组成,其中用户接口包含shell客户端.JDBC.ODBC.Web接口等.元数据库主要是指定义在hive中的表结构信息,一般保存 ...

  5. Digispark kickstarter + JoyStick 模拟鼠标

    IDE:Arduino 1.0.4 一.线路连接 S-Y --> P5(A0) S-X --> P2(A1) S-K --> P0 VCC --> VCC GND --> ...

  6. xe5 android tts(Text To Speech) [转]

    TTS是Text To Speech的缩写,即“从文本到语音”,是人机对话的一部分,让机器能够说话. 以下代码实现xe5 开发的文本转语音的方法 和访问蓝牙一样,这里用javaclass的接口实现 接 ...

  7. Azure SQL Database (26) 使用Query Store对Azure SQL Database监控

    <Windows Azure Platform 系列文章目录> 我们在使用Azure SQL Database的时候,需要对数据库的性能进行监控,这时候就可以有两种方法: 1.第一种方法, ...

  8. 检索COML类工厂中 CLSID为 {00024500-0000-0000-C000-000000000046}的组件时失败，原因是出现以下错误: 80070005" 《终结篇》

    可以看到报出的异常类型为:UnauthorizedAccessException,没有权限访问,表明我们需要配置执行操作账户的COM访问权限. 由于系统是Windows Server 2008 64位 ...

  9. JS属性描述符之Object.defineProperty()定义对象属性特性

    一.Object.defineProperty的作用 用来给对象新增属性,和修改对象中的属性. 二.JS对象中的描述符 js对象中两种属性描述符:数据描述符和存取描述符(访问描述符). 注意事项: 1 ...

  10. Oracle EXP-00091解决方法

    非交互式 windows: D:\>exp scott/tiger file=employee.dmp tables=(emp,dept) linux需要加双引号 EXP-00091: [ora ...