JavaScript实现无限轮播效果

2024-12-23 09:07:28

本文实例为大家分享了JavaScript实现无限轮播效果的具体代码，供大家参考，具体内容如下

效果展示

原理

图片说明原理

轮播顺序：1–>2–>3–>4–>5–>1的副本–>2–>3–>4–>5–>1的副本–>2…一直循环

鼠标进入图片时自动轮播暂停，离开后恢复

资源下载

代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>无限轮播</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    img {
      vertical-align: top;
    }
    #slider {
      width: 520px;
      height: 280px;
      border: 1px solid #000;
      padding: 10px;
      margin: 100px auto;
      position: relative;

    }
    #top {
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden;
    }
    #top ul {
      width: 3120px;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
    }
    #top ul li {
      width: 520px;
      height: 280px;
      float: left;
    }
    #slider ol {
      position: absolute;
      right: 10px;
      bottom: 10px;
    }
    #slider ol li {
      width: 20px;
      height: 20px;
      background-color: darkgrey;
      display: inline-block;
      border-radius: 50%;
      margin-right: 3px;
      cursor: pointer;
    }
    #slider ol li.current {
      background-color: orangered;
    }
  </style>
</head>
<body>
  <div id="slider">
    <div id="top">
      <ul id="ul">
        <li><img src="images/pic01.jpg" alt=""></li>
        <li><img src="images/pic02.jpg" alt=""></li>
        <li><img src="images/pic03.jpg" alt=""></li>
        <li><img src="images/pic04.jpg" alt=""></li>
        <li><img src="images/pic05.jpg" alt=""></li>
      </ul>
    </div>
    <ol id="ol">
    </ol>
  </div>
<script src="js/myFunc.js"></script>
<script>
  window.onload = function () {
    // 1.获取需要的标签
    var lis = $("ul").children;

    // 6.自动轮播参数定义（图片索引，圆点索引）
    var currentIndex = 0, indicatorIndex = 0;

    // 2.克隆li标签(将第一个li标签克隆一份到最后一个li标签后面)
    $("ul").appendChild(lis[0].cloneNode(true));

    // 3.动态创建右下角的圆点
    for(var i=0; i<lis.length-1; i++){ // 因为克隆了一个li，所以需要减1
      var li = document.createElement("li");
      $("ol").appendChild(li);
    }

    // 4.第一个圆点选中
    $("ol").children[0].className = "current";

    // 5.监听鼠标进入圆点
    var olLis = $("ol").children;
    for(var j=0; j<olLis.length; j++){
      (function (j) { // 闭包
        // 5.1 获取单独的li标签
        var li = olLis[j];

        // 5.2 鼠标进入
        li.onmouseover = function () {
          for(var i=0; i<olLis.length; i++){ // 排他思想
            olLis[i].className = "";
          }

          this.className = "current";

          // 5.3 轮播图动起来
          constant($("ul"), -(520 * j), 60);

          // 6.1
          currentIndex = indicatorIndex = j;
        }
      })(j)
    }

    // 7.自动轮播
    var timer = setInterval(autoPlay, 1000);

    // 8.清除和设置定时器
    $("slider").onmouseover = function () {
      clearInterval(timer);
    };

    $("slider").onmouseout = function () {
      timer = setInterval(autoPlay, 1000);
    };

    /**
     * 自动轮播函数
     */
    function autoPlay() {
      // 7.1 ul 滚动起来
      currentIndex++;
      if(currentIndex > lis.length-1){
        $("ul").style.left = 0;
        currentIndex = 1;
      }
      constant($("ul"), -currentIndex * 520, 60);

      // 7.2 圆点滚动起来
      indicatorIndex++;
      if(indicatorIndex > olLis.length-1){
        indicatorIndex = 0;
      }
      for(var i=0; i<olLis.length; i++){ // 排他思想
        olLis[i].className = "";
      }

      olLis[indicatorIndex].className = "current";
    }
  }
</script>
</body>
</html>

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

无限循环轮播图之运动框架(原生JS实现)

封装运动框架 function getStyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; }else{ return getComputedStyle(obj,false)[name]; } } function move(obj,json,options){ var options=options || {}; var duration=options.duration || 800; var easing
js图片自动轮播代码分享(js图片轮播)

1.利用图片width显示位置来播放图片,技术:.offsetWidth .aBtn[i].index = i .setInterval() .oUl[0].style.left = .onclick()2.利用数组放入图片经行轮播,技术:setInterval().没有onclick() 图片轮播12js.html 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:
JS实现简易图片轮播效果的方法

本文实例讲述了JS实现简易图片轮播效果的方法.分享给大家供大家参考.具体如下: 这里使用JS制作简易图片轮播效果: 制作比较粗糙,使用的图片是width:660ppx,height:550px; 效果图如下: 代码部分如下: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; char
js 图片轮播(5张图片)

演示地址:http://img.jb51.net/online/picPlayer/picplay.htm 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/199
JS实现无限轮播无倒退效果

本文实例为大家分享了JS实现无限轮播无倒退的具体代码,供大家参考,具体内容如下原理:每次移动前设置transition过渡效果,完成清除过渡效果,然后在到达最后一张图片的时候在清除过渡效果之后translateX(0) 另外需要jq的引用 HTML: <div class="slide-container" view-count="3"> <ul> <li> <img src="images/women/1544
最简单的JavaScript图片轮播代码(两种方法)

通过改变每个图片的opacity属性: 素材图片: 代码一: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-"> <title>最简单的轮播广告</title> <style> body, div, ul, li { margin: ; padding: ; } ul { list-style-type: non
js实现轮播图的完整代码

今天写一个完整的轮播图,首先它需要实现三个功能: 1.鼠标放在小圆点上实现轮播 2.点击焦点按钮实现轮播 3.无缝自动轮播轮播图的原理: 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过计算偏移量(封装一个动画函数)自动播放,或通过手动点击事件切换图片. html布局: <div id="box" class="all"> <div class="inner">
原生js和jquery实现图片轮播特效

(1)首先是页面的结构部分对于我这种左右切换式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式) 4.然后是图片两端的左箭头和右箭头 5.然后是一个透明背景层,放在图片底部 6.然后是一个图片描述info层,放在透明背景层的左下角(div 或 ul-->li) 7.然后是一个按钮层,用来定位图片组的index吧,放在透明背景层的右下角(div
js图片轮播效果实现代码

首先给大家看一看js图片轮播效果,如下图具体思路: 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒钟index递增一次.调用一次切换图片函数提示: 1. index不能一直无限制的递增下去,需做判断 2.调用切换图片函数时需将递增之后的index作为参数传过去三.定义图片切换函数提示: 1.遍历所有放数字索引的li,将每个li上的类去掉. 2.根据传递过来的index值找到对应的li给
原生js实现无限循环轮播图效果

知识要点 1.实现无限循环的原理: 以偏移的距离来判断是否跳回第一张和最后一张也可以利用循环判断图片的当前索引值 var newLeft=parseInt(list.style.left)+offset;//当前的偏移量+下一次的偏移量=新的偏移量 list.style.left=newLeft+"px";//当前的偏移值=新的偏移值 //以偏移的距离来判断是否跳回第一张和最后一张 if(newLeft>-600){ list.style.left=-3000+"px

JavaScript实现无限轮播效果

相关推荐

随机推荐