这种图片滚动怎么实现？
--------------------编程问答-------------------- 都有现成的库可以使用。。Google jQuery图片滚动。 --------------------编程问答-------------------- 能否具体点？ --------------------编程问答-------------------- 区别不大，很多jqeury第三方库能实现。基本是图片布局的时候部分隐藏，通过定时器循环改变位置。 --------------------编程问答-------------------- <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
window.onload = function () {
var oBox = document.getElementById("box");
var aUl = document.getElementsByTagName("ul");
var aa = document.getElementById("aImg");
var bb = document.getElementById("aNum");
var aImg = aa.getElementsByTagName("li");
var aNum = bb.getElementsByTagName("li");
var timer = play = null;
var i = index = 0;
var bOrder = true;
//切换按钮
for (i = 0; i < aNum.length; i++) {
aNum[i].index = i;
aNum[i].onmouseover = function () {
show(this.index)
}
}
//自动播放函数
function autoPlay() {
play = setInterval(function () {
//判断播放顺序
bOrder ? index++ : index--;
//正序
index >= aImg.length && (index = aImg.length - 2, bOrder = false);
//倒序
index <= 0 && (index = 0, bOrder = true);
//调用函数
show(index)
}, 1000);
}
autoPlay(); //应用
//图片切换, 淡入淡出效果
function show(a) {
index = a;
var alpha = 0;
for (i = 0; i < aNum.length; i++) aNum[i].className = "";
aNum[index].className = "current";
clearInterval(timer);
for (i = 0; i < aImg.length; i++) {
aImg[i].style.opacity = 0;
aImg[i].style.filter = "alpha(opacity=0)";
}
timer = setInterval(function () {
alpha += 5;
alpha > 100 && (alpha = 100);
aImg[index].style.opacity = alpha / 100;
aImg[index].style.filter = "alpha(opacity = " + alpha + ")";
alpha == 100 && clearInterval(timer)
}, 20);
}
};
</script>
<style type="text/css">
#box
{
position: relative;
}
#box .list li
{
position: absolute;
}
#box .count
{
position: absolute;
right: 0;
bottom: 5px;
}
#box .count li
{
color: #fff;
float: left;
width: 15px;
height: 15px;
cursor: pointer;
margin-right: 5px;
overflow: hidden;
text-align: center;
background: #F90;
opacity: 0.7;
filter: alpha(opacity=70);
border-radius: 20px;
}
#box .count li.current
{
color: #fff;
opacity: 1;
filter: alpha(opacity=100);
font-weight: 700;
background: #f60;
text-align: center;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="box" style="width: 180px; height: 122px; margin-top: 10px">
<ul id="aImg" class="list" style="width: 180px; height: 122px">
<li class="current">
<img src="images/商业网站1.jpg" height="122" width="180" alt="" /></li>
<li>
<img src="images/商业网站2.jpg" height="122" width="180" alt="" /></li>
<li>
<img src="images/商业网站3.jpg" height="122" width="180" alt="" /></li>
<li>
<img src="images/商业网站4.jpg" height="122" width="180" alt="" /></li>
</ul>
<ul id="aNum" class="count" style="">
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
</form>
</body>
</html>
补充：.NET技术 , ASP.NET
