Django中具有不同时间持续的图片幻灯片

0 投票

3 回答

884 浏览

数据工程师

提问于 2025-04-19 20:02

大家好，我需要帮助来创建一个图片幻灯片：

我有两个Django模板变量，分别是“ImagesVar”和“ImagesDurationVar”。

我想要的是，让“ImagesVar[0]”这个图片显示“ImagesDurationVar[0]”指定的时间，然后再显示下一个图片，依此类推。

我在Django模板中的HTML代码是：

=============================================================`

<html>
<head>
    <script>
        $(document).ready(function(){
            $('.slideshow ').cycle({
            fx:     'fade',
            speed:  'fast',
            timeoutFn: function () {
            return parseInt($(".slideshow img").attr('ImagesDurationVar')) ;
            }
            });
        });
    </script>
</head>
<body>
    {% for item1, item2 in variable_SR %}
        <div id="content1" style="background-color:#EEEEEE;">
            <div class="slideshow">
                {% for ImageVar,ImagesDurationVar in variables %}
                    <img  src={{STATIC_URL}}{{ImageVar}} width={{item1|add:-80}} height={{item2|add:-330}}>
                    <input type="hidden" id="ImagesDurationVar" name="variable" value="{{ ImagesDurationVar}}">
                {% endfor %}
            </div>
        </div>  
    {% endfor %}
</body>
</head>
</html>`

====================================================================

大家好，我需要帮助解决Jquery函数的问题，它没有正常工作。如果你有任何关于这个的帮助，或者有其他可以解决这个问题的函数，或者如果上面的代码可以被修正，我将非常感谢你。

3 个回答

Final solution which work successfully is as follow:

    <!DOCTYPE html>
    <html>
    <META HTTP-EQUIV="refresh" CONTENT="60">
    <head>
           <script src={{stati_url}}app.js></script>
           <script src={{stati_url}}jquery_cycle.js></script>
          <title>Front End Running</title>
     </head>
    <body>
        {% for item1, item2 in variable_SR %}
            <div id="content1" style="background-color:#EEEEEE;">
                <div class="slidetime">
                <script>
                   var i=0;
                   {% for ImagesDurationVar in variable_1 %}
                        durations[i]={% widthratio ImagesDurationVar 1 1000 %};
                        i++;
                        {% endfor %}
                 </script>
                </div>
                <div class="slideshow">
                    {% for ImageVar in variable_1 %}
                        <img  src={{STATIC_URL}}{{ImageVar}} width={{item1|add:-80}} height={{item2|add:-330}}>
                    {% endfor %}
                </div>
            </div>
        {% endfor %}
    </body>
    </html>

当然可以！请把你想要翻译的内容发给我，我会帮你用简单易懂的语言解释清楚。

回答于 2025-04-19 由 Python大师

分享举报

你试过把脚本放在页面底部吗？

回答于 2025-04-19 由 Python大师

分享举报

我觉得你的jQuery代码可能没有达到你想要的效果。目前你试图获取一个不存在的属性值。你想从你的

里的<img>标签中获取“ImagesDurationValue”这个属性，但这个属性并不存在。

可以参考这个例子这里

编辑

把你的脚本拿出来，放到一个单独的文件里，比如叫app.js。然后创建一个列表，里面包含你所有的持续时间。

app.js

var durations = [];

$(document).ready(function(){

   $('.slideshow ').cycle({
      fx:     'fade',
      speed:  'fast',
      timeoutFn: computeTimeout
   });

   function calculateTimeout(currElement, nextElement, opts, isForward) { 
      var index = opts.currSlide; 
      return durations[index]; 
   } 
});

然后在你的django模板中：

        {% for ImageVar,ImagesDurationVar in variables %}
            <img  src={{STATIC_URL}}{{ImageVar}} width={{item1|add:-80}} height={{item2|add:-330}}>
            <script src="{{STATIC_URL}}/app.js">
            durations.push({{ ImagesDurationVar }});
            </script>
        {% endfor %}

回答于 2025-04-19 由 Python大师

分享举报

Django中具有不同时间持续的图片幻灯片

3 个回答

app.js

撰写回答