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

这是我的页面所有代码：

 <!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. C# 给枚举类型增加一个描述特性

    前言 相信很多人对枚举并不陌生,枚举可以很方便和直观的管理一组特定值.如果我们在页面上直接输出我们希望匹配的汉语意思或则其他满足我们需求的语句就更好了,当然,通常小伙伴们都会再页面上if(enum== ...

  2. 跟我一起学JQuery插件开发教程

    在逛codeproject网站的时候,突然看到一篇文章:How to write plugin in Jquery. 如果对E文好的同学 ,可以看上面的连接.现在我把上面网站的及结合自己的想法写这篇文 ...

  3. js 判断值为Array or Object的方法

    ①obj instanceof Array / Object ②Array.prototype.isPrototypeOf(obj) ③Object.prototype.toString.call(o ...

  4. Nginx服务器配置之location语法分析

    location基本语法:location [=|~|~*|^~] /uri/ { - } = 严格匹配.如果这个查询匹配,那么将停止搜索并立即处理此请求. ~ 为区分大小写匹配(可用正则表达式) ! ...

  5. Android CoordinatorLayout、AppBarLayout、DrawerLayout、NavigationView 的使用及问题小结

    这里只对Material Design中这几种组件使用的重要部分以及容易出现问题的地方进行汇总(遇坑请直接看最后常见问题部分),详细用法请自行查阅官方文档 一.CoordinatorLayout 介绍 ...

  6. android散点技术

    1.怎么实现android虚拟按键(回退和回到主界面) android 中如何模拟back键 2.怎么用局域网的方式(wifi或是网线)来调试android机 参考资料: http://www.ith ...

  7. H5前端性能测试总结

    测试关注指标 Http请求个数 同一个域名不同浏览器内核.不同版本浏览器,大部分并发请求数是6个: 优化方案: a.雪碧图:即CSS Sprite,也称CSS精灵,是一种CSS图像合并技术,该方法是将 ...

  8. Windows服务框架与服务的编写

    从NT内核开始,服务程序已经变为一种非常重要的系统进程,一般的驻守进程和普通的程序必须在桌面登录的情况下才能运行,而许多系统的基础程序必须在用户登录桌面之前就要运行起来,而利用服务,可以很方便的实现这 ...

  9. Linux 笔记 #02# Installing MySQL & Installing the Default JRE/JDK

    Environment: debian 8 Installing MySQL Reference material: https://linode.com/docs/databases/mysql/h ...

  10. 关于setTimeout的面试题

    于地铁上看了一篇帖子,关于setTimeout的面试题,觉得见得多,记录,以学习之. 我们都知道,这样的一个例子: for ( var i = 0;i<5; i++) { console.log ...