[经验分享] 仿淘宝首页向上滚动的图片切换效果，jQuery代码

奇

671 主题	1 听众	3247 积分

中级设计师

Rank: 5 Rank: 5

纳金币: 324742
精华: 0

电梯直达

楼主

发表于 2011-12-30 19:10:46 |只看该作者 |倒序浏览

闲着没事的时候看到淘宝首页的向上滚动式的图片切换效果不错，于是仿了一个，这里使用了jQuery+CSS+图片，测试了一下效果，在IE和Chrome等浏览器都还不错，只是没有细化，如果您打算用在自己的网站上，按照代码中的注释修改就可以了。另外如果您想改变图片大小，CSS中按照大小规则计算就可以了。如果实在不会，可以联系烈火小编指导。
　　为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火特别新增网页版演示。
　　点击查看：网页特效
　　运行演示：
<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gbk" />

<title>jQuery图片“向上滚动”式切换效果</title>

<script type="text/javascript" src="/uploads/common/js/jquery-1.4.2.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:500px;

height:375px;

overflow:hidden;

margin:20px auto;

position:relative;

}

#img1,#img2{

height:1500px;

width:500px;

}

#img{

position:relative;

height:3000px;

width:375px;

}

#num{

width:160px;

height:30px;

position:absolute;

top:340px;

left:20px;

}

#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="/uploads/common/images/wall1.jpg" /></li>

<li><img src="/uploads/common/images/wall2.jpg" /></li>

<li><img src="/uploads/common/images/wall3.jpg" /></li>

<li><img src="/uploads/common/images/wall4.jpg" /></li>

</ul>

<ul id="img2">

<li><img src="/uploads/common/images/wall5.jpg" /></li>

<li><img src="/uploads/common/images/wall6.jpg" /></li>

<li><img src="/uploads/common/images/wall7.jpg" /></li>

<li><img src="/uploads/common/images/wall8.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=375;//图片高度,谷歌浏览器不能直接获取图片的高度，直接数值了

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><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
文章源自：烈火网，原文：http://www.veryhuo.com/a/view/43722.html