JS循环显示图片

最新推荐文章于 2023-04-10 11:30:40 发布
最新推荐文章于 2023-04-10 11:30:40 发布
阅读量1.5k 收藏
点赞数 1
文章标签： 前端 java ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhouxiaohua945/article/details/84097582
版权

以下只作为自己的笔迹记录

 

<!DOCTYPE html>

<html>

<head>

<meta charset="gb2312" />

<title>图片减速度滚动(by rentj1@163.com;)</title>

<style>

ul{ margin:0; padding:0}

ul{ list-style:none;}

body{font:12px/1.2 "宋体"; }

 

.scroll_box{ position:relative; height:164px; width:766px; border:1px solid #efefef; overflow:hidden;}

.scroll_box .list{ overflow:hidden; zoom:1; position:absolute;}

.scroll_box .list li{ width:235px; height:164px; padding:0 10px;  text-align:center; float:left;}

.scroll_box .list .info{ line-height:1.5}

 

</style>

</head>

 

<body>

 

<div class="scroll_box" id="container">

    <ul class="list" id="content">

        <li>

            <img src="D:\Pictrue\蒲公英\1.jpg" /> 

                <div class="info">

                兵尼兔 环保大包围专车专用脚垫 米色（专车专用，仅支持在线支付）版型精准 大包围

                </div>

                <span class="price">会员价：￥288.00</span>

        </li>

 

        <li>

            <img src="http://img11.360buyimg.com/n4/309/9230eaef-021c-447d-a64b-51ce698822ef.jpg" />  

                <div class="info">

                兵尼兔 环保大包围专车专用脚垫 米色（专车专用，仅支持在线支付）版型精准 大包围

                </div>

                <span class="price">会员价：￥288.00</span>

        </li>

 

        <li>

            <img src="http://img10.360buyimg.com/n4/8792/7691b514-a0b3-469e-8a2b-37b219ebc490.jpg" /> 

                <div class="info">

                兵尼兔 环保大包围专车专用脚垫 米色（专车专用，仅支持在线支付）版型精准 大包围

                </div>

                <span class="price">会员价：￥288.00</span>

        </li>

 

        <li>

            <img src="http://img12.360buyimg.com/n4/285/c675cbb0-3a6f-4703-95fb-e75a7c90b48e.jpg" /> 

                <div class="info">

                兵尼兔 环保大包围专车专用脚垫 米色（专车专用，仅支持在线支付）版型精准 大包围

                </div>

                <span class="price">会员价：￥288.00</span>

        </li>

 

        <li>

            <img src="http://img12.360buyimg.com/n4/1957/22aa7c6d-4b70-49b8-a985-678b1d0e3781.jpg" /> 

                <div class="info">

                兵尼兔 环保大包围专车专用脚垫 米色（专车专用，仅支持在线支付）版型精准 大包围

                </div>

                <span class="price">会员价：￥288.00</span>

        </li>

 

        <li>

            <img src="http://img10.360buyimg.com/n4/2314/cf09b35a-eb6d-4a4f-a4dd-3301bfafef99.jpg" /> 

                <div class="info">

                兵尼兔 环保大包围专车专用脚垫 米色（专车专用，仅支持在线支付）版型精准 大包围

                </div>

                <span class="price">会员价：￥288.00</span>

        </li>

    </ul>

</div>

 

<script>

untils = {

 

     getComputedStyle: function(elem,syle){

            var computedStyle = document.defaultView 

                && document.defaultView.getComputedStyle

                && document.defaultView.getComputedStyle(elem,null);

 

             if(!computedStyle){

                computedStyle = elem.currentStyle

            }

            return computedStyle[syle]

     },

 

    setStyle: function(elem, name,val){

        elem.style[name] = val;

    },

 

    get: function(id){

        document.getElementById(id)

    }

}

 

function ScrollSlider(container, content){

    var clone = content.cloneNode(true);

    var initcss=  "left:0; top:0";

    var contentHeight = content.offsetHeight;

    var containerHeight = container.clientHeight;

    clone.id = "content-clone";

    container.appendChild(clone);

    clone.setAttribute("cssText", initcss);

    content.setAttribute("cssText", initcss);

    clone.style.marginTop = contentHeight+"px";

 

 

    this.content = content;

    this.clone = clone;

    this.container = container;

    this.containerHeight = containerHeight;

    this.contentHeight = contentHeight;

}

 

ScrollSlider.prototype = {

 

    start: function(delay){        

        var _this = this;

        clearInterval(_this.timer);

        _this.timer = setInterval(function(){

            _this.scroll();                    

        },delay);

    },

 

    scroll: function(){

 

        var marginTop = parseInt(untils.getComputedStyle(this.content, "marginTop"));

        var offsetTop = this.contentHeight;

        if(isNaN(marginTop))return;

 

        if( -marginTop >= this.contentHeight){

            marginTop = this.contentHeight;

 

        }

 

        if(marginTop > 0){

            offsetTop = -offsetTop;

        }

 

        this.move(marginTop, offsetTop);

 

    },

 

    move: function(marginTop, offsetTop){

        var s = this.containerHeight, s1 = 0, _this = this, m = 0;

        var timer = setInterval(function(){

            var speed = (s-s1)/8;

            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

            s1 += speed;

            m = marginTop - s1;

 

            untils.setStyle(_this.content, "marginTop", m + "px");

            untils.setStyle(_this.clone, "marginTop", (m + offsetTop)+"px");

            if(s-s1 <= 0){

                clearInterval(timer);

            }

 

        },30);

 

 

    }

};

 

var container = document.getElementById("container")

var content = document.getElementById("content")

var xx = new ScrollSlider(container, content);

xx.start(1000*3);

/*

//s=1/2 * at^2

 

//s (att)/2

//0<s<164

0,-164,-328,164,0

328,164,0,-164,-328,164,0

*/

</script>

</body>

</html>

zhouxiaohua945
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js基础之图片切换for循环版
qq_43607916的博客
09-27 1286
图片切换之for循环版 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>05 图片切换</title> <style type="text/css"> *{ padding: 0; margin: 0; } #box{ border: 1px solid #ccc; width: 430px;
js两张图片并列循环滚动图片特效
06-09
本项目名为“js两张图片并列循环滚动图片特效”，它提供了将两张（或更多）图片并列展示，并通过点击实现循环滚动的JavaScript解决方案。这种效果常用于产品展示、轮播广告等场景，使得页面更具视觉吸引力。 首先，...
Android循环显示图片代码
08-24
Android系统开发的循环显示图片代码文件
JS循环轮播图
qq_15980201的博客
11-08 409
1022数组             #container{             position: relative;             height: 400px;             width: 1240px;             margin: 50px auto;         }         .img{
js实现图片循环显示
weixin_30902251的博客
01-24 869
部分代码的用途我还不是很清楚 View Code 1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <!-- 5...
循环图片的代码，做个记号。
spring028的专栏
04-05 507
 table>   logic:iterate name="list" id="a" indexId="i" offset="0" length="6" >               bean:define id="temp" value="${i%2}">bean:define>                bean:define id="temp1" value="${(i-1)%
JS图片循环放大
04-07
在JavaScript（JS）中，实现图片循环放大效果是一种常见的动态网页设计技巧，它可以提升用户体验，尤其是在展示产品细节或艺术作品时。本项目的核心是利用JavaScript的事件监听、DOM操作以及定时器来创建一个无限...
纯js球形图片循环显示
01-12
在JavaScript编程领域，"纯js球形图片循环显示"是一个有趣的视觉效果，它涉及到Web前端开发中的CSS3、HTML和JavaScript技术。这个项目的核心目标是使用JavaScript动态地在一个球形布局中展示一组图片，并实现这些...
JavaScript代码实现图片循环滚动效果
01-19
循环滚动图片，不仅可以增添Web页面的动态效果，而且可以节省页面空间，有效地保证在有限的页面中显示更多的图片。 2.技术要点 主要应用setTimeout()方法实现图片的循环滚动效果。setTimeout()方法的语法格式如下：...
js实现图片无缝循环轮播
10-16
JavaScript 实现图片无缝循环轮播是一种常见的网页动态效果，它为用户提供了一种优雅的方式来展示一组图片，让图片在用户眼前连续、平滑地切换。在本文中，我们将深入探讨如何利用 JavaScript 实现这一功能。 首先...
循环输出图形_javascript
07-09
(循环输出图形_javascript)
js实现多图片动态生成base64格式的gif图- 很久之前的资源，已失效，勿下载
12-09
使用js实现，将多组图片动态生成gif图，base64格式，使用简单、速度也很快！ var src=['imgs/1.jpg','imgs/2.jpg','imgs/3.jpg','imgs/4.jpg']; gifshot.createGIF({ gifWidth: 400, gifHeight: 400, images: src, interval: 1.0 },function(obj) { if(!obj.error) { var image = obj.image; var imageDIV = document.getElementById('gif') imageDIV.src = image; } });
循环显示图片
wendy_chenlu的专栏
12-11 627
 第一步:把如下代码加入区域中:           var   interval   =   2.5;   //   delay   between   rotating   images   (in   seconds)     var   random_display   =   1;   //   0   =   no,   1   =   yes     interval   *=  
如何用JavaScript制作循环图形
dianjing9362的博客
04-09 276
【图题思路】 1.确定图形一共几行，即为外层的循环的次数2.确定每行有几种元素，代表有几个内层循环3.确定每种元素的个数，即为每个内层循环的次数Tips：通常，找出每种元素的个数与行号的关系，即为当前内层循环的最大值 长方形：每行循环5次，再循环5行 <script type="text/javascript"> ...
遍历显示图片，并且可以点击放大图片
Lv_SFeng的博客
09-03 500
遍历显示图片，并且可以点击放大图片 遍历出所有的图片，并且当点击该图片4时，放大该图片。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> #wrap { width: 1000px; margin: 10px
js之for循环画基本图形
杨欢博的博客
04-09 747
矩形 document.write("<p align='center'>") for(var i=1; i<=10; i++){ for(var j=1; j<=10; j++){ document.write("&nbsp;&nbsp;" + "*" + "&nbsp;&nbsp;") } document.write("<br>") } document.write("</p
javascript中的for循环
左直拳的马桶_日用桶
10-17 623
假设有个数组:var array = [];那么在javascript中，要用for循环语句来遍历处理这个数组，有多少种方式呢？3种：1、forfor(var i = 0;i < array.length;i++){ var a = array[i]; …… }众所周知，应用最广，无需多言。2、for升级版for(var i in array){ var a = array[
html用javascript循环显示图片
weixin_58094032的博客
04-10 974
【代码】html用javascript循环显示图片。
html使用javascript循环显示图片
美奇软件开发工作室
01-11 3314
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>html使用javascript循环显示图片</title> <style type="text/css"> #imgbox img{ width: 640px; ...
js实现图片预加载循环显示图片
最新发布
05-24
可以使用以下代码实现图片预加载循环显示图片： ```javascript var images = ["image1.jpg", "image2.jpg", "image3.jpg"]; var currentIndex = 0; function preloadImages() { for (var i = 0; i ; i++) { var ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值