【yoyo】使用json实现图片的滚动

最新推荐文章于 2022-07-25 17:38:57 发布

嗨帅

最新推荐文章于 2022-07-25 17:38:57 发布

阅读量318

点赞数 1

分类专栏： java 文章标签： javaScript

本文链接：https://blog.csdn.net/wuxinren1990/article/details/77688451

版权

java 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style>
       .show_div {
           width: 400px;height: 400px;border: 4px solid gray;overflow: hidden;margin: 0 auto;
       }

       .scroll_div {
           height: 400px;

       }
       .scroll_div div {
           position: relative;width: 400px;height: 400px;float: left;
       }
       .scroll_div img {
           width: 400px;height: 400px;
       }
       .scroll_div p {
           margin: 0;
           position: absolute;
           bottom: 0;
           width: 400px;
           height: 50px;
           text-align: center;
           line-height: 50px;
           color: black;
           font-size: 20px;
           background-color: cyan;
           opacity: 0.6;
       }

   </style>

</head>
<body>
   <div class="show_div">
       <div class="scroll_div"></div>
   </div>
</body>
<script>
   var data = [{url:'lady1.jpg',title:'laday1'},{url:'lady2.jpg',title:'laday2'},{url:'lady3.jpg',title:'laday3'},{url:'lady4.jpg',title:'laday4'}];
   // 获取元素
   var showDiv = document.getElementsByClassName('show_div')[0];
   var scrollDiv = document.getElementsByClassName('scroll_div')[0];
   scrollDiv.style.width = 400*data.length + 'px';
   // 向scrollDiv中添加标签
   for (var i = 0; i < data.length; i++) {
       // 创建一个div
       var myDiv = document.createElement('div');
       // 通过innerHTML向scrollDiv中添加标签
       myDiv.innerHTML = '<img src="'+data[i].url+'" alt="" />' + '<p>'+data[i].title+'</p>';
       // 将创建的div插入到scrollDiv中
       scrollDiv.appendChild(myDiv);
   }
   // 初始化图片位置
   var position = 0;

   // 创建定时器，滚动第一张图片
   function myFunciton () {
       var timer = setInterval(function(){
           position--;
           scrollDiv.style.marginLeft = position + "px";
           if ( position%400 == 0) {
               clearInterval(timer);
               timer = null;
           }
       },10);

}

每滚动一张图片停止1秒（原理就是，每滚动一张图片耗时4秒，所以将间隔时间设置成5秒，两个方法是同步进行的有1秒的时间差）

   setInterval(function(){
       if (position == -1200) {
           position = 0;
       }
       myFunciton();
   },5000)


</script>

</html>

嗨帅

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【yoyo】使用json实现图片的滚动

Document .show_div { width: 400px;height: 400px;border: 4px solid gray;overflow: hidden;margin: 0 auto; } .scroll_div { height: 400px;
复制链接

扫一扫