求救!!!请问怎样用js向jquery滚动图里面动态添加新的图片?

昂首天外 发布于 2016/09/21 15:09
阅读 501
收藏 0
我用js向一个jquery滚动图里添加图片以后,这个新的节点可以成功添加,但是显示出来就很乱了。不知道问题出在哪里,希望有人能指点一下,不胜感激。
<!-- 下边缩略图滚动区域   -->
	<div class="SpaceLine"></div>
	<div class="HS15"></div>
	<div class="ThumbPicBorder">
		<img src="images/ArrowL.png" id="btnPrev" class="FlLeft" style="cursor:pointer;" />
		<div class="jCarouselLite FlLeft">
			<ul id="ThumbPic">
            
            	<?php 
				for($i=1;$i<=14;$i++)
				{
					echo '<li rel='.$i.'><img src="images/thumb/'.$i.'.jpg"></li>';
				}
				?>
               
			</ul>
			<div class="Clearer"></div>
		</div>
		<img src="images/ArrowR.png" id="btnNext" class="FlLeft" style="cursor:pointer;" />
		<div class="Clearer"></div>
	</div>
	<div class="HS15"></div>
</div>



<!-- 这是用来插入节点的js代码-->
<script>
	$("#left-defaults").live('DOMNodeInserted', function(e) {  
	
	var path=$(e.target).html();
	//从路径中截取图片名名]
	var filename;
	if(path.indexOf("/")>0)//如果包含有"/"号 从最后一个"/"号+1的位置开始截取字符串
	{
    	filename=path.substring(path.lastIndexOf("/")+1,path.length-6);
		$('ul#ThumbPic').append('<li rel=' + filename + '><img src="images/thumb/'+ filename +'.jpg"></li>'); 
		//alert(filename);
		var a=$('#ThumbPic li').length++;
		//alert(a);
	}
	else
	{
    	filename=path;
	}
       //alert('element now contains: ' + $(e.target).html());  
    });  
	/*
	 $("#left-defaults").bind('DOMNodeRemoved', function(e) {  
       alert('element now remove: ' + $(e.target).html());  
    });*/

</script>

下面是插入后显示的图片效果,可以发现新插入的图片出现了异常。   



上面这张图片是在火狐浏览器里面调试的结果,可以发现新添的3个<li>节点没有加载上style

加载中
返回顶部
顶部