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. java-文件和I/O

    理解IO:http://www.importnew.com/23708.html 一.读写文件: FileInputStream 该流用于从文件读取数据,它的对象可以用关键字 new 来创建. 有多种 ...

  2. xe5 android 调用照相机获取拍的照片[转]

    本篇文章我们来看一下delphi xe5 在android程序里怎样启动照相机并获取所拍的照片,本代码取自xe自带打sample,路径为: C:\Users\Public\Documents\RAD ...

  3. Myeclipse 2017安装

    一.下载 Myeclipse官网下载地址:http://www.myeclipsecn.com/download/ 二.安装 安装详细步骤省略,仅仅是一路下一步即可,博主默认安装到了C盘,注意:安装完 ...

  4. VS2010 如何自动生成UML图

    项目名---右键----查看类图

  5. Multiresolution Analysis（多分辨率分析）

    [注意:本文中所有的傅里叶变换和反变换均含对称因子$\frac{1}{\sqrt{2\pi}}$,且$z=e^{-ik\omega}$] 1. 多分辨率分析 1.1 概念 多分辨率分析指的是一系列$L ...

  6. nginx关闭全局access.log，error.log

    如果nginx的server里没配置access.log,nginx会默认将server的访问日志记录到access.log, 关闭方法: 在nginx.conf配置文件中, 在全局配置中添加 err ...

  7. R语言—统计结果输出至本地文件方法总结

    1.sink()在代码开始前加一行:sink(“output.txt”),就会自动把结果全部输出到工作文件夹下的output.txt文本文档.这时在R控制台的输出窗口中是看不到输出结果的.代码结束时用 ...

  8. js 取一个对象的长度，取出来的是undefined，自己写的一个计算长度的函数解决了。

    收藏 牙膏儿 发表于 3年前 阅读 13085 收藏 7 点赞 1 评论 1 [粉丝福利]-<web 前端基础到实战系列课程>免费在线直播教学>>>   昨晚写一段代码, ...

  9. K近邻（K Nearest Neighbor-KNN）原理讲解及实现

    算法原理 K最近邻(k-Nearest Neighbor)算法是比较简单的机器学习算法.它采用测量不同特征值之间的距离方法进行分类.它的思想很简单:如果一个样本在特征空间中的k个最近邻(最相似)的样本 ...

  10. go中的map[Interface{}]Interface{}理解

    map里面的k,v支持很多的类型.对于go来说也是,go中有个接口的概念,任何对象都实现了一个空接口.那么我们把map里面的k,v都用interface去定义,当我们在使用这个map的时候,我们可以把 ...