欢迎指点！

预览图：

可以通过 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. 以太坊remix IDE安装步骤

    Remix 以太坊Solidity IDE搭建与初步使用 以太坊: 因为以太坊为开源社区,虽然东西很优秀,但是组件十分的杂乱,因此首先简单介绍下以太坊的一些常用组件: Geth: Geth是由以太坊基 ...

  2. BZOJ 2333 SCOI2011 棘手的操作 并查集+可并堆

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=2333 ..题意概述就不写了,各位老爷如果是看着玩的可以去搜一下,如果是做题找来的也知道题干 ...

  3. nopcommerce商城系统--安装nopCommerce

    原址:http://www.nopcommerce.com/docs/79/installing-nopcommerce.aspx .NET Framework 4.5.1下载:http://www. ...

  4. 基于SDN的IP RAN网络虚拟化技术

    http://www.zte.com.cn/cndata/magazine/zte_technologies/2014/2014_4/magazine/201404/t20140421_422858. ...

  5. gdb查看内存中所有的信息

    他们会把做内核的人当成无所不能的,认为你们对反编译啥的都应该会. 俗话说的好,人要活成别人想要的样子嘛: 看下如何停止进程,让大家看到内存中到底是啥样子; 简单的print globalA当然能输出来 ...

  6. css引入特殊字体

    http://www.fontsquirrel.com/tools/webfont-generator        ttf格式的字体转换成其他格式的字体   css引入特殊字体建议只是用英文字体,中 ...

  7. Socket常见错误代码与描述

    最近程序 出现 几次 Socket 错误, 为了便于 差错.. 搜了一些 贴在这里.. 出现网络联机错误Socket error #11001表示您的计算机无法连上服务器,请检查您的Proxy设定以及 ...

  8. 附录A培训实习生-面向对象基础方法重载(3)

    就上一篇代码而言,你如果写Cat cat = new Cat();会直接报错错误 : 1       “Cat”方法没有采用“0”个参数的重载 E:\大话设计模式学习\BigDesignPattern ...

  9. 【题解】HNOI2010合唱队

    我果然还是太弱了呜呜呜……洛谷P3205 区间dp:注意到一段区间最两侧的人必然是最后加入队伍的所以由此我们可以分成两种情况来讨论. 一种是最后一个加入的人是左边的,另一种是右边的.那么状态:dp[i ...

  10. [codechef FNCS]分块处理+树状数组

    题目链接:https://vjudge.net/problem/CodeChef-FNCS 在一个地方卡了一晚上,就是我本来以为用根号n分组,就会分成根号n个.事实上并不是....因为用的是根号n下取 ...