嗨,我想用一个按钮将图像添加到contentflow。当您单击按钮功能将被调用,所有图像将被加载。
这是我的代码。

<link rel='stylesheet' title='Standard' href='contentflow/cfstyles.css' type='text/css' media='screen' />
<script language='JavaScript' type='text/javascript' src='contentflow/contentflow.js'></script>
<script type='text/javascript' src='contentflow/jquery.min.js'></script>`  <div style='width:400px;height:200px;'  class='maincontent'>


<div id='contentFlow' class='ContentFlow'>
    <div class='loadIndicator'><div class='indicator'></div></div>
    <div id='adddiv' class='flow'>
//images should come to here
    </div>
    <div class='globalCaption'></div>
    <div class='scrollbar'>
        <div class='slider'><div class='position'></div></div>
    </div>

</div>

<input type="button" value="Click me!" onclick="start();" />`

<script tyle='text/javascript'>

function start(){
var cf = new ContentFlow('contentFlow', {reflectionColor: '#000000'});
$(document).ready(function() {
for (var i=0; i<15; i++ ){
$("#adddiv").prepend(" <div class='item'><img onclick='start(" + i + ");' class='content'   src='contentflow/pics/pic"+i+".png'/><div class='caption'>" + i + "</div></div>");

}
});


}



如果我不使用按钮和功能,它会直接加载所有图像,但是如果我要加载具有功能的图像,它将不起作用。
这里有什么问题?

最佳答案

最后,我将其与以下代码一起使用。

<div id='ajax_cf' class='ContentFlow'>
<div class='flow'> </div>
<div class='scrollbar'><div class='slider'><div class='position'></div></div></div>






<input type="button" value="get images!" onclick="getPictures();" />




var ajax_cf = new ContentFlow('ajax_cf');

function addPictures(){
    var ic = document.getElementById('itemcontainer');
    var is = ic.getElementsByTagName('img');
    for (var i=0; i< is.length; i++) {
        ajax_cf.addItem(is[i], 'last');
    }
   }
function getPictures() {
for (var i=0; i<15; i++ ){
$("#itemcontainer").prepend("<img onclick='' class='content' src='contentflow/pics/pic0.png'/>");`
   }
 addPictures();
}

关于javascript - contentflow通过函数添加项目,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/17663223/

10-12 01:13