欢迎指点！

预览图：

可以通过 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. 论文翻译--StarCraft Micromanagement with Reinforcement Learning and Curriculum Transfer Learning

    (缺少一些公式的图或者效果图,评论区有惊喜) (个人学习这篇论文时进行的翻译[谷歌翻译,你懂的],如有侵权等,请告知) StarCraft Micromanagement with Reinforce ...

  2. c++知识点总结--函数模板

    通用函数可变参模板 用于处理不限定参数的函数 showall(){//空函数,接口,最后结束递归 } template<typename T,typename... Args> void ...

  3. matlab mex 小o -o 出错

    https://github.com/kyamagu/mexopencv/issues/117 就是说2014a以后的版本mex   -o 选项变成了 -output 蛋疼,这有什么好改的.找了好久才 ...

  4. mongoDB 常用操作CRUD

    1.显示所有的数据库 show dbs   2.切换数据库(如果没有数据库,即是创建数据库) use 数据库名称   3.显示所有的表 show tables   4.查看数据库里的表 show co ...

  5. 将Excel表中的数据导入MySQL数据库

    原文地址: http://fanjiajia.cn/2018/09/26/%E5%B0%86Excel%E8%A1%A8%E4%B8%AD%E7%9A%84%E6%95%B0%E6%8D%AE%E5% ...

  6. lintcode-128-哈希函数

    128-哈希函数 在数据结构中,哈希函数是用来将一个字符串(或任何其他类型)转化为小于哈希表大小且大于等于零的整数.一个好的哈希函数可以尽可能少地产生冲突.一种广泛使用的哈希函数算法是使用数值33,假 ...

  7. C++ Profiler工具之初体验

    http://www.cnblogs.com/likwo/archive/2012/12/20/2826988.html 转 http://www.cnblogs.com/lenolix/archiv ...

  8. 【bzoj4998】星球联盟 LCT+并查集

    题目描述 在遥远的S星系中一共有N个星球,编号为1…N.其中的一些星球决定组成联盟,以方便相互间的交流.但是,组成联盟的首要条件就是交通条件.初始时,在这N个星球间有M条太空隧道.每条太空隧道连接两个 ...

  9. Codeforces Round #391 div1 757F (Dominator Tree)

    首先先膜杜教orz 这里简单说一下支配树的概念 支配树是对一个有向图来讲的 规定一个起点s,如果s到v的路径上必须经过某些点u,那么离s最近的点u就是v的支配点 在树上的关系就是,v的父亲是u. 一般 ...

  10. 国内各运营商（ISP）IP段表

    国内各运营商(ISP)IP段表 来源:http://bbs.hh010.com/forum.php?mod=viewthread&tid=490529&orderby=dateline ...