今天给大家带来的是我自己做的一个轮播图效果，让我们一起来学习一下吧。

这是我的页面所有代码：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>轮播图</title>

         <style type="text/css">

             *{padding: 0;margin: 0;}

             #ban_box{width: 1000px;height: 400px;margin: 5% auto;position: relative;overflow: hidden;}

             #banner{position: absolute;z-index: 1;width:4000px;height: 400px;}

             #banner img{width: 1000px;height: 400px;float: left;}

             #but {position: absolute;left: 450px;bottom: 20px;z-index: 99;height: 20px;width: 110px;}

             #but span {float: left;margin-right:25px;width: 20px;height: 20px;border-radius: 50%;background: #ddd;cursor: pointer;}

             #but span:last-child{margin: 0;}

             #but .on{background: #C9251D;}

             .arrow {position: absolute;top: 180px;z-index: 2;text-decoration: none;font-size: 50px;font-weight: bold;color: #000;cursor: pointer;display: none;}

             #prev{left: 20px;}

             #next{right: 20px;}

             #ban_box:hover .arrow{display: block;}

         </style>

     </head>

     <body>

         <div id="ban_box">

             <div id="banner" style="left:-1000px;">

                 <img src="img/7.jpg"/>

                 <img src="img/11.jpg"/>

                 <img src="img/383708577581202919.jpg"/>

                 <img src="img/7.jpg"/>

             </div>

             <div id="but">

                 <span value="1" class="on"></span>

                 <span value="2"></span>

                 <span value="3"></span>

             </div>

             <a href="javascript:;" id="prev" class="arrow">&lt;</a>

                <a href="javascript:;" id="next" class="arrow">&gt;</a>

         </div>

         <script type="text/javascript" src="js/fz.js" ></script>

         <script type="text/javascript">

             var box = $("ban_box");

             var banner = $("banner");

             var prev = $("prev");

             var next = $("next");

             var but = $('but').getElementsByTagName('span');

             var timer;

             var value=1;

             function animation(lenghts){

                 var left = parseInt(banner.style.left) + lenghts;

                 banner.style.left = left + 'px';

                 banner.style.transition = ".5s";

                 //无限滚动判断

                 if (left > -1000) {

                     banner.style.left = -3000 + 'px';

                 }

                 if (left < -3000) {

                     banner.style.left = -1000 + 'px';

                 }

             }

             function butShow() {

                 //将之前的小圆点的样式清除

                 for (var i = 0; i < but.length; i++) {

                     if (but[i].className == "on") {

                         but[i].className = "";

                     }

                 }

                 //数组从0开始，故index需要-1

                 but[value - 1].className = "on";

             }

             //上一页

             prev.onclick = function() {

                 value -= 1;

                 if (value < 1) {

                     value = 3;

                 }

                 butShow();

                 animation(1000);

             }

             //下一页

             next.onclick = function() {

                 value += 1;

                 if (value > 3){

                     value = 1;

                 }

                 butShow();

                 animation(-1000);

             }

             for (var i = 0; i < but.length; i++) {

             but[i].onclick = function(){

                 console.log(i);

                 var click = parseInt(this.getAttribute('value'));

                 var lenghts = 1000 * (value - click);

                 animation(lenghts);

                 value = click;

                 butShow();

                 }

             }

             //定时器

             function play() {

                 timer = setInterval(function () {

                     next.onclick();

                 }, 1000)

             }

             play();

             //鼠标悬浮停止

             function stop() {

                 clearInterval(timer);

             }

             box.onmouseover = stop;  //鼠标移到目标上让它停止

             box.onmouseout = play;   //鼠标移开时让它播放

         </script>

     </body>

 </html>

这其中有我自己封装的一些东西，需要引进去，或者把其中需要找的ID用dom找出来就可以了哦

这是我的效果图，大家可以找一些漂亮的图片哦，效果一定会很漂亮哦:

大家如果有什么问题可以在下面问，或者我的代码有什么bug也可以帮我提出，有更好的办法也可以分享给我哦。

【JavaScript_轮播图】的更多相关文章

  1. js 基础篇（点击事件轮播图的实现）

    轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现 首 ...

  2. 实现下来ScrollView放大轮播图

    创建工程,创建一个UIScrollView属性,并遵循其协议: #define kWidth self.view.frame.size.width//屏幕宽 #define kHeight self. ...

  3. ViewPager轮播图

    LoopViewPagerLayout无限轮播 项目地址:https://github.com/why168/LoopViewPagerLayout 支持三种动画: 支持修改轮播的速度: 支持修改滑动 ...

  4. CSS-用伪类制作小箭头（轮播图的左右切换btn）

    先上学习地址:http://www.htmleaf.com/Demo/201610234136.html 作者对轮播图左右按钮的处理方法一改往常,不是简单地用btn.prev+btn.next的图片代 ...

  5. phpcms首页实现轮播图

    1.在你想要加轮播图的位置加入以下 <div id="flowDiagram" > <div id="button"> <span ...

  6. React视角下的轮播图

    天猫购物网站最显眼的就是轮播图了.我在学习一样新js库,一个新框架或新的编程思想的时候,总是感叹"入门必做选项卡,进阶须撸轮播图."作为一个React组件,它是状态操控行为的典型, ...

  7. Jquery 轮播图简易框架

    =====================基本结构===================== <div class="carousel" style="width: ...

  8. 原生js焦点轮播图

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

  9. superSlider实现美女轮播图

    superSlider实现美女轮播图 <!DOCTYPE html><html lang="en"><head><meta charset ...

随机推荐

  1. 【http转https】其之一：腾讯云 DV SSL证书申请实验

    文:铁乐猫 2016年1月 前言 大概2017年12月28日左右公司提出以后需要将公司网站由http提升到https级别,以便谷歌和火狐浏览器将之认定为安全网站. 主要是出于客户.用户那边用火狐或谷歌 ...

  2. 理解JavaScript原型

    Javascript原型总会给人产生一些困惑,无论是经验丰富的专家,还是作者自己也时常表现出对这个概念某些有限的理解,我认为这样的困惑在我们一开始接触原型时就已经产生了,它们常常和new.constr ...

  3. VS2010 Extension实践（2）

    在上一篇(VS2010 Extension (1)实践)里,主要展示了如何使用MEF扩展VS2010,来扩展编辑控制和展现自己的UI:在实现QuickToolbar的时候,发现MEF仅仅提供了很基本的 ...

  4. npm 项目更换目录后无法启动

    问题描述: 使用 Vue-cli 创建的项目,当文件移动到其他目录后,无法正常启动,报错信息如下: 分析原因: npm 项目,在安装依赖(node_modules)的时候,会记录当前的文件路径.当路径 ...

  5. flex盒模型实现头部尾部固定

    近期做移动app.wap等站,需要头部固定在顶部,不随着内容滚动而滚动平时第一想法就是使用position:fixed;top:0;z-index:10;这样去实现但这样使用fixed之后,会在ios ...

  6. ssh的免密登陆

    想必大家都有使用ssh登陆的过程了,那么,怎么设置ssh免密登陆呢?下面有一些我的总结: 环境:服务器主.从 主服务器:192.168.1.1 从服务器:192.168.1.2 实现主服务器ssh登录 ...

  7. 深入研究ES6 Generators

    ES6 Generators系列: ES6 Generators基本概念 深入研究ES6 Generators ES6 Generators的异步应用 ES6 Generators并发 如果你还不知道 ...

  8. python如何玩“跳一跳”！（windows安桌版本请进！）

    最近"跳一跳",很火爆,有木有? 看了一下网上的教程,动作搭建了一下环境,就可以用脚本自动跑起来啦!!! 下面说一下android手机的实现过程: 首先,是python环境的搭建 ...

  9. mysql加锁读

    Locking Reads 在同一个事务中,如果你先查询数据,随后对相关数据进行插入或修改,那么在标准的SLELECT中不会给出足够的保护.在你查询期间另一个事务可以更新或者删除相同的行.InnoDB ...

  10. Oracle COMMIT语句的处理顺序

    Oracle COMMIT语句相信大家都有一定的了解,下面就为您介绍Oracle COMMIT语句的处理步骤,希望对您能有所帮助. Oracle COMMIT语句处理顺序 当事务提交时,Oracle分 ...