当前位置:威尼斯 > jave > 【威尼斯】参照网上的资料及提供的jQuery插件实

【威尼斯】参照网上的资料及提供的jQuery插件实

文章作者:jave 上传时间:2019-09-29

参照网上的资料及提供的jQuery插件实现图片幻灯效果。

参照网上的资料,在ASP.NET中使用JavaScript实现图片自动水平滚动效果。

1、页面前台代码:

1、页面前台代码:

//头部引用

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ImageScroll.aspx.cs" Inherits="SlideDemo.ImageScroll" %>

<head runat="server">
<title></title>
<script type="text/javascript" src="scripts/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="scripts/jquery/jquery.KinSlideshow-1.2.1.min.js"></script>
<script type="text/javascript">
$(function () {
$("#focusNews").KinSlideshow();
})
</script>
</head>

<!DOCTYPE html>
<html xmlns=";
<head runat="server">
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
*
{
margin:0px auto;
padding:0px;
}
#scrolltable
{
width:900px;
}
.scrollimg
{
border:0px;
width:300px;
height:200px;
/*margin:0px 0px;*/
}
</style>
</head>
<body>
<form runat="server">
<div style="width:850px;">ASP.NET中使用JavaScript实现图片自动水平滚动</div>
<div style="overflow: hidden; width: 850px; height: 300px;">
<!--修改显示区域的宽度,不能超过滚动部分表格的宽度-->
<asp:Repeater ID="ScrollRepeater" runat="server">
<HeaderTemplate>
<table border="0">
<tbody>
<tr>
<td >
<!--滚动部分表格开始-->
<table border="0" >
<tr>
</HeaderTemplate>
<ItemTemplate>
<td>
<a title='<%#Eval%>' target="_blank" href='<%#Eval%>'>
<img src='<%#Eval%>' alt='<%#Eval %>' />
</a>
</td>
</ItemTemplate>
<FooterTemplate>
</tr>
</table>
<!--滚动部分表格结束-->
</TD>
<td >
</td>
</tr>
</tbody>
</TABLE>
</FooterTemplate>
</asp:Repeater>
</div>
<script type="text/javascript">
var speed3 = 15//速度数值越大速度越慢
var demo = document.getElementById;
var demo1 = document.getElementById;
var demo2 = document.getElementById;
demo2.innerHTML = demo1.innerHTML
function Marquee() {

<div >
<asp:Repeater ID="FocusList" runat="server">
<ItemTemplate>
<a title='<%#Eval%>' target="_blank" href='<%#Eval%>'>
<img src='<%#Eval%>' alt='<%#Eval%>' /></a>
</ItemTemplate>
</asp:Repeater>
</div>

if (demo2.offsetWidth - demo.scrollLeft <= 0)

2、后台代码,主要是实现数据绑定:

demo.scrollLeft -= demo1.offsetWidth

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindSlider();
}
}

else {

private void BindSlider()
{
List<MyItem> list = new List<MyItem>();
MyItem item1 = new MyItem();
item1.Title = "item1";
item1.Src = "images/1.jpg";
item1.Href = "";
MyItem item2 = new MyItem();
item2.Title = "item2";
item2.Src = "images/2.jpg";
item2.Href = "";
MyItem item3 = new MyItem();
item3.Title = "item3";
item3.Src = "images/3.jpg";
item3.Href = "";
list.Add;
list.Add;
list.Add;
FocusList.DataSource = list;
FocusList.DataBind();
}
下载Demo

demo.scrollLeft++

}

}

var MyMar = setInterval(Marquee, speed3)

demo.onmouseover = function () { clearInterval }

demo.onmouseout = function () { MyMar = setInterval(Marquee, speed3) }

</script>

</form>
</body>
</html>

2、后台代码,主要是实现数据绑定:

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindSroll();
}
}
private void BindSroll()
{
List<MyItem> list = new List<MyItem>();
MyItem item1 = new MyItem();
item1.Title = "item1";
item1.Src = "images/1.jpg";
item1.Href = "";
MyItem item2 = new MyItem();
item2.Title = "item2";
item2.Src = "images/2.jpg";
item2.Href = "";
MyItem item3 = new MyItem();
item3.Title = "item3";
item3.Src = "images/3.jpg";
item3.Href = "";
list.Add;
list.Add;
list.Add;
ScrollRepeater.DataSource = list;
ScrollRepeater.DataBind();

}

下载Demo

本文由威尼斯发布于jave,转载请注明出处:【威尼斯】参照网上的资料及提供的jQuery插件实

关键词: