欢迎指点！

预览图：

可以通过 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. COJ 2192: Wells弹键盘 (dp)

    2192: Wells弹键盘 Description Wells十分羡慕和佩服那些会弹钢琴的人比如子浩君,然而Wells只会弹键盘…… Wells的键盘只有10个键,从1,2,3,……,9,0,如下图 ...

  2. 输出不重复的质因数(C++)

    [问题描述] 从键盘上输入一个大于 1 的正整数,输出它所有不等的质因数.(什么是质因数?既是质数,又是因数) [代码展示] # include<iostream>using namesp ...

  3. 2.爬虫 urlib库讲解 异常处理、URL解析、分析Robots协议

    1.异常处理 URLError类来自urllib库的error模块,它继承自OSError类,是error异常模块的基类,由request模块产生的异常都可以通过这个类来处理. from urllib ...

  4. kickstart技术安装操作系统

    kickstart是RedHat公司开源的软件,所以对CentOS兼容性最好. 原理:我们将手动安装的所有的详细步骤记录到一个文件中,然后kickstart通过读取这个文件就可以实现自动化安装系统. ...

  5. 使用idea工具开发webservice

    在idea开发工具中使用axis2插件创建集成webservice的web项目: 一.创建java项目                  二.添加webservices支持 在红线框2处选择要使用的w ...

  6. lintcode-118-不同的子序列

    118-不同的子序列 给出字符串S和字符串T,计算S的不同的子序列中T出现的个数. 子序列字符串是原始字符串通过删除一些(或零个)产生的一个新的字符串,并且对剩下的字符的相对位置没有影响.(比如,&q ...

  7. JavaScript页面跳转

    <%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding=& ...

  8. 每个分组函数相当于一个for循环 将集合的变量不断遍历

    每个分组函数相当于一个for循环  将集合的变量不断遍历

  9. 【bzoj1176】[Balkan2007]Mokia/【bzoj2683】简单题 CDQ分治+树状数组

    bzoj1176 题目描述 维护一个W*W的矩阵,初始值均为S(题目描述有误,这里的S没有任何作用!).每次操作可以增加某格子的权值,或询问某子矩阵的总权值.修改操作数M<=160000,询问数 ...

  10. [CF912A]Tricky Alchemy

    题意:你有a个黄水晶和b个蓝水晶,要求要x个黄水晶球(2黄),y个绿水晶球(1黄1蓝),z个蓝水晶球(3蓝),问还要多少水晶题解:模拟 C++ Code: #include<cstdio> ...