<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
*{
margin:0;
padding:0;
z-index:0;
}
#container{
border:solid 2px #FF9900;
width:900px;
height:auto;
padding:0;
margin: 500px auto;
}
/*-------------begin discountmessage--------------------*/
#discountmessage
{
background-color:#FF0000;
padding-top:10px;
padding-left:10px;
padding-bottom:10px;
}
#discountmessage #messagescreen{
width:675px;
height:120px;
background-color:#CCCCCC;
border:solid 2px #FFFFFF;
float:left;
position:relative;
overflow:hidden;/*padding:5px;*/
}
#discountmessage #messagelist{
list-style:none;
border:solid 2px #FFFFFF;
float:right;
width:180px;
margin-right:10px;
}
#discountmessage #messagelist li{
width:170px;
height:17px;
background-color:#CCCCCC;
margin:2px;
font-size:12px;
text-align:left;
padding-left:5px;
}
#discountmessage #messagescreen #scrollDiv
{
position:absolute;
}
.scrollcontent
{
text-decoration:none;
border:0;
color:#000000;
height:120px;
display:block;
margin:0;
padding:5px;
}
#discountmessage #messagelist .selected
{
background-color:#FF6633;
height:25px;
}
/*------------end discountmessage-----------------------*/
</style>
<script language="javascript" type="text/javascript" src="jquery-1.4.2.js"></script>
<script language="javascript" type="text/javascript">
$(function(){
var currentIndex=0;
var waitTime=3000;//播放下一张图片需等待的时间
var scrollSpeed=500;//图片翻动的速度
var loopHandler;
var verticalHeight=130;//图片的高度
var scrollDivID="#discountmessage #messagescreen #scrollDiv";//滑动层的ID
var imgIndexID="#discountmessage #messagelist li";//显示当前图片位置的<Li>集合
var imgIndexSelectedStyle="selected";//标示当前图片的<Li>样式
var imgArrayLength=$(scrollDivID+" a").length;
var tmpImg=$(scrollDivID+" a:first").clone(true);
function initialize(){
$(scrollDivID).css("height",verticalHeight*imgArrayLength);
$(scrollDivID).css("top",0);
$(imgIndexID).each(function(index){
$(this).bind("click",function(){
clearTimeout(loopHandler);
scrollTo(parseInt($(this).attr("value"))-1);
//alert($(this).text());
});
});
tmpImg.appendTo($(scrollDivID).parent());
tmpImg.css("z-index",12);
tmpImg.css("position","absolute")
tmpImg.css("display","block");
}
function autorun(){
if((currentIndex+1)%imgArrayLength==1)
{
tmpImg.animate({"top":-verticalHeight},scrollSpeed);
$(scrollDivID).animate({"top":-(currentIndex+1)*verticalHeight},scrollSpeed);
}
else if((currentIndex+1)%imgArrayLength!=0)
{
$(scrollDivID).animate({"top":-(currentIndex+1)*verticalHeight},scrollSpeed);
}
else
{
tmpImg.css("top",verticalHeight);
$(scrollDivID).animate({"top":-(currentIndex+1)*verticalHeight},
scrollSpeed,
function(){
$(scrollDivID).css("top",0);
});
tmpImg.animate({"top":0},scrollSpeed);
}
currentIndex=(currentIndex+1)%imgArrayLength;
$(imgIndexID).removeClass();
$(imgIndexID).eq(currentIndex).addClass(imgIndexSelectedStyle);
//alert($(imgIndexID).eq(currentIndex).length);
loopHandler=setTimeout(autorun,waitTime);
}
function scrollTo(destinational){
if((currentIndex+1)==1)
{
tmpImg.animate({"top":-verticalHeight},Math.abs(scrollSpeed/(destinational-currentIndex)));
}
if(currentIndex<destinational)
{
$(scrollDivID).animate({"top":-destinational*verticalHeight},scrollSpeed);
}
else if(currentIndex>destinational)
{
$(scrollDivID).animate({"top":-currentIndex*verticalHeight+(currentIndex-destinational)*verticalHeight},scrollSpeed);
}
else
{
}
currentIndex=destinational;
$(imgIndexID).removeClass();
$(imgIndexID).eq(currentIndex).addClass("selected");
loopHandler=setTimeout(autorun,waitTime);
}
initialize();
autorun();
});
</script>
</head>
<body>
<div id="container">
<div id="discountmessage">
<h4>最新的促销信息</h4>
<div id="messagescreen">
<div id="scrollDiv">
<a href="#" class="scrollcontent">
<h1>1.促销信息</h1>
<p> 夏天来临，现本商场所有新上市的男女凉鞋,皮鞋，衣服帽子，手表，***，***，***，**，***，**，**，**，**，**，等等。一律7折。欢迎广大顾客来本店购物，该活动将截止到一律7折。欢迎广大顾客来本店购物，该活动将截止到一律7折。欢迎广大顾客来本店购物，该活动将截止到一律7折。欢迎广大顾客来本店购物，该活动将截止到……</p>
</a>
<a href="#" class="scrollcontent">
<h1>2.促销信息</h1>
<p> 夏天来临，现本商场所有新上市的男女凉鞋,皮鞋，衣服帽子，手表，***，***，***，**，***，**，**，**，**，**，等等。一律7折。欢迎广大顾客来本店购物，该活动将截止到一律7折。欢迎广大顾客来本店购物，该活动将截止到一律7折。欢迎广大顾客来本店购物，该活动将截止到一律7折。欢迎广大顾客来本店购物，该活动将截止到……</p>
</a>
<a href="#" class="scrollcontent">
<h1>3.促销信息</h1>
<p> 夏天来临，现本商场所有新上市的男女凉鞋,皮鞋，衣服帽子，手表，***，***，***，**，***，**，**，**，**，**，等等。一律7折。欢迎广大顾客来本店购物，该活动将截止到一律7折。欢迎广大顾客来本店购物，该活动将截止到一律7折。欢迎广大顾客来本店购物，该活动将截止到一律7折。欢迎广大顾客来本店购物，该活动将截止到……</p>
</a>
<a href="#" class="scrollcontent">
<h1>4.促销信息</h1>
<p> 夏天来临，现本商场所有新上市的男女凉鞋,皮鞋，衣服帽子，手表，***，***，***，**，***，**，**，**，**，**，等等。一律7折。欢迎广大顾客来本店购物，该活动将截止到一律7折。欢迎广大顾客来本店购物，该活动将截止到一律7折。欢迎广大顾客来本店购物，该活动将截止到一律7折。欢迎广大顾客来本店购物，该活动将截止到……</p>
</a>
<a href="#" class="scrollcontent">
<h1>5.促销信息</h1>
<p> 夏天来临，现本商场所有新上市的男女凉鞋,皮鞋，衣服帽子，手表，***，***，***，**，***，**，**，**，**，**，等等。一律7折。欢迎广大顾客来本店购物，该活动将截止到一律7折。欢迎广大顾客来本店购物，该活动将截止到一律7折。欢迎广大顾客来本店购物，该活动将截止到一律7折。欢迎广大顾客来本店购物，该活动将截止到……</p>
</a>
<a href="#" class="scrollcontent">
<h1>6.促销信息</h1>
<p> 夏天来临，现本商场所有新上市的男女凉鞋,皮鞋，衣服帽子，手表，***，***，***，**，***，**，**，**，**，**，等等。一律7折。欢迎广大顾客来本店购物，该活动将截止到一律7折。欢迎广大顾客来本店购物，该活动将截止到一律7折。欢迎广大顾客来本店购物，该活动将截止到一律7折。欢迎广大顾客来本店购物，该活动将截止到……</p>
</a>
</div>
</div>
<ul id="messagelist">
<li value="1">新闻1</li>
<li value="2">新闻2</li>
<li value="3">新闻3</li>
<li value="4">新闻4</li>
<li value="5">新闻5</li>
<li value="6">新闻6</li>
</ul>
<br style="clear:both;"/>
</div>
</div>
</body>
</html>
新闻滚动效果--juqery实现
5星 · 超过95%的资源 需积分: 5 143 浏览量
2010-12-04
17:44:08
上传
评论
收藏 154KB RAR 举报 
新闻滚动.rar （5个子文件） 
新闻滚动 
Snap14.jpg 60KB
jquery-1.4.2.js 160KB
滚动栏.html 2KB MAMA促销新闻滚动.html 7KB Snap15.jpg 76KB资源评论
wqhzjl2013-07-22试了，效果不错！
