jQuery仿淘宝主页图片向上滚动的导航

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿淘宝主页图片向上滚动</title>
<script type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
<style type="text/css">
*{ margin:0; padding:0;}
#img img{vertical-align:bottom;}
#imgbox ul{ list-style:none;}
#imgbox{
	border:1px #CCC solid;
	width:400px;
	height:400px;
	overflow:hidden;
	margin:20px auto;
	position:relative;
}
#img1,#img2{
	height:1600px;
	width:400px;
}
#img{
	position:relative;
	height:3200px;
	width:400px;
}
#num{
	width:160px;
	height:30px;
	position:absolute;
	top:360px;
	left:240px;
}
#num li{
	width:30px;
	height:30px;
	float:left;
	line-height:30px;
	text-align:center;
	font-size:24px;
	font-weight:bold;
	background:#eee;
	margin-right:8px;
	cursor:default;
}
#num .a{
	background:#F00;
}
</style>
</head>
<body>
<div id="imgbox">
	<div id="img">
	<ul id="img1">
    	<li><img src="//ku.shouce.ren/files/images/201601/56a34a0117a0d.jpg" /></li>
        	<li><img src="//ku.shouce.ren/files/images/201601/56a34a01a2e91.jpg" /></li>
        	<li><img src="//ku.shouce.ren/files/images/201601/56a34a023d0da.jpg" /></li>
        	<li><img src="//ku.shouce.ren/files/images/201601/56a34a12a3a9e.jpg" /></li>
    	</ul>
    	<ul id="img2">
    	<li><img src="//ku.shouce.ren/files/images/201601/56a34a1327fbb.jpg" /></li>
        	<li><img src="//ku.shouce.ren/files/images/201601/56a34a13a0bb9.jpg" /></li>
        	<li><img src="//ku.shouce.ren/files/images/201601/56a34a1422687.jpg" /></li>
        	<li><img src="//ku.shouce.ren/files/images/201601/56a34a14d4ae1.jpg" /></li>
   	 </ul>
    </div>
	<div id="numbox">
    	<ul id="num">
        	<li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
   </div>
</div>
<script type="text/javascript">
var $img=$('#img');
var imgHeight=400;//图片高度,谷歌浏览器不能直接获取图片的高度，直接数值了
var ulHeight=$('#img1').height();
var speed=2500,time=200;//图片切换时间和单张图片滚动时间
var count=0,num=0;//全局变量，用来存储图片滚动高度和数字的位置
$('#num li:eq(0)').addClass("a");
/*自动滚动函数*/
function autoScroll(){
	count+=imgHeight;
	num++;
	if(num==4){
		num=0;	
	}
	$('#num li:eq('+num+')').addClass('a')
		.siblings().removeClass("a");;
	$img.animate({bottom:count+"px"},time);
	if(count>=ulHeight){
		$img.animate({bottom:"0px"},0);
		count=0;
	}
}
auto=setInterval(autoScroll,speed);//设置图片自动滚动
/*鼠标移到数字的事件*/
$('#num li').each(function(){
	$(this).mouseover(function(){
		clearInterval(auto);
		$(this).addClass("a").siblings().removeClass("a");
		var index=$(this).index();
		var n=index-num;
		count+=n*imgHeight;
		$img.animate({bottom:count+"px"},time);
		if(count>=ulHeight){
			count=0;
			$img.animate({bottom:"0px"},0);
		}
		num=index;		
	})
	/*鼠标移出数字事件*/
	.mouseout(function(){
		auto=setInterval(autoScroll,speed);				   
	});
});
/*鼠标从图片移入移出事件*/
$img.mouseover(function(){
	clearInterval(auto);						
})
.mouseout(function(){
	auto=setInterval(autoScroll,speed);				   
})
</script>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

jQuery仿淘宝主页图片向上滚动的导航

分类

图片代码

描述

jquery写的，比横向的滚动简单点，功能不多说了，可以设置图片自动滚动，设置图片切换时间和单张图片滚动时间，图片高度,谷歌浏览器不能直接获取图片的高度，直接数值了。