app.js

Question

伙计我在制作图像幻灯片时需要帮助：

我有两个Django模板变量。（＆＃34; ImagesVar＆＃34;和＆＃34; ImagesDurationVar＆＃34;）

我想做的是我想要的＆＃34; ImagesVar [0]＆＃34;显示为＆＃34; ImagesDurationVar [0]＆＃34;幻灯片放映的时间等等。下一张图片。

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函数的帮助，它不起作用。如果您对此问题或任何可以解决此问题的功能有任何帮助，或者如果上述代码可以纠正，我将非常感谢您

Answer 1

我不认为你的jquery正在做你认为它正在做的事情。目前，您正在尝试获取不存在的属性的值。您正尝试从div中的<img>获取属性“ImagesDurationValue”，但它不存在。

摘自示例here

修改把脚本拿出来放在一个单独的文件中，比如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 %}

Answer 2

您是否尝试过将脚本放在页面底部？

Answer 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>

幻灯片在django中具有不同持续时间的图像

3 个答案:

app.js