首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JS实现图片轮播效果实例详解【可自动和手动】

Posted in Javascript onApril 04, 2019

本文实例讲述了JS实现图片轮播效果。分享给大家供大家参考，具体如下：

本次轮播效果图如下：

JS实现图片轮播效果实例详解【可自动和手动】

具有以下功能：1.自动播放（鼠标进入显示区域时停止播放） 2.左右焦点切换  3.底下小按钮切换

以下为实现代码：

首先是html代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>最简单的轮播效果</title>
</head>
<body>
<div class="box" id="box">
  <div class="inner">
    <!--轮播图-->
    <ul>
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/1.jpg" alt=""></a></li>
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/2.jpg" alt=""></a></li>
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/3.jpg" alt=""></a></li>
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/4.jpg" alt=""></a></li>
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/5.jpg" alt=""></a></li>
    </ul>
    <ol class="bar">
      小按钮数量无法确定，由js动态生成
    </ol>
    <!--左右焦点-->
    <div id="arr">
       <span id="left"> <</span>
       <span id="right">></span>
    </div>

  </div>
</div>

</body>
</html>

接下来是css样式：

<style>
    * {
      margin: 0;
      padding: 0
    }
    .box {
      width: 500px;
      height: 300px;
      border: 1px solid #ccc;
      margin: 100px auto;
      padding: 5px;

    }
    .inner{
      width: 500px;
      height: 300px;
      position: relative;
      overflow: hidden;
    }
    .inner img{
      width: 500px;
      height: 300px;
      vertical-align: top
    }
    ul {
      width: 1000%;
      position: absolute;
      list-style: none;
      left:0;
      top: 0;
    }
    .inner li{
      float: left;

    }

    ol {
      position: absolute;
      height: 20px;
      right: 20px;
      bottom: 20px;
      text-align: center;
      padding: 5px;
    }
    ol li{
      display: inline-block;
      width: 20px;
      height: 20px;
      line-height: 20px;
      background-color: #fff;
      margin: 5px;
      cursor: pointer;

    }
    ol .current{
      background-color: red;
    }
    #arr{
      display: none;
    }
    #arr span{
      width: 40px;
      height: 40px;
      position: absolute;
      left: 5px;
      top: 50%;
      margin-top: -20px;
      background: #fff;
      cursor: pointer;
      line-height: 40px;
      text-align: center;
      font-weight: bold;
      font-family: '黑体';
      font-size: 30px;
      color: #000;
      opacity: 0.5;
      border: 1px solid #fff;
    }
    #arr #right {
      right: 5px;
      left: auto;
    }

第三部分是最主要的js代码：

<script>
  /**
   *
   * @param id 传入元素的id
   * @returns {HTMLElement | null} 返回标签对象，方便获取元素
   */
  function my$(id) {
    return document.getElementById(id);
  }

  //获取各元素，方便操作
  var box=my$("box");
  var inner=box.children[0];
  var ulObj=inner.children[0];
  var list=ulObj.children;
  var olObj=inner.children[1];
  var arr=my$("arr");
  var imgWidth=inner.offsetWidth;
  var right=my$("right");
  var pic=0;
  //根据li个数，创建小按钮
  for(var i=0;i<list.length;i++){
    var liObj=document.createElement("li");

    olObj.appendChild(liObj);
    liObj.innerText=(i+1);
    liObj.setAttribute("index",i);

    //为按钮注册mouseover事件
    liObj.onmouseover=function () {
      //先清除所有按钮的样式

      for (var j=0;j<olObj.children.length;j++){
        olObj.children[j].removeAttribute("class");
      }
      this.className="current";
      pic=this.getAttribute("index");
      animate(ulObj,-pic*imgWidth);
    }

  }


  //设置ol中第一个li有背景颜色
  olObj.children[0].className = "current";
  //克隆一个ul中第一个li,加入到ul中的最后=====克隆
  ulObj.appendChild(ulObj.children[0].cloneNode(true));

  var timeId=setInterval(onmouseclickHandle,1000);
  //左右焦点实现点击切换图片功能
  box.onmouseover=function () {
    arr.style.display="block";
    clearInterval(timeId);
  };
  box.onmouseout=function () {
    arr.style.display="none";
    timeId=setInterval(onmouseclickHandle,1000);
  };

  right.onclick=onmouseclickHandle;
  function onmouseclickHandle() {
    //如果pic的值是5,恰巧是ul中li的个数-1的值,此时页面显示第六个图片,而用户会认为这是第一个图,
    //所以,如果用户再次点击按钮,用户应该看到第二个图片
    if (pic == list.length - 1) {
      //如何从第6个图,跳转到第一个图
      pic = 0;//先设置pic=0
      ulObj.style.left = 0 + "px";//把ul的位置还原成开始的默认位置
    }
    pic++;//立刻设置pic加1,那么此时用户就会看到第二个图片了
    animate(ulObj, -pic * imgWidth);//pic从0的值加1之后,pic的值是1,然后ul移动出去一个图片
    //如果pic==5说明,此时显示第6个图(内容是第一张图片),第一个小按钮有颜色,
    if (pic == list.length - 1) {
      //第五个按钮颜色干掉
      olObj.children[olObj.children.length - 1].className = "";
      //第一个按钮颜色设置上
      olObj.children[0].className = "current";
    } else {
      //干掉所有的小按钮的背景颜色
      for (var i = 0; i < olObj.children.length; i++) {
        olObj.children[i].removeAttribute("class");
      }
      olObj.children[pic].className = "current";
    }
  }
  left.onclick=function () {
    if (pic==0){
      pic=list.length-1;
      ulObj.style.left=-pic*imgWidth+"px";
    }
    pic--;
    animate(ulObj,-pic*imgWidth);
    for (var i = 0; i < olObj.children.length; i++) {
      olObj.children[i].removeAttribute("class");
    }
    //当前的pic索引对应的按钮设置颜色
    olObj.children[pic].className = "current";
  };

  //设置任意的一个元素,移动到指定的目标位置
  function animate(element, target) {
    clearInterval(element.timeId);
    //定时器的id值存储到对象的一个属性中
    element.timeId = setInterval(function () {
      //获取元素的当前的位置,数字类型
      var current = element.offsetLeft;
      //每次移动的距离
      var step = 10;
      step = current < target ? step : -step;
      //当前移动到位置
      current += step;
      if (Math.abs(current - target) > Math.abs(step)) {
        element.style.left = current + "px";
      } else {
        //清理定时器
        clearInterval(element.timeId);
        //直接到达目标
        element.style.left = target + "px";
      }
    }, 10);
  }
</script>

所有用图片如下：

1.jpg

JS实现图片轮播效果实例详解【可自动和手动】

2.jpg

JS实现图片轮播效果实例详解【可自动和手动】

3.jpg

JS实现图片轮播效果实例详解【可自动和手动】

4.jpg

JS实现图片轮播效果实例详解【可自动和手动】

5.jpg

JS实现图片轮播效果实例详解【可自动和手动】

下面是完整的代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>最简单的轮播效果</title>
  <style>
    * {
      margin: 0;
      padding: 0
    }
    .box {
      width: 500px;
      height: 300px;
      border: 1px solid #ccc;
      margin: 100px auto;
      padding: 5px;

    }
    .inner{
      width: 500px;
      height: 300px;
      position: relative;
      overflow: hidden;
    }
    .inner img{
      width: 500px;
      height: 300px;
      vertical-align: top
    }
    ul {
      width: 1000%;
      position: absolute;
      list-style: none;
      left:0;
      top: 0;
    }
    .inner li{
      float: left;

    }

    ol {
      position: absolute;
      height: 20px;
      right: 20px;
      bottom: 20px;
      text-align: center;
      padding: 5px;
    }
    ol li{
      display: inline-block;
      width: 20px;
      height: 20px;
      line-height: 20px;
      background-color: #fff;
      margin: 5px;
      cursor: pointer;

    }
    ol .current{
      background-color: red;
    }
    #arr{
      display: none;
    }
    #arr span{
      width: 40px;
      height: 40px;
      position: absolute;
      left: 5px;
      top: 50%;
      margin-top: -20px;
      background: #fff;
      cursor: pointer;
      line-height: 40px;
      text-align: center;
      font-weight: bold;
      font-family: '黑体';
      font-size: 30px;
      color: #000;
      opacity: 0.5;
      border: 1px solid #fff;
    }
    #arr #right {
      right: 5px;
      left: auto;
    }
  </style>
</head>
<body>
<div class="box" id="box">
  <div class="inner">
    <!--轮播图-->
    <ul>
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/1.jpg" alt=""></a></li>
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/2.jpg" alt=""></a></li>
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/3.jpg" alt=""></a></li>
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/4.jpg" alt=""></a></li>
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/5.jpg" alt=""></a></li>

    </ul>

    <ol class="bar">

    </ol>
    <!--左右焦点-->
    <div id="arr">
          <span id="left">
            <
          </span>
      <span id="right">
            >
          </span>
    </div>

  </div>
</div>
<script>
  /**
   *
   * @param id 传入元素的id
   * @returns {HTMLElement | null} 返回标签对象，方便获取元素
   */
  function my$(id) {
    return document.getElementById(id);
  }

  //获取各元素，方便操作
  var box=my$("box");
  var inner=box.children[0];
  var ulObj=inner.children[0];
  var list=ulObj.children;
  var olObj=inner.children[1];
  var arr=my$("arr");
  var imgWidth=inner.offsetWidth;
  var right=my$("right");
  var pic=0;
  //根据li个数，创建小按钮
  for(var i=0;i<list.length;i++){
    var liObj=document.createElement("li");

    olObj.appendChild(liObj);
    liObj.innerText=(i+1);
    liObj.setAttribute("index",i);

    //为按钮注册mouseover事件
    liObj.onmouseover=function () {
      //先清除所有按钮的样式

      for (var j=0;j<olObj.children.length;j++){
        olObj.children[j].removeAttribute("class");
      }
      this.className="current";
      pic=this.getAttribute("index");
      animate(ulObj,-pic*imgWidth);
    }

  }


  //设置ol中第一个li有背景颜色
  olObj.children[0].className = "current";
  //克隆一个ul中第一个li,加入到ul中的最后=====克隆
  ulObj.appendChild(ulObj.children[0].cloneNode(true));

  var timeId=setInterval(onmouseclickHandle,1000);
  //左右焦点实现点击切换图片功能
  box.onmouseover=function () {
    arr.style.display="block";
    clearInterval(timeId);
  };
  box.onmouseout=function () {
    arr.style.display="none";
    timeId=setInterval(onmouseclickHandle,1000);
  };

  right.onclick=onmouseclickHandle;
  function onmouseclickHandle() {
    //如果pic的值是5,恰巧是ul中li的个数-1的值,此时页面显示第六个图片,而用户会认为这是第一个图,
    //所以,如果用户再次点击按钮,用户应该看到第二个图片
    if (pic == list.length - 1) {
      //如何从第6个图,跳转到第一个图
      pic = 0;//先设置pic=0
      ulObj.style.left = 0 + "px";//把ul的位置还原成开始的默认位置
    }
    pic++;//立刻设置pic加1,那么此时用户就会看到第二个图片了
    animate(ulObj, -pic * imgWidth);//pic从0的值加1之后,pic的值是1,然后ul移动出去一个图片
    //如果pic==5说明,此时显示第6个图(内容是第一张图片),第一个小按钮有颜色,
    if (pic == list.length - 1) {
      //第五个按钮颜色干掉
      olObj.children[olObj.children.length - 1].className = "";
      //第一个按钮颜色设置上
      olObj.children[0].className = "current";
    } else {
      //干掉所有的小按钮的背景颜色
      for (var i = 0; i < olObj.children.length; i++) {
        olObj.children[i].removeAttribute("class");
      }
      olObj.children[pic].className = "current";
    }
  }
  left.onclick=function () {
    if (pic==0){
      pic=list.length-1;
      ulObj.style.left=-pic*imgWidth+"px";
    }
    pic--;
    animate(ulObj,-pic*imgWidth);
    for (var i = 0; i < olObj.children.length; i++) {
      olObj.children[i].removeAttribute("class");
    }
    //当前的pic索引对应的按钮设置颜色
    olObj.children[pic].className = "current";
  };

  //设置任意的一个元素,移动到指定的目标位置
  function animate(element, target) {
    clearInterval(element.timeId);
    //定时器的id值存储到对象的一个属性中
    element.timeId = setInterval(function () {
      //获取元素的当前的位置,数字类型
      var current = element.offsetLeft;
      //每次移动的距离
      var step = 10;
      step = current < target ? step : -step;
      //当前移动到位置
      current += step;
      if (Math.abs(current - target) > Math.abs(step)) {
        element.style.left = current + "px";
      } else {
        //清理定时器
        clearInterval(element.timeId);
        //直接到达目标
        element.style.left = target + "px";
      }
    }, 10);
  }
</script>
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

JS实现图片轮播效果实例详解【可自动和手动】

- Author -

呵呵到天亮

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
使弱类型的语言JavaScript变强势
Jun 22 Javascript
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
Mar 10 Javascript
jQuery操作input type=radio的实现代码
Jun 14 Javascript
jquery专业的导航菜单特效代码分享
Aug 29 Javascript
基于Jquery easyui 选中特定的tab
Nov 17 Javascript
jQuery实现获取h1-h6标题元素值的方法
Mar 06 Javascript
php简单数据库操作类的封装
Jun 08 Javascript
javascript实现文件拖拽事件
Mar 29 Javascript
利用Promise自定义一个GET请求的函数示例代码
Mar 20 Javascript
Vue移动端实现图片上传及超过1M压缩上传
Dec 23 Javascript
vue-element-admin项目导入和导出的实现
May 21 Vue.js
vue如何实现关闭对话框后刷新列表
Apr 08 Vue.js
Vue传参一箩筐(页面、组件)
Apr 04 #Javascript
Vue使用.sync 实现父子组件的双向绑定数据问题
Apr 04 #Javascript
小程序getLocation需要在app.json中声明permission字段
Apr 04 #Javascript
Vue组件内部实现一个双向数据绑定的实例代码
Apr 04 #Javascript
详解JavaScript的变量
Apr 04 #Javascript
vue elementUI table表格数据 滚动懒加载的实现方法
Apr 04 #Javascript
js 计算图片内点个数的示例代码
Apr 04 #Javascript
性能优化(3) MYSQL函数(1) 事务(5) offset(1) 逻辑架构(1) mysql.user(1) Mysql报错(1) 锁(1) 定时任务(2) limit(1)
You might like
加强版phplib的DB类
2008/03/31 PHP
php简单socket服务器客户端代码实例
2015/05/18 PHP
php 微信公众平台开发模式实现多客服的实例代码
2016/11/07 PHP
js jquery做的图片连续滚动代码
2008/01/06 Javascript
javascript Array数组对象的扩展函数代码
2010/05/22 Javascript
javascript中return，return true,return false三者的用法及区别
2015/11/17 Javascript
JS实现支持Ajax验证的表单插件
2016/03/24 Javascript
javascript中数组和字符串的方法对比
2016/07/20 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
2016/11/04 Javascript
AngularJs基于角色的前端访问控制的实现
2016/11/07 Javascript
使用JS读取XML文件的方法
2016/11/25 Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
2017/03/04 Javascript
基于vue2.0实现的级联选择器
2017/06/09 Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
2018/11/27 jQuery
vue基于v-charts封装双向条形图的实现代码
2019/12/09 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
2021/02/06 Javascript
JavaScript实现点击出现子菜单效果
2021/02/08 Javascript
[45:44]完美世界DOTA2联赛PWL S2 FTD vs PXG 第一场 11.27
2020/12/01 DOTA
Python简单生成8位随机密码的方法
2017/05/24 Python
使用Turtle画正螺旋线的方法
2017/09/22 Python
Python实现基本数据结构中栈的操作示例
2017/12/04 Python
Python实现统计给定列表中指定数字出现次数的方法
2018/04/11 Python
django-rest-framework解析请求参数过程详解
2019/07/18 Python
python能自学吗
2020/06/18 Python
使用python批量修改XML文件中图像的depth值
2020/07/22 Python
澳大利亚窗帘商店：Curtain Wonderland
2019/12/01 全球购物
致标枪运动员广播稿
2014/02/06 职场文书
《愚公移山》教学反思
2014/02/20 职场文书
土建专业大学生自荐信范文
2014/04/09 职场文书
寄语学生的话
2014/04/10 职场文书
安全生产专项整治方案
2014/05/06 职场文书
团日活动总结模板
2014/06/25 职场文书
教育局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
新闻稿标题
2015/07/18 职场文书
少先队大队委竞选口号
2015/12/25 职场文书
2016机关干部作风建设心得体会
2016/01/21 职场文书