yctb-SpringBoot/web/template/xhtml/sliderPanel.ftl

<div id="sliderPanel" width="${parameters.width!}" height="${parameters.height!}" style="${parameters.init!}">
	<div class="iframe_list">
		<ul>
		<#list parameters.sliderPanel.frames![]  as iframe>
             <li width="${iframe.width!}"> 
                <#if "${iframe.type!}"=="img" >
                <img src="${iframe.url}" width="${iframe.width!}"/>
                <#else>
			   <IFRAME frameBorder="0" id="${iframe.id!}" name="${iframe.url!}" src="" width="${iframe.width!}" height="${iframe.height!}"></IFRAME>
			   </#if>
			</li>
       </#list>
		</ul>
	</div>
	<div  class="footer">
	 <a href="#" id="toLeft" class="link toLeft"></a>
	 <div class="btn_list">
		 <ul>
		</ul>
	</div>
	<a href="#" id="toRight" class="link toRight"></a>
	</div>
</div>

<script type="text/javascript">
var  timeout=${parameters.timeout!};
$("#sliderPanel").css("width",$("#sliderPanel").attr("width"));
$("#sliderPanel").css("height",$("#sliderPanel").attr("height"));
$(".iframe_list li").each(function(index, element) {
		$(element).css("width",$(element).attr("width"));
		$(element).css("height",$(element).attr("height"));
    });
   
var index = 0;
var timer = 0;
var ulist = $('.iframe_list ul');
var blist = $('.btn_list ul');
var list = ulist.find('li');
var llength = list.length;//li的个数，用来做边缘判断
var lwidth = $(list[0]).width();//每个li的长度，ul每次移动的距离
var uwidth = llength * lwidth;//ul的总宽度

init();
function init(){
	//显示隐藏左右点击开关
	//生成按钮(可以隐藏)
	addBtn(list);
	//给第一个IFRAME加载URL
	var element=$(".iframe_list iframe").eq(0);
	$(element).attr("src",$(element).attr("name"));
    
	$('.link').bind('click', function(event) {
		var elm = $(event.target);
		doMove(elm.attr('id'));
		return false;
	});
	//定时器
	timer = setInterval("doMove('toRight')",timeout);

	$('.iframe_list li').hover(function() {
		clearInterval(timer);
	}, function() {
		timer = setInterval("doMove('toRight')",timeout);
	});
}

function doMove(direction){
	//向右按钮
	if (direction =="toRight") {
		index++;
		if ( index< llength) {
			uwidth = lwidth *index;
			ulist.css('left',-uwidth);
			//ulist.animate({left: -uwidth}, timeout);

		}else{
			ulist.css('left','0px');
			index = 0;
		}; 
	//向左按钮           
	}else if(direction =="toLeft"){
		index--;
		if ( index < 0) {
			index = llength - 1;                
		}
		uwidth = lwidth *index;
		ulist.css('left',-uwidth);
		//ulist.animate({left: -uwidth}, "slow");    
	//点击数字跳转  
	}else{
		index = direction;
		uwidth = lwidth *index;
		ulist.css('left',-uwidth);
	};
	 var element=$(".iframe_list iframe").eq(index);
     var name=$(element).attr("name");
     var src=$(element).attr("src");
     if(src==""){
       $(element).attr("src",name);
     }
     changeBtn(index);
}

function changeBtn(i){
	blist.find('li').eq(i).addClass('on').siblings().removeClass('on');
	//var text = ulist.find('li').eq(i).find('img').attr('alt');
	//var link = ulist.find('li').eq(i).find('a').attr('href');
	//$('.img_intro .text a').text(text);
	//$('.img_intro .text a').attr('href',link);
}

function addBtn (list){
	for (var i = 0; i < list.length; i++) {
		var imgsrc = $(list[i]).find('iframe').attr('name');    
		if(imgsrc==undefined){
		imgsrc = $(list[i]).find('img').attr('src');   
		var listCon = '<li><img src="'+imgsrc+'""></li>'; 
		}else{
		var listCon = '<li><iframe src="'+imgsrc+'""></li>'; 
		}   
		         
		$(listCon).appendTo(blist);
		//隐藏button中的数字
		//list.css('text-indent', '10000px');
	};
	blist.find('li').first().addClass('on');
	$('.btn_list li').hover(function() {
		var _index = $(this).index();            
		doMove(_index); 
	});
}

</script>