图片轮换效果,在网上有很多了,很多都是flash的。flash的效果漂亮,但是size也比较大。找来找去也没找到简单的。。。后来看到了cloudgamer 写的例子还不错,这里稍加改造,仿了一下淘宝的效果。主要觉得js写的用起来比较简单,而且是跨浏览器的。传上来分享。
效果图:
使用方法
首先要引入trans.js
然后只关注下面这段代码就可以了,如果多一个图片就加一个td。
<div class="container" id="idContainer">
<table id="idSlider" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<a href="#">
<img src="images/1.jpg"/ alt="" />
</a>
</td>
<td>
<a href="#">
<img src="images/2.jpg"/ alt="" />
</a>
</td>
<td>
<a href="#">
<img src="images/3.jpg"/ alt="" />
</a>
</td>
<td>
<a href="#">
<img src="images/4.jpg"/ alt="" />
</a>
</td>
<td>
<a href="#">
<img src="images/5.jpg"/ alt="" />
</a>
</td>
<td>
<a href="#">
<img src="images/6.jpg"/ alt="" />
</a>
</td>
</tr>
</table>
<ul id="idNum" class="num"></ul>
</div>
如果你要控制颜色,就修改样式部分。
还有一段页面加载的时候执行的js,主要是根据表格的td数动态创建数字按钮,并设置数字按钮的相关事件。
<script type="text/javascript" src="trans.js"></script>
<script type="text/javascript">
function loadPage(){
var nums = [], timer, n = $$("idSlider").getElementsByTagName("td").length,st=null;
for (var i = 1; i <= n; i++) {
var item_num = document.createElement("li");
item_num.innerHTML = i;
item_num.onmouseover = function(){
if(this.className != "on"){
this.className = "over";
}
};
item_num.onmouseout = function(){
if(this.className != "on"){
this.className = "";
}
};
item_num.onclick = function(){
if(st != null){
st.Run(parseInt(this.innerHTML)-1);
this.className = "on";
}
};
$$("idNum").appendChild(item_num);
nums[i] = item_num;
};
st = new SlideTrans("idContainer", "idSlider",n,{
onStart:function () {
forEach(nums,function(o,i){
if(o){
o.className = (this.Index == (i-1)) ? "on" : "";
}
},this);
},
Vertical:false,
Pause:2500,
Duration:100
});
st.Run();
}
</script>
其中可以设置许多初始化参数,下面介绍几个,其余的有兴趣可以看js文件或者参见http://www.cnblogs.com/cloudgamer/archive/2008/07/06/SlideTrans.html 。
Vertical设置是垂直滑动还是水平滑动。但是垂直滑动好像有点问题,我用的是水平滑动。如果垂直滑动的话可以将表格部分改为ul,然后将里面的li的样式list-style-type设置为none,然后向左浮动。
Pause是设置停顿时间(Auto为true时有效)
Duration 是设置滑动持续时间。
JS文件trans.js
- 大小: 30.6 KB
分享到:
相关推荐
图片轮换js代码焦点图图片切换,图片js代码
简单实用的js焦点图 常用的js焦点图代码
jquery特效,jquery焦点图,jquery图片轮换,jquery相册效果,焦点图实例,淘宝焦点图代码下载,{keyword},JS广告代码,JS特效代码
4图轮换的热门焦点图代码(js版)
纯JS图片轮换代码,效果超炫.五屏切换XP按钮风格焦点图
<script language=JavaScript src="js/5adpics.js">代码整理:懒人图库</a> *尊重他人劳动成果,转载请自觉注明出处! <p align="center"></p> <p align="center"></p> <p align="center"></p> <p> </p>
NULL 博文链接:https://sue1108.iteye.com/blog/1343656
iFocus焦点图片轮换JS版 iFocus焦点图片轮换JS版 iFocus焦点图片轮换JS版 iFocus焦点图片轮换JS版 iFocus焦点图片轮换JS版 iFocus焦点图片轮换JS版 iFocus焦点图片轮换JS版
JS图片轮换广告代码
JS4屏焦点图轮换代码很不错非常适合代码使用
5图轮换的热门焦点图代码(js版) //slideimages数组为变换的图 var slideimages=new Array(); slideimages[0]="images/ad-01.jpg"; slideimages[1]="images/ad-02.jpg"; slideimages[2]="images/ad-03.jpg"; slide...
带缩略图5屏轮换焦点图代码是一款带有缩略图,淡入淡出切换效果的js焦点图。
带左右箭头 标码 自动轮播的焦点图 稍加改动就可以对付很多应用噢
图片渐变轮换焦点图效果
js轮换图片广告焦点图代码,表格网页前端
js flash图片轮换 javascript
js弧形焦点图轮换代码
演示地址:http://down.admin5.com/demo/code_pop/4/164/
千龙网JS带缩略图的5屏轮换焦点图! 带略缩图,比较好用