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. 基于MVC4+EasyUI的Web开发框架形成之旅(4)--附件上传组件uploadify的使用

    大概一年前,我还在用Asp.NET开发一些行业管理系统的时候,就曾经使用这个组件作为文件的上传操作,在随笔<Web开发中的文件上传组件uploadify的使用>中可以看到,Asp.NET中 ...

  2. Go sql语句引号问题

    使用Go进行Mysql开发时,会遇到引号问题(实际上,与语言无关,只要使用sql就会遇到这些类似问题). 本文举例说明如何解决这些问题. Example1 第一例子演示格式字符是否要加引号. 代码如下 ...

  3. mysql的变量信息详解

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

  4. 日期控件My97 DatePicker 的使用

    1.解压后添加My97DatePicker文件夹 2.引入WdatePicker.js文件 日期控件My97DatePicker的使用.html <!DOCTYPE html> <h ...

  5. centos添加额外测源，解决：No package openvpn available.

    centos添加额外测源,解决:No package openvpn available. ##添加额外的repositories,安装openvpn yum install epel-release ...

  6. 排序算法<No.5>【堆排序】

    算法,是系统软件开发,甚至是搞软件的技术人士的核心竞争力,这一点,我坚信不疑.践行算法实践,已经有一段时间没有practise了,今天来一个相对麻烦点的,堆排序. 1. 什么是堆(Heap) 这里说的 ...

  7. WPF Demo14 依赖属性

    using System.Windows; namespace DependencyPropertyDemo1 { public class Student:DependencyObject { pu ...

  8. AM二次开发中选择指定范围内的对象

    使用Spatial可以快速选择指定范围内的对象 例如下面的代码可以选择所有在[0,0,0]-[10m,10m,10m]这个盒子之内的对象: 其中ElementsInBox还可以指定对象类型做进一步筛选 ...

  9. 数据类型---列表，for循环

    定义:列表是一个数据的集合,集合内可以放任何数据类型,可对集合进行方便的增删改查操作. L1=[]   #定义空列表 L2=[1,2,3,4]   #存4个值,索引为0-3 L3= ["ab ...

  10. react路由嵌套

    所谓的嵌套路由就是在某些以及路由下面存在二级路由,这些二级路由除了公用一级路由导航模块外,还公用当前的二级路由的导航模块,也就是部分进行了切换,要实现嵌套路由,首先回顾之前的内容,实现基本的react ...