实现相册内滚动条效果
现有代码如下：<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="Images._default" %>
<!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>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<title>相册效果</title>
<link rel="stylesheet" href="Styles/style.css" />
<link href="Styles/index.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/roll.js"></script>
</head>
<body>
<div id="container">
<div class="area">
<div id="imageFlow">
<div class="bank">
<ul id="slideshow">
<li>
<h3>
TinySlideshow v1</h3>
<span>photos/orange-fish.jpg</span>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris
nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut,
felis.</p>
<a href="#">
<img src="thumbnails/orange-fish-thumb.jpg" alt="Orange Fish" /></a> </li>
<li>
<h3>
Sea Turtle</h3>
<span>photos/sea-turtle.jpg</span>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris
nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut,
felis.</p>
<a href="#">
<img src="thumbnails/sea-turtle-thumb.jpg" alt="Sea Turtle" /></a> </li>
<li>
<h3>
Red Coral</h3>
<span>photos/red-coral.jpg</span>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris
nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut,
felis.</p>
<a href="#">
<img src="thumbnails/red-coral-thumb.jpg" alt="Red Coral" /></a> </li>
<li>
<h3>
Coral Reef</h3>
<span>photos/coral-reef.jpg</span>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris
nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut,
felis.</p>
<a href="#">
<img src="thumbnails/coral-reef-thumb.jpg" alt="Coral Reef" /></a> </li>
<li>
<h3>
Blue Fish</h3>
<span>photos/blue-fish.jpg</span>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris
nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut,
felis.</p>
<img src="thumbnails/blue-fish-thumb.jpg" alt="Blue Fish" />
</li>
<li>
<h3>
TinySlideshow v.2</h3>
<span>photos/yellow-fish.jpg</span>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris
nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut,
felis.</p>
<a href="#">
<img src="thumbnails/yellow-fish-thumb.jpg" alt="Yellow Fish" /></a> </li>
<li>
<h3>
Squid</h3>
<span>photos/squid.jpg</span>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris
nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut,
felis.</p>
<a href="#">
<img src="thumbnails/squid-thumb.jpg" alt="Squid" /></a> </li>
<li>
<h3>
Small Fish</h3>
<span>photos/small-fish.jpg</span>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris
nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut,
felis.</p>
<a href="#">
<img src="thumbnails/small-fish-thumb.jpg" alt="Small Fish" /></a> </li>
</ul>
</div>
<div id="wrapper">
<div id="fullsize">
<div style="width:50%;" id="imgprev" class="imgnav" title="Previous Image">
<div style="cursor: url('images/left.cur');background:#C0C0C0;filter:Alpha(Opacity=6,Style=1); height:100%;width:100%;float:left;">
</div>
</div>
<div id="imglink">
</div>
<div style="width:50%;" id="imgnext" class="imgnav" title="Next Image">
<div style="cursor: url('images/right.cur');background:#C0C0C0;filter:Alpha(Opacity=1,Style=60);height:100%;width:100%;float:right;">
</div>
</div>
<div id="image">
</div>
<div id="information">
<h3>
</h3>
<p>
</p>
</div>
</div>
<div id="thumbnails">
<div id="slideleft" title="Slide Left"></div>
<%--<div class="bank">--%>
<div id="slidearea">
<div id="slider"></div>
<%-- </div>--%>
</div>
<div id="slideright" title="Slide Right"></div>
<div class="text"></div>
<div class="scrollbar">
<img class="track" src="images/sb.gif" alt="">
<img class="arrow-left" src="images/sl.gif" alt="">
<img class="arrow-right" src="images/sr.gif" alt="">
<img class="bar" src="images/sc.gif" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="Scripts/compressed.js"></script>
<script type="text/javascript">
$('slideshow').style.display = 'none';
$('wrapper').style.display = 'block';
var slideshow = new TINY.slideshow("slideshow");
window.onload = function () {
slideshow.auto = true;
slideshow.speed = 5;
slideshow.link = "linkhover";
slideshow.info = "information";
slideshow.thumbs = "slider";
slideshow.left = "slideleft";
slideshow.right = "slideright";
slideshow.scrollSpeed = 4;
slideshow.spacing = 5;
slideshow.active = "#fff";
slideshow.init("slideshow", "image", "imgprev", "imgnext", "imglink");
}
$(document).ready(function () {
alert("end");
});
</script>
</body>
</html>
想要实现滚动条效果，怎么做啊！？ --------------------编程问答--------------------
你这个代码让我情何以堪。。。
只能参考了 --------------------编程问答-------------------- <asp:TemplateField HeaderText="Name">
<ItemTemplate>
<asp:LinkButton ID="LinkButton1" runat="server" OnClientClick=' <%# "window.open(\"detail.aspx?ID=" + Eval("ID")+ "\",null,\"width=300,height=200\");return false;" %>'> <%# Eval("Name")%> </asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<a href=' <%# "javascript:window.open(\"detail.aspx?ID=" + Eval("ID")+ "\",null,\"width=300,height=200\");void 0;" %>'> <%# Eval("Name")%> </a>
</ItemTemplate>
</asp:TemplateField>
<asp:HyperLinkField DataNavigateUrlFields="ID" DataNavigateUrlFormatString="detail.aspx?ID={0}"
DataTextField="id" HeaderText="名称" Target="_blank">
--------------------编程问答-------------------- http://www.open-open.com/ajax/Gallery.htm --------------------编程问答-------------------- 3楼给的传送门不错，赞一个 --------------------编程问答-------------------- 2楼，你写的代码我这里边用不起来啊！-_-！ --------------------编程问答-------------------- 三楼的谢了，不过我想要的是这种效果：
http://cul.book.qq.com/a/20110111/000021.htm#p=13
补充：.NET技术 , ASP.NET
