GVKun编程网logo

JS实现简单图片轮播效果（js实现简单的图片轮播）

26

本文将带您了解关于JS实现简单图片轮播效果的新内容，同时我们还将为您解释js实现简单的图片轮播的相关知识，另外，我们还将为您提供关于HTML+JS实现的简单图片轮播、iOS实现图片轮播效果、JavaS

本文将带您了解关于JS实现简单图片轮播效果的新内容，同时我们还将为您解释js实现简单的图片轮播的相关知识，另外，我们还将为您提供关于HTML+JS实现的简单图片轮播、iOS实现图片轮播效果、JavaScript实现图片轮播效果的简单实例、JavaScript实现简单图片轮播效果的实用信息。

本文目录一览：

JS实现简单图片轮播效果（js实现简单的图片轮播）

JS实现简单图片轮播效果（js实现简单的图片轮播）

本文实例为大家分享了JS实现简单图片轮播效果的具体代码，供大家参考，具体内容如下

实现效果

  • 左右按钮可点击左右移动显示图片进行无缝滚动
  • 下面的小圆圈点击可跳到对应的图片索引
  • 不进行上述操作时，图片自动轮播

html源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Carousel chart</title>
    <link rel="stylesheet" href="./style.css" >
    <script src="./index.js"></script>
    <script src="./animate.js"></script>
</head>

<body>
    <divid="carousel-box">
        <a href="javascript:;">
            < </a>
                <a href="javascript:;"> > </a>
                <ul>
                    <li><img src="./images/xuezhong_1.jpg" alt=""></li>
                    <li><img src="./images/guimizhizhu_2.jpg" alt=""></li>
                    <li><img src="./images/jianlai_3.jpg" alt=""></li>
                    <li><img src="./images/yichang_4.jpg" alt=""></li>
                </ul>
                <ol>
                </ol>
    </div>
</body>

</html>

一个大的div盒子里面，两个左右悬浮于中间的按钮，四张图片，一行相对于下面的小圆圈

CSS源码

*{
    padding: 0;
    margin: 0;
}

li {
    list-style-type: none;
}

#carousel-box {
    position: relative;
    width: 700px;
    height: 300px;
    background-color: pink;
    margin: 100px auto;
    overflow: hidden;
}

.arrow-l,.arrow-r {
    display: none;
    position:absolute;
    width: 24px;
    height: 40px;
    top: 50%;
    margin-top: -20px;
    background: rgba(0, 0, 0, 0.3);
    text-align:center;
    line-height: 40px;
    color: #fff;
    font-size: 18px;
    font-family: ''icomoon'';
    z-index: 3;
}
.arrow-r {
    right: 0;
}

#carousel-box img{
    width: 700px;
    height: 300px;
}

#carousel-box ul {
    position:absolute;
    width: 1000%;
}

#carousel-box ul li {
    float: left;
}

.circle {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

.circle li {
    float: left;
    width: 8px;
    height: 8px;
    margin: 0 5px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    z-index: 9999;
}

.current {
    background-color: pink;
}

JS源码

animate.js：在水平平面实现左右移动的函数

function animate(obj, target, callback) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        /* 判断正负，小数取大还是取小 */
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);

        if (obj.offsetLeft == target) {
            clearInterval(obj.timer);
            callback && callback();
        }
        obj.style.left = obj.offsetLeft + step + ''px'';
    }, 15);
}

index.js

window.addEventListener(''load'', function () {
    var carousel = document.querySelector(''.carousel_box'');
    var ul = document.querySelector(''.move'');
    var ol = document.querySelector(''.circle'');
    var carcouselWidth = carousel.offsetWidth;
    var arrow_l = document.querySelector(''.arrow-l'');
    var arrow_r = document.querySelector(''.arrow-r'');

    carousel.addEventListener(''mouseenter'', function () {
        arrow_r.style.display = ''block'';
        arrow_l.style.display = ''block'';
        clearInterval(timer);
        timer = null; // 清除定时器变量
    })

    carousel.addEventListener(''mouseleave'', function () {
        arrow_r.style.display = ''none'';
        arrow_l.style.display = ''none'';
        timer = setInterval(function () {
            arrow_r.click();
        }, 2000);
    })
    var num = 0;
    var circle = 0;

    // 根据图片数量生成相对应的小圆圈
    for (var i = 0; i < ul.children.length; i++) {
        var li = document.createElement(''li'');
        li.setAttribute(''index'', i);
        ol.appendChild(li);


        li.addEventListener(''click'', function () {
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '''';
            }
            this.className = ''current'';
            var n = this.getAttribute(''index'');
            num = n;
            circle = n;
            animate(ul, -n * carcouselWidth);
            console.log(n);
        })
    }

    ol.children[0].className = ''current'';
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first);

    var flag = true;


    /* function circleChange() {
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '''';
        }
        ol.children[circle].className = ''current'';
    } */


    arrow_r.addEventListener(''click'', function () {

        if (flag) {
            flag = false;
            if (num == ul.children.length - 1) {
                ul.style.left = 0;
                num = 0;
            }
            num++;
            animate(ul, -num * carcouselWidth, function () {
                flag = true;
            });
        }

        circle++;
        if (circle == ol.children.length) {
            circle = 0;
        }

        circleChange();
    })

    arrow_l.addEventListener(''click'', function () {
        if (flag) {
            flag = false;
            if (num == 0) {
                num = ul.children.length - 1;
                ul.style.left = -num * carcouselWidth + ''px'';

            }
            num--;
            animate(ul, -num * carcouselWidth, function () {
                flag = true;
            });

            circle--;
            circle = circle < 0 ? ol.children.length - 1 : circle;
            // 调用函数
            circleChange();
        }
    });


    function circleChange() {

        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '''';
        }

        ol.children[circle].className = ''current'';
    }

    var timer = setInterval(function () {

        arrow_r.click();
    }, 2000);

心得：在js实现功能中，如何根据图片数量生成小圆圈并能无缝滚动需要重点注意。
未解决的bug：多次快速点击小圆圈跳转后，可能会导致小圈圈与图片索引位置错乱，同样点击左右按钮也有可能出现类似问题。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

您可能感兴趣的文章:
  • javascript实现滚轮轮播图片
  • JS实现简易图片自动轮播
  • Js图片点击切换轮播实现代码
  • JavaScript实现轮播图片完整代码
  • 原生js实现点击轮播切换图片
  • JavaScript实现图片轮播特效
  • JavaScript实现六种网页图片轮播效果详解

HTML+JS实现的简单图片轮播

HTML+JS实现的简单图片轮播

实现方法众多，这里我的思路为：

　　容器（这里我使用table）中的初始图片为某一张，JS的timer（理解为全局）的timerout()事件中改变容器中<img>的src属性值，也即图片路径，从而达到每若干秒更换一次图片。

简单实现：

一、容器及<img src>初始值

<table>
　　<tr>
   　　<td id="main_info_jpeg" onclick="fun1()"> //此处onclick事件也能切换图片
   　　　　<img id=''imginfo'' src="./image/test01.jpg"title="01">
   　　</td>
   </tr>
</table>

二、JS轮换函数及timer

<script type="text/javascript">
	//以下脚本实现三张主图的切换
	function fun1(){
		var now_jpeg = document.getElementById("imginfo").getAttribute("src");
		//document.writeln(now_jpeg);
		switch(now_jpeg)
		{
			case ''./image/test01.jpg'':
				document.getElementById(''imginfo'').setAttribute("src",''./image/test02.jpg'');
				break;	
			case ''./image/test02.jpg'':
				document.getElementById(''imginfo'').setAttribute("src",''./image/test03.jpg'');
				break;	
			case ''./image/test03.jpg'':
				document.getElementById(''imginfo'').setAttribute("src",''./image/test01.jpg'');
				break;			
			default:
				document.writeln("未获取src");
				break;	
		}
	}
	self.setInterval(''fun1()'',3000); //作为全局变量理解，事件为：timerout(),事件处理函数为:fun1().
</script>　　

三、实现效果

　　1，鼠标点击图片，图片切换

　　2，不做任何操作，每3秒图片自动切换一次

iOS实现图片轮播效果

iOS实现图片轮播效果

本文实例为大家分享了IOS图片轮播效果的实现过程，供大家参考，具体内容如下

平时APP中的广告位或者滚动的新闻图片等用到的就是图片轮播这种效果，实现方式主要有两种，一种ScrollView+ImageView，另一种则是通过CollectionView，今天总结的是ScrollView这种方式。

1.图片轮播效果实现

主要实现思路是：根据图片总数及宽高设置好ScrollView的大小，每切换一张图片相当于在ScrollView上进行一个图片宽度的移动行为，并加入定时器，实现自动轮播。

如图所示，设置好ScrollView及PageControl，ScrollView的contentSize根据图片数量确定，注意启用pagingEnabled这个属性，确保整页移动，同样pageControl也是根据图片数量来确定，每一页代表一张图片。

图片命名采用数字序号方式，方便使用，需要注意的是，pageControl是由0开始的，也就是0对应image1，1对应image2...依次类推

加载图片并将准备好的图片在ScrollView里设置好位置，即将这些图片一张紧挨着一张排列在ScrollView中。

通过ScrollView的代理方法，在ScrollView滚动结束的时候根据contentOffset更新页码。

定时器设置，这里设置为每隔2秒滚动更新一次，实际上就是每隔2秒更新一次页码，根据页码的变化，让ScrollView跟着移动，每次移动一张图片的距离

这里还需要注意的是，由于加入定时器有自动轮播的效果了，会与手动拖拽ScrollView冲突，即手动拖拽ScrollView过程时ScrollView可能自动移动更新图片了，显然这种效果是不符合用户习惯的，这时需要在ScrollView的代理事件中进行处理，即开始拖拽ScrollView时停止定时器，拖拽结束后再开启定时器。

那到这里是不是就结束了呢？我们看看效果图：

这里有两个问题：

（1）首先是移动到最后一张图片时无法移动了，如果是制作APP的新特性页面，这样的滚动效果已经可以了，但如果在广告位或者是滚动新闻这些场景下这种效果是不够好的，一般滚动到最后一张图片时，继续拖拽都会移动到第一张图片，实现一种滚动循环效果。

（2）定时器自动轮播图片时，确实图片循环轮播了，但是仔细看会发现，ScrollView是由最后一种图片位置生硬得拉回到第一张图片的位置，效果也不够理想。

解决办法，小编先留个悬念，在下面的一篇文章中会进行解答，不要错过。

您可能感兴趣的文章:
  • iOS实现图片轮播器
  • 两行IOS代码实现轮播图
  • IOS使用UICollectionView实现无限轮播效果
  • iOS开发中使用UIScrollView实现图片轮播和点击加载
  • IOS实现图片轮播无限循环效果
  • iOS实现带有缩放效果的自动轮播图
  • iOS实现无限循环轮播图效果
  • iOS实现轮播图banner示例
  • IOS图片无限轮播器的实现原理
  • iOS实现3D卡片式轮播效果

JavaScript实现图片轮播效果的简单实例

JavaScript实现图片轮播效果的简单实例

这篇文章主要介绍了javascript实现简单图片轮播效果，点击下标切换到该图片上，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js实现简单图片轮播的具体代码，最终实现效果图

代码块

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
     <style>
    * {
      margin: 0;
      padding: 0
    }

    ul {
      list-style: none
    }

    img {
      vertical-align: top
    }

    .box {
      width: 490px;
      height: 170px;
      margin: 100px auto;
      padding: 5px;
      border: 1px solid #ccc;
    }

    .inner {
      width: 490px;
      height: 170px;
      background-color: pink;
      overflow: hidden;
      position: relative;
    }

    .inner ul {
      width: 1000%;
      position: absolute;
      top: 0;
      left: 0;
    }

    .inner li {
      float: left;
    }

    .square {
      position: absolute;
      right: 10px;
      bottom: 10px;
    }

    .square span {
      display: inline-block;
      width: 16px;
      height: 16px;
      background-color: #fff;
      text-align: center;
      line-height: 16px;
      cursor: pointer;
    }

    .square span.current {
      background-color: orangered;
      color: #fff;
    }
  </style>
  </head>
  <body>
    <pid="box">
      <p>
        <ul>
          <li><a href="#"><img  src="images/01.jpg" / alt="JavaScript实现图片轮播效果的简单实例" ></a></li>
          <li><a href="#"><img  src="images/02.jpg" / alt="JavaScript实现图片轮播效果的简单实例" ></a></li>
          <li><a href="#"><img  src="images/03.jpg" / alt="JavaScript实现图片轮播效果的简单实例" ></a></li>
          <li><a href="#"><img  src="images/04.jpg" / alt="JavaScript实现图片轮播效果的简单实例" ></a></li>
          <li><a href="#"><img  src="images/05.jpg" / alt="JavaScript实现图片轮播效果的简单实例" ></a></li>
        </ul>
        <p>
          <span>1</span>
          <span>2</span>
          <span>3</span>
          <span>4</span>
          <span>5</span>
        </p>
      </p>
    </p>
  <script type="text/javascript">
    //鼠标经过按钮 按钮排他
    var box = document.getElementById("box");
    var inner = box.children[0];      //获取box下的第一个元素，也就是inner
    var ul = inner.children[0];       //获取inner下的ul
    var squareList = inner.children[1];   //获取inner下的第二个元素
    var squares = squareList.children;   //获取所有的按钮
    var imgWidth = inner.offsetWidth;
//   alert(imgWidth);
    //给每个按钮注册鼠标经过事件
    for(var i=0; i<squares.length; i++){
      squares[i].index = i;      //把索引保存在自定义属性中
      squares[i].onmouseover = function(){  //鼠标经过事件
        //排他 干掉所有人 
        for(var j=0; j<squares.length; j++){
          squares[j].className = "";
        }
        //留下我自己
        this.className = "current";
        //以动画的方式把ul移动到指定的位置
        //目标 和当前按钮索引有关，和图片宽度有关 而且是负数
        var target = -this.index * imgWidth;  //获取到索引
        animate(ul,target);
      }
    }
    function animate(obj, target) {
      clearInterval(obj.timer);
      obj.timer = setInterval(function () {
        var step = 20;
        var step = obj.offsetLeft < target ? step : -step;
        if (Math.abs(obj.offsetLeft - target) > Math.abs(step)) {
          obj.style.left = obj.offsetLeft + step + "px";
        } else {
          obj.style.left = target + "px";
          clearInterval(obj.timer);
        }
      }, 15)
    }
  </script>
  </body>
</html>
登录后复制

以上就是JavaScript实现图片轮播效果的简单实例的详细内容，更多请关注php中文网其它相关文章！

JavaScript实现简单图片轮播效果

JavaScript实现简单图片轮播效果

本文实例为大家分享了js实现简单图片轮播的具体代码，最终实现效果图

代码块

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小编。

rush:xhtml;"> Box" id="Box">
  • 2 3 4 5

    <script type="text/javascript">
    //鼠标经过按钮 按钮排他
    var Box = document.getElementById("Box");
    var inner = Box.children[0]; //获取Box下的第一个元素，也就是inner
    var ul = inner.children[0]; //获取inner下的ul
    var squareList = inner.children[1]; //获取inner下的第二个元素
    var squares = squareList.children; //获取所有的按钮
    var imgWidth = inner.offsetWidth;
    // alert(imgWidth);
    //给每个按钮注册鼠标经过事件
    for(var i=0; i<squares.length; i++){
    squares[i].index = i; //把索引保存在自定义属性中
    squares[i].onmouSEOver = function(){ //鼠标经过事件
    //排他 干掉所有人
    for(var j=0; j<squares.length; j++){
    squares[j].className = "";
    }
    //留下我自己
    this.className = "current";
    //以动画的方式把ul移动到指定的位置
    //目标 和当前按钮索引有关，和图片宽度有关 而且是负数
    var target = -this.index * imgWidth; //获取到索引
    animate(ul,target);
    }
    }

    function animate(obj,target) {
  clearInterval(obj.timer);
  obj.timer = setInterval(function () {
    var step = 20;
    var step = obj.offsetLeft < target ? step : -step;
    if (Math.abs(obj.offsetLeft - target) > Math.abs(step)) {
      obj.style.left = obj.offsetLeft + step + "px";
    } else {
      obj.style.left = target + "px";
      clearInterval(obj.timer);
    }
  },15)
}

    以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小编。

    关于JS实现简单图片轮播效果和js实现简单的图片轮播的介绍已经告一段落，感谢您的耐心阅读，如果想了解更多关于HTML+JS实现的简单图片轮播、iOS实现图片轮播效果、JavaScript实现图片轮播效果的简单实例、JavaScript实现简单图片轮播效果的相关信息，请在本站寻找。

    本文标签：

    上一篇js实现经典扫雷游戏（js实现经典扫雷游戏的方法）

    下一篇ASP Json Parser修正版（json.asp）

    相关文章