使用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>

使用X-Slide.js实现图片轮换相关推荐

JS+Flash图片轮换/切换--上下滑动效果
这个效果与< Flash图片轮换/切换--左右推拉效果 >极类似,只是一个是左右,一个是上下. 同样,这个也是js+flash实现的.能够兼容性现行所有的浏览器. 可以设置标题的背景色与标 ...
php中轮转图片js代码,js实现图片轮换效果代码
var numb = 0; var imgnumb = 1; function showimg() { //两张图片切换方法1 /*numb++; if (numb % 2 == 0) { docum ...
js图片轮换显示实例(转载)
2019独角兽企业重金招聘Python工程师标准>>> 转自:http://www.cnblogs.com/yes123/p/3702519.html 用js脚本实现图片轮换显示,很 ...
方格图片轮换JS特效
心血来潮想用js做个方格移动的图片轮换,于是捣鼓了小半天弄出来了.DEMO下载效果如下: 转载于:https://www.cnblogs.com/k13web/p/4139527.html
腾讯《活着》频道JS图片轮换效果解析
腾讯<活着>频道JS图片轮换效果解析 1.原理分析总析: 包含内容的层->宽:900 高:400 主要显示层-> 宽800 高400 即最上面那层 z-index=100 中 ...
2个js实现图片轮播效果（用）
第一个(使用) 不过要注意在web.config中将该location的位置的访问权限设为allow user="*",设置了deny user="?"或&qu ...
javascript图片轮换2
javascript图片轮换2 图片轮换是一种相当复杂的技术,早些年基本用flash实现.这里有一个链接,教大家如何用flash实现它的.之所以用flash,是因为flash是基于帧的,这与图片轮换的 ...
Flash 图片轮换效果
Flash全站的技术应用系列: (一)AS+JS的Flash网站无刷新定位技术 (二)Flash网站的SEO (三)Flash网站的流量统计 (四)让Flash网站具有IE前进后退的功能 (五)图片 ...
swiper.js 多图片页面的懒加载lazyLoading
swiper.js官网:http://www.swiper.com.cn/api/Images/2015/0308/213.html 设为true开启图片延迟加载,使preloadImages无效. ...

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

使用X-Slide.js实现图片轮换相关推荐

最新文章

热门文章