小脑斧 发表于 2020-7-23 21:56:22

JS.006WEB API总结(04轮播图,,,)

本帖最后由 小脑斧 于 2020-7-25 17:21 编辑

效果图:


实现效果:
1.鼠标放到数字上,图片播放
2.鼠标点击左右箭头,图片对应滚动
思路:
上一个案列:div平移->图片平移
图片与数字(箭头)一一对应:获取图片宽度*(-)索引值
JS.006:WEB API总结(02)(节点使用)
不足:图片过多时,第一张不能直接到最后一张<待解决>
其余细节见程序
    <script src="jquery-3.2.1/jquery-3.2.1.js"></script>
    <script>
      function myid(id) {
            return document.getElementById(id);
      }
      var box = myid("box");
      var imgs = box.children;
      var imgwidth = imgs.offsetWidth;
      var ulObj=imgs.children;
      var spanobject = imgs.children.children;//获取span
      var focusD = myid("focusD");

      box.onmouseover = function () {
            focusD.style.display = "block";
      };
      box.onmouseout = function () {
            focusD.style.display = "none";
      };
      
      //点击右边按钮
      var index=0;
      myid("right").onclick = function () {
            if(index<ulObj.children.length-1){ //li的长度-1
                index++;
                animate(ulObj,-index*imgwidth);
            }

      };
      //点击左边按钮
      myid("left").onclick = function () {
            if(index>0){
                index--;
                animate(ulObj,-index*imgwidth);//-index
            }
      };


      for (var i=0; i<spanobject.length; i++){
            spanobject.setAttribute("index",i);
            spanobject.onmouseover = function () {
                //先干掉所有的span的背景颜色
                for(var j=0;j<spanobject.length;j++){
                  spanobject.removeAttribute("class");
                }
                this.className="current";
                var index=this.getAttribute("index");
                animate(ulObj,-index*imgwidth);
            };
      }
      
      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";
                }
            }, 20);
      }
    </script>

无缝
<body>
<div class="box" id="screen">
<ul>
    <li><img src="imagess/01.jpg" alt=""/></li>
    <li><img src="imagess/02.jpg" alt=""/></li>
    <li><img src="imagess/03.jpg" alt=""/></li>
    <li><img src="imagess/04.jpg" alt=""/></li>
    <li><img src="imagess/01.jpg" alt=""/></li>
</ul>
</div>
<script src="补充.js"></script>
<script>
var current = 0;//只声明了一次
function f1() {
    var ulObj = myid("screen").children;
    current -= 10;

    if (current < -1200) {
      ulObj.style.left = 0 + "px";
      current = 0;
    } else {
      ulObj.style.left = current + "px";
    }//整体移动
}
var timeId=setInterval(f1, 20);

myid("screen").onmouseover=function () {
    //停止
    clearInterval(timeId);
};
myid("screen").onmouseout=function () {
    //继续
    timeId=setInterval(f1, 20);
};
</script>
</body>


高山 发表于 2021-6-26 07:09:01

好棒呀
页: [1]
查看完整版本: JS.006WEB API总结(04轮播图,,,)