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

这是我的页面所有代码：

 <!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. touch事件应用

    js的touch事件,一般用于移动端的触屏滑动: $(function(){ document.addEventListener("touchmove", _touch, fals ...

  2. C# 防止同时调用=========使用读写锁三行代码简单解决多线程并发的问题

    http://www.jb51.net/article/99718.htm     本文主要介绍了C#使用读写锁三行代码简单解决多线程并发写入文件时提示"文件正在由另一进程使用,因此该进程无 ...

  3. C#图解教程第一章 C#和.NET框架

    1.1 在.NET之前 C#发音:see shap 1.1.1 20世纪90年代后期的Windows编程  20世纪90年代后期各语言缺点:   1.纯Win32 API不是面向对象的,而且工作量比M ...

  4. Java容器---Map基础

    1.Map API (1)Map 集合类用于存储元素对(称作"键"和"值"),其中每个键映射到一个值. java.util Interface Map<K ...

  5. 理解纯CSS画三角形

    pure css draw a triangle code { display: inline-block; width: 300px; background-color: #E0E0E0 } .te ...

  6. 前端开发chrome console的使用 ：评估表达式 – Break易站

    本文内容来自:chrome console的使用 :评估表达式 – Break易站 从 DevTools 控制台使用它的某个评估功能查看页面上任意项目的状态. DevTools 控制台让您可通过特定方 ...

  7. jQuery 核心函数 （十一）

    函数 描述 jQuery() 接受一个字符串,其中包含了用于匹配元素集合的 CSS 选择器. jQuery.noConflict() 运行这个函数将变量 $ 的控制权让渡给第一个实现它的那个库.

  8. 使用MyBatis时接收值和返回值选择Map类型或者实体类型

    MyBatis作为现近JavaEE企业级项目开发中常用的持久层框架之一,以其简洁高效的ORM映射和高度的SQL的自由性被广大开发人员认可.Mybatis在接收系统传来的参数和返回的参数时主要可以有Ma ...

  9. PyQt4 的事件与信号 -- 重写事件处理方法

    # PyQt中的事件处理主要依赖重写事件处理函数来实现 import sys from PyQt4 import QtCore, QtGui class MainWindow(QtGui.QWidge ...

  10. Mvc项目部署IIS报错：没有为请求的URL配置默认文档，并且没有在服务器设置目录浏览

    问题原因: 1.iis是在安装完.net framework 之后才安装的,需要进行iis注册,开始--运行--cmd,打开命令行提示符,输入命令如下 C:\Windows\Microsoft.NET ...