欢迎指点！

预览图：

可以通过 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. C++中的默认参数规则

    C++中的默认参数规则 C++的默认参数规则其实是一个非常容易掉坑的规则,尤其是当一个函数拥有多个声明的时候,每个声明的默认参数可以各不相同,在调用时又可能与每个声明都不同:这篇博客稍微列举一下C++ ...

  2. Leetcode 672.灯泡开关II

    灯泡开关II 现有一个房间,墙上挂有 n 只已经打开的灯泡和 4 个按钮.在进行了 m 次未知操作后,你需要返回这 n 只灯泡可能有多少种不同的状态. 假设这 n 只灯泡被编号为 [1, 2, 3 . ...

  3. 对 a = [lambda : x for x in range(3)] 的理解

    上面的语句创建了一个列表 a ,其中有三个元素,每个元素都是一个 lambda 匿名函数. >>> a = [lambda : x for x in range(3)] >&g ...

  4. DFS（3）——poj1321棋盘问题

    一.题目回顾 题目链接:棋盘问题 Description 在一个给定形状的棋盘(形状可能是不规则的)上面摆放棋子,棋子没有区别.要求摆放时任意的两个棋子不能放在棋盘中的同一行或者同一列,请编程求解对于 ...

  5. ios UI自动化测试学习笔记

    一.一些注意事项: 1.做自动化测试时注意如果是真机话首先要设置不锁屏. 2.自动化测试过程中如果程序后台或崩溃了.脚本运行将会暂停,直到程序再次回到前台. 3.必须明确指定关闭自动测试,测试完成或中 ...

  6. HTML5表单提交与PHP环境搭建

    PHP服务器使用xampp集成套件 路径 D:\xampp\htdocs\MyServer\index.php 访问 http://localhost/MyServer/index.php 能够正常显 ...

  7. 大数据分析中Redis应用

    大数据分析中Redis 大数据时代,海量数据分析就像吃饭一样,成为了我们每天的工作.为了更好的为公司提供运营决策,各种抖机灵甚至异想天开的想法都会紧跟着接踵而来!业务多变,决定了必须每天修改系统,重新 ...

  8. WebSocket对象的创建及其与WebSocket服务器的连接(5)

    WebSocket接口的使用非常简单,要连接通信端点,只需要创建一个新的WebSocket实例,并提供希望连接URL. //ws://和wss://前缀分别表示WebSocket连接和安全的WebSo ...

  9. 【bzoj2064】分裂【压状dp】

    Description 背景: 和久必分,分久必和... 题目描述: 中国历史上上分分和和次数非常多..通读中国历史的WJMZBMR表示毫无压力. 同时经常搞OI的他把这个变成了一个数学模型. 假设中 ...

  10. LowercaseRoutesMVC ASP.NET MVC routes to lowercase URLs

    About this Project Tired of your MVC application generating mixed-case URLs like http://mysite.com/H ...