用JQuery仿淘宝首页的图片滚动展现

2010-03-24, Posted in Web 界面 | 6 回复


用Jquery来以滚动的形式展现图片，需要三个步骤，第一个步骤就是把所展现的图片用<li>标签来列举，并列举每个图片对应的序号，第二步使用CSS来控制图片及序号的样式，相对图片来说，主要控制展现图片位的大小，相对序号来讲，除了定位外，还要考虑到当然展现的图片的序号高亮显示。第三步是使用Jquery来控制图片定时滚动切换。下面对这三步进行详细说明

使用jquery实现的类淘宝首页图片展示效果

第一步，展现图片内容的html代码为,注意<li class=”on”>1</li>这里的on表示载入后，第一个图片为展现状态

<div id="idTransformView" class="lgl_container">
<ul id="idSlider" class="lgl_slider">
	<li><a href="#"><img src="http://localhost:3000/bin/a.gif" alt="" /></a></li>
	<li><a href="#"><img src="http://localhost:3000/bin/b.gif" alt="" /></a></li>
	<li><a href="#"><img src="http://localhost:3000/bin/c.gif" alt="" /></a></li>
</ul>
 
<ul id="idNum" class="lgl_num">
	<li class="on">1</li>
	<li>2</li>
	<li>3</li>
</ul>
</div>

第二步，css控制

.lgl_container{width:526px; height:150px; overflow:hidden;position:relative;}
.lgl_slider{position:absolute;}
.lgl_slider li{ list-style:none;display:inline;}
.lgl_slider img{ width:526px; height:150px; display:block;}
.lgl_num{ position:absolute; right:5px; bottom:5px;}
.lgl_num li{
    float: left;
    color: #FF7300;
    text-align: center;
    line-height: 15px;
    width: 15px;
    height: 15px;
    font-family: Arial;
    font-size: 12px;
    cursor: pointer;
    overflow: hidden;
    margin: 3px 1px;
    border: 1px solid #FF7300;
    background-color: #fff;
}
.lgl_num li.on{
    color: #fff;
    line-height: 20px;
    width: 20px;
    height: 20px;
    font-size: 15px;
    margin: 0 1px;
    border: 0;
    background-color: #FF7300;
    font-weight: bold;
}

第三步，js控制显示

$(function(){
     var len  = $("#idNum > li").length;
	 var index = 1;
	 $("#idNum li").mouseover(function(){
		index  =   $("#idNum li").index(this);
		showImg(index);
	});
	 //滑入 停止动画，滑出开始动画.
	 $('#idTransformView').hover(function(){
			  if(MyTime){
				 clearInterval(MyTime);
			  }
	 },function(){
			  MyTime = setInterval(function(){
			    showImg(index)
				index++;
				if(index==len){index=0;}
			  } , 5000);
	 });
 
	 //自动开始
	 var MyTime = setInterval(function(){
		showImg(index)
		index++;
		if(index==len){index=0;}
	 } , 5000);
})
 
// 关键函数：通过控制top ，来显示不通的幻灯片
function showImg(i){
		$("#idSlider").stop(true,false).animate({top : -150*i},500);
		 $("#idNum li").eq(i).addClass("on").siblings().removeClass("on");
}

后续：目前淘宝的是圆圈来表示第几帧，这个也比较好改，把样式改成如下就可以了

.lgl_container{width:526px; height:150px; overflow:hidden;position:relative;}
.lgl_slider{position:absolute;}
.lgl_slider li{ list-style:none;display:inline;}
.lgl_slider img{ width:526px; height:150px; display:block;}
.lgl_num{ position:absolute; right:5px; bottom:5px;}
.lgl_num li{
        background-color: #FFFFFF;
    border-radius: 20px 20px 20px 20px;
    color: #DE7D4B;
    cursor: pointer;
    float: left;
    font-size: 13px;
    height: 20px;
    line-height: 20px;
    margin-left: 3px;
    margin-top: -2px;
    opacity: 0.7;
    overflow: visible;
    position: relative;
    text-align: center;
    width: 20px;
}
.lgl_num li.on{
    background-color: #FF6600;
    color: #FFFFFF;
    filter: none;
    font-weight: bold;
    opacity: 1;
}
标签: , ,

相关日志

6 Comments for this entry

你也讲两句吧~