使用X-Slide.js实现图片轮换

这个js加入了改变文字颜色的属性

X-Slide.js修改版下载地址：http://download.csdn.net/detail/mg321/4970258 

使用方法：

页面中引入jquery和X-Slide.js:

<script type="text/javascript" src="/view/default/js/jquery142.js"></script>
<script type="text/javascript" src="/view/default/js/X-Slide.js"></script>

然后在<script></script>中加入

$(document).ready(function(){
	$("#slider").XSlide({
		width:300, //必填，显示宽度
		height:272, //必填，显示高度
		moveTime:400, //图片循环动画时间
		stopTime:2000, //图片自动循环时间
		color:'#2A8D18', //图片下方数字索引颜色
		tcolor:'#fff', //这个是我自己加入的一个属性，图片下方文字的颜色
		xtype:true, //水平or垂直滚动图片
		opacity:0.5, //透明度
		autohide:false //下方文字是否始终显示
	});
	//下面这个方法是将鼠标移到数字索引上时自动滚动图片（原来代码中是点击滚动）
	$(".X-Slide-Index>span").mouseover(function(){
		$(this).click();
	});
})

 

下面是html代码：

<div id="slider" class="focus">
  <ul>
  #foreach($l in $tn)	
    <li>
    <a href="/">
       <img alt="图片下方显示的文字" src="图片地址" style="width:300px;height:272px;" title="鼠标移到图片上时显示的文字"/>
    </a>
    </li>
  #end		
  </ul>
				
</div>