用JQuery实现简单的滚动广告:
实现的思想是,定义一个div,div大小跟每张图片的大小一致。在div里面定义两个ul列表,一个用于显示图片,一个用于控制图片.定义div的 overflow值为hidden,使div内只能显示一张图片,然后利用JQuery的animate()实现整个ul的上下移动,使之显示指定的图片。
HTML代码
按 Ctrl+C 复制代码
<div id="d1">
<ul id="adv">
<li><img src="images/1.jpg" alt="1" />
</li>
<li><img src="images/2.jpg" alt="2" />
</li>
<li><img src="images/3.jpg" alt="3" />
</li>
<li><img src="images/4.jpg" alt="4" />
</li>
<li><img src="images/5.jpg" alt="5" />
</li>
</ul>
<ul id="num">
<li>
1
</li>
<li>
2
</li>
<li>
3
</li>
<li>
4
</li>
<li>
5
</li>
</ul>
</div>
按 Ctrl+C 复制代码
CSS代码
按 Ctrl+C 复制代码
* {
margin: 0px;
padding: 0px;
}
#d1 {
border: 2px solid #E98C36;
width: 548px;
height: 177px;
margin-left: 30%;
margin-top: 10%;
position: relative;
overflow: hidden;
}
#adv, #num {
position: absolute;
}
ul li {
list-style: none;
display: inline;
}
ul img {
width: 548px;
height: 177px;
display: block;
}
#num {
right: 5px;
bottom: 5px;
}
#num li {
float: left;
color: #FF7300;
text-align: center;
line-height: 16px;
width: 16px;
height: 16px;
font-family: Arial;
font-size: 12px;
cursor: pointer;
overflow: hidden;
margin: 3px 1px;
border: 1px solid #FF7300;
}
.on {
line-height: 21px;
width: 21px;
height: 21px;
font-size: 16px;
margin: 0 1px;
border: 0;
background-color: red;
font-weight: bold;
}
按 Ctrl+C 复制代码
JS代码
按 Ctrl+C 复制代码
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript">
var i = 0;
$(function() {
//当鼠标移到所有的li下标时
$("#num li").mouseover(function() {
//获得当前li的下标
var index=$("#num li").index(this);
//调用showImage()完成图片的滚动
showImage(index);
}).eq(0).mouseover();
//加载页面时触发
var taskId;
$("#d1").hover(function(){
//当鼠标移到图片上时停止滚动
clearInterval(taskId);
},function(){
//当鼠标移走时开始滚动
taskId=setInterval(function(){
showImage(i);
i++;
if(i==5) i=0;
},2000);
}).mouseleave();
});
//完成图片的滚动
function showImage(index) {
i=index;
//执行当前的动画,如果之前的动画还没有完成,则立即清除之前的动画
$("#adv").stop(true).animate({
top : -177 * index
}, 1000)
//当前的li下标,高度显亮;并且使之前显亮的下标恢复原来的颜色
$("#num li").eq(index).addClass("on").siblings().removeClass("on");
}
</script>
按 Ctrl+C 复制代码
JQuery实现滚动广告（转）