原生js仿腾讯软件官网横向焦点图片滚动切换代码



141 561 188



特效描述:原生js焦点图 横向焦点图 滚动切换,很简单很使用的导航效果

代码结构

1. HTML代码

<div id="idContainer2" class="container">
	<table id="idSlider2" border="0" cellSpacing="0" cellPadding="0">
		<tbody>
			<tr>
				<td class="td_f"><a href="http://www.dijiuzhanzhang.com/" target="_blank"><img src="images/01.jpg"></a></td>
				<td class="td_f"><a href="http://www.dijiuzhanzhang.com/" target="_blank"><img src="images/02.jpg"></a></td>
				<td class="td_f"><a href="http://www.dijiuzhanzhang.com/" target="_blank"><img src="images/03.jpg"></a></td>
				<td class="td_f"><a href="http://www.dijiuzhanzhang.com/" target="_blank"><img src="images/04.jpg"></a></td>
				<td class="td_f"><a href="http://www.dijiuzhanzhang.com/" target="_blank"><img src="images/05.jpg"></a></td>
			</tr>
		</tbody>
	</table>
	<ul id="idNum" class="num"></ul>
</div>
<script type="text/javascript">
var forEach = function(array, callback, thisObject){
	if(array.forEach){
		array.forEach(callback, thisObject);
	}else{
		for (var i = 0, len = array.length; i < len; i++) { callback.call(thisObject, array[i], i, array); }
	}
}
var st = new SlideTrans("idContainer2", "idSlider2", 5, { Vertical: false });
var nums = [];
//插入数字
for(var i = 0, n = st._count - 1; i <= n;){
	(nums[i] = $("idNum").appendChild(document.createElement("li"))).innerHTML = ++i;
}
forEach(nums, function(o, i){
	o.onmouseover = function(){ o.className = "on"; st.Auto = false; st.Run(i); }
	o.onmouseout = function(){ o.className = ""; st.Auto = true; st.Run(); }
})
//设置按钮样式
st.onStart = function(){
	forEach(nums, function(o, i){ o.className = st.Index == i ? "on" : ""; })
}
st.Run();
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动导航菜单 带标题的焦点图 二级导航菜单 滚动切换 带缩略图的幻灯片 下拉导航菜单 带简介的焦点图 图片滚动 图片轮播 竖直导航菜单 文字滚动 自动滚动图片轮播 图标导航菜单 固定导航菜单 图片文字滚动 马赛克幻灯片 侧边导航菜单 全屏滚动 全屏焦点图 树形导航菜单 页面滚动 网址导航菜单 导航菜单插件 文字导航菜单 滚动流动 滚动导航菜单 滑动导航菜单 浮动导航菜单 导航切换 右键菜单 收缩导航菜单 html5动画导航菜单 flash导航菜单 flash焦点图 自动滚动图片轮播 焦点图幻灯片 导航菜单导航条

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到