欢迎指点！

预览图：

可以通过 https://littlehiuman.github.io/08-Carousel/index-2.html 查看本页面效果。

还有另一种的效果：https://littlehiuman.github.io/08-Carousel/index.html。

代码在这里：https://github.com/littleHiuman/littleHiuman.github.io/tree/master/08-Carousel

https://github.com/littleHiuman/littleHiuman.github.io 求点star~~~

区别: 按钮组、左箭头、右箭头的实现是一样的。

index.html 通过改变left的值来进行图片轮播，所以布局上有两个外容器

index-2.html 通过获取索引来进行图片轮播，布局上只需要一个外容器

代码：

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title>轮播图</title>

  <style>

    * {

      margin: 0;

      padding: 0;

    }

    li {

      list-style: none;

    }

    .containner {

      position: relative;

      overflow: hidden;

      width: 900px;

      height: 600px;

    }

    .containner:hover #prev,

    .containner:hover #next {

      display: block;

    }

    #prev,

    #next {

      display: none;

      position: absolute;

      top: 0;

      width: 15%;

      height: 100%;

      font-size: 50px;

      color: DodgerBlue;

      background: rgba(244, 50, 0, .1);

      text-align: center;

      cursor: pointer;

    }

    #prev {

      left: 0;

    }

    #next {

      right: 0;

    }

    .picGroup {

      position: absolute;

      width: 100%;

      height: 100%;

    }

    .picGroup img {

      display: block;

      width: 100%;

      height: 100%;

    }

    .titleGroup {

      position: absolute;

      top: 80%;

      width: 100%;

      height: 36px;

      line-height: 36px;

      background: rgba(0, 0, 0, .2);

      text-align: center;

      color: #fff;

    }

    .titleGroup p {

      display: none;

    }

    .btnGroup {

      position: absolute;

      top: 90%;

      left: 50%;

      transform: translateX(-50%);

    }

    .btnGroup li {

      display: inline-block;

      width: 10px;

      height: 10px;

      margin: 4px;

      background: #fff;

      cursor: pointer;

    }

  </style>

</head>

<body onselectstart="return false;" style="-moz-user-select:none;">

  <div class="containner">

    <div class="picGroup">

      <img src="http://img3.imgtn.bdimg.com/it/u=1525767941,1365223150&fm=26&gp=0.jpg">

      <img src="http://img0.imgtn.bdimg.com/it/u=501564876,418990644&fm=26&gp=0.jpg">

      <img src="http://img0.imgtn.bdimg.com/it/u=2402875933,3197600583&fm=26&gp=0.jpg">

    </div>

    <div class="titleGroup">

      <p>标题1</p>

      <p>标题2</p>

      <p>标题3</p>

    </div>

    <ul class="btnGroup">

      <li></li>

      <li></li>

      <li></li>

    </ul>

    <span id="prev"><</span>

    <span id="next">></span>

  </div>

</body>

<script>

  var current = 0;

  var picGroupItem = document.getElementsByClassName('picGroup')[0];

  var imgHeight = picGroupItem.offsetHeight;

  var ctrlLeft = document.getElementById('prev');

  var ctrlRight = document.getElementById('next');

  ctrlLeft.style.lineHeight = imgHeight+'px';

  ctrlRight.style.lineHeight = imgHeight+'px';

  var btnGroupItem = document.getElementsByClassName('btnGroup')[0];

  btnGroupItem.children[current].style.background = 'red';

  var titleGroupItem = document.getElementsByClassName('titleGroup')[0];

  titleGroupItem.children[current].style.display = 'block';

  var aLi = document.getElementsByTagName('li');

  var title = document.getElementsByTagName('p');

  var picLen = picGroupItem.children.length;

  var timer;

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

    aLi[i].index = [i];

    aLi[i].onclick = function () {

      clearInterval(timer);

      timer = setInterval(run, 2000);

      current = this.index;

      picGroupItem.style.top =  -imgHeight * current + 'px';

      otherChange();

    }

  }

  // 开始轮播

  timer = setInterval(run, 2000);

  function run() {

    current++

    current %= picLen

    picGroupItem.style.top =  -imgHeight * current + 'px';

    otherChange();

  }

  //按钮、title的事件

  function otherChange() {

    for (var i = 0; i < picLen; i++) {

      if (i == current) {

        aLi[i].style.background = "red";

        title[i].style.display = "block";

      } else {

        aLi[i].style.background = "";

        title[i].style.display = "";

      }

    }

  }

  ctrlLeft.onclick = function () {

    clearInterval(timer);

    timer = setInterval(run, 2000);

    --current;

    current = current<0?picLen+current:current;

    current %= picLen;

    picGroupItem.style.top =  -imgHeight * current + 'px';

    otherChange();

  }

  ctrlRight.onclick = function () {

    clearInterval(timer);

    timer = setInterval(run, 2000);

    ++current;

    current %= picLen;

    picGroupItem.style.top =  -imgHeight * current + 'px';

    otherChange();

  }

</script>

</body>

</html>

javascript写的轮播图的更多相关文章

  1. 自己用原生JS写的轮播图，支持移动端触摸滑动，分页器圆点可以支持mouseover鼠标移入和click点击，高手看了勿喷哈

    自己用原生JavaScript写的轮播图,分页器圆点按钮可支持click点击,也可支持mouseover鼠标悬浮触发,同时支持移动端触摸滑动,有兴趣的友友可以试试哈,菜鸟一枚,高手看了勿喷,请多多指正 ...

  2. 自己用原生JS写的轮播图，支持移动端触屏滑动，面向对象思路。分页器圆点支持click和mouseover。

    自己用原生javascript写的轮播图,面向对象思路,支持移动端手指触屏滑动.分页器圆点可以选择click点击或mouseover鼠标移入时触发.图片滚动用的setInterval,感觉setInt ...

  3. 用jQuery写的轮播图

    效果图: GitHub地址:https://github.com/123456abcdefg/Javascript 大家可以下载源码查看. 与前一篇写的轮播图实现的效果一致,这个是用jQuery写的, ...

  4. javascript原生js轮播图

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. jquery手写焦点轮播图-------解决最后一张无缝跳转第一张的问题

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Web前端原生JavaScript浅谈轮播图

    1.一直来说轮播图都是困扰刚进业内小白的一大难点,因为我们不仅需要自己作出一个比较完美的运动框架(虽然网上一抓一大把,但是哪有比自己做出来实现的有成就感,不是吗?^_^),还必须需要非常关键性的把握住 ...

  7. 从零开始学习前端JAVASCRIPT — 11、JavaScript运动模型及轮播图效果、放大镜效果、自适应瀑布流

    未完待续...... 一.运动原理 通过连续不断的改变物体的位置,而发生移动变化. 使用setInterval实现. 匀速运动:速度值一直保持不变. 多物体同时运动:将定时器绑设置为对象的一个属性. ...

  8. 原生js写简单轮播图方式１－从左向右滑动

    轮播图就是让图片每隔几秒自动滑动,达到图片轮流播放的效果.轮播图从效果来说有滑动式的也有渐入式的,滑动式的轮播图就是图片从左向右滑入的效果,渐入式的轮播图就是图片根据透明度渐渐显示的效果,这里说的是实 ...

  9. 原生javascript之实战 轮播图

    成品效果如下图所示: 因为博客园限制图片上传大小被我删了一些帧数,所以图片看起来会有一点卡,现实运行是不会的 搭建HTML和CSS结构 HTML代码如下: <div class="wr ...

随机推荐

  1. Docker容器-入门级

    1.1 容器简介 1.1.1 什么是 Linux 容器 Linux容器是与系统其他部分隔离开的一系列进程,从另一个镜像运行,并由该镜像提供支持进程所需的全部文件.容器提供的镜像包含了应用的所有依赖项, ...

  2. PAT——乙级1022：D进制的A+B &乙级1037：在霍格沃茨找零钱

    1022 D进制的A+B (20 point(s)) 输入两个非负 10 进制整数 A 和 B (≤2​30​​−1),输出 A+B 的 D (1<D≤10)进制数. 输入格式: 输入在一行中依 ...

  3. SQL 基础笔记（三）：约束

    个人笔记不保证正确. 数据类型是限制我们可以在表里存储什么数据的一种方法.不过,对于许多应用来说, 这种限制实在是太粗糙了.比如,一个包含产品价格的字段应该只接受正数. 但是没有哪种标准数据类型只接受 ...

  4. Struts2—整合Spring

    Struts2—整合Spring Spring框架是一个非常优秀的轻量级java EE容器,大部分javaEE应用,都会考虑使用Spring容器来管理应用中的组件. Struts2是一个MVC框架,是 ...

  5. BZOJ 2756 SCOI2012 奇怪的游戏 最大流

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=2756 Description Blinker最近喜欢上一个奇怪的游戏. 这个游戏在一个 N ...

  6. 有向图的强连通分量——kosaraju算法

    一.前人种树 博客:Kosaraju算法解析: 求解图的强连通分量

  7. lintcode-92-背包问题

    92-背包问题 在n个物品中挑选若干物品装入背包,最多能装多满?假设背包的大小为m,每个物品的大小为A[i] 注意事项 你不可以将物品进行切割. 样例 如果有4个物品[2, 3, 5, 7] 如果背包 ...

  8. yii视频地址哦

    https://www.yiichina.com/video  

  9. 算法(1)K-diff Pairs in an Array

    写在前面:研究操作系统,习惯了用C,但是在做算法题甚至构建大型系统时,C真的是噩梦.还是用C++比较好,基本算法很成熟,并可基于此实现更复杂的算法.那就边写算法边捡起来好久不用的C++吧! 题目:数组 ...

  10. 使用PHP静态变量当缓存的方法

    下面这个PHP的代码实例,功能是帮助用户重置密码,requestResetPassword是接收用户重置密码的请求并且做了相应的检查.为了更好的复用性,我将重置密码的操作单独分配到一个新的resetP ...