当前位置：首页 → 问答吧 → 仿照凤凰网内容推荐的文字展示条

仿照凤凰网内容推荐的文字展示条

时间：2010-05-25

来源：互联网

凤凰网http://www.ifeng.com/

使用easySlider Jquery插件。
首先需要Jquery.js和easySlider.js文件

<script type="text/javascript" charset="utf-8">
// <![CDATA[
$(document).ready(function(){
$("#slider").easySlider({
   orientation: 'vertical',
   auto: true
});
});
// ]]>
</script>

html

<body>

<div id="slider">
<ul>

<li>新闻信息滚动可控条</li>
<li>content here2...</li>
<li>content here3...</li>
<li>content here4...</li>
<li>content here5...</li>
<li>content here6...</li>

...
</ul>
<span id="prevId"><a href="javascript:void(0);">up</a></span>
<span id="nextId"><a href="javascript:void(0);">down</a></span>
</div>

</body>

css

@charset "gb2312";
/* CSS Document */

#slider{ width:600px;height:30px;overflow:hidden;color:#FFF; font-size:14px;background: #C00; position:relative;}
#slider ul, #slider li{
margin:0;
padding:0;
list-style:none;

}
#slider ul{ display:block; float:left; width:400px;}
#slider li{
width:400px;
overflow:hidden;
line-height:30px;
padding-left:5px;

}

span#prevId{}
span#nextId{}

#prevBtn, #nextBtn{
display:block;
width:20px;
height:10px;
position:absolute;
left:370px; top:14px; *top:22px;
}
#nextBtn{
top:26px;*top:32px;
}
#prevBtn a, #nextBtn a{
display:block;
width:12px;
height:10px;
background: url(../images/up1.png) no-repeat 0 0;
}
#prevBtn a:hover{
display:block;
width:12px;
height:10px;
background:url(../images/up.png) no-repeat 0 0;
}
#nextBtn a{
background:url(../images/down1.png) no-repeat 0 0;
}
#nextBtn a:hover{
background:url(../images/down.png) no-repeat 0 0;
}