ASP. NET uses JavaScript to implement automatic horizontal scrolling of images. asp. netjavascript
Use JavaScript in ASP. NET to implement automatic horizontal scrolling of images based on the information on the Internet.
1. Page front-end code:
<% @ Page Language = "C #" AutoEventWireup = "true" CodeBehind = "ImageScroll. aspx. cs" Inherits = "SlideDemo. ImageScroll" %>
<! DOCTYPE html>
<Html xmlns = "http://www.w3.org/1999/xhtml">
<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 id = "form1" runat = "server">
<Div style = "width: 850px;"> using JavaScript in ASP. NET to automatically scroll horizontally </div>
<Div id = "demo" style = "overflow: hidden; width: 850px; height: 300px;">
<! -- Modify the display area width, which cannot exceed the width of the scrolling table -->
<Asp: Repeater ID = "ScrollRepeater" runat = "server">
<HeaderTemplate>
<Table border = "0">
<Tbody>
<Tr>
<Td id = "demo1">
<! -- Start from scrolling some tables -->
<Table border = "0" id = "scrolltable">
<Tr>
</HeaderTemplate>
<ItemTemplate>
<Td>
<A title = '<% # Eval ("Title") %> 'target = "_ blank" href =' <% # Eval ("Href") %> '>
'alt =' <% # Eval ("Title") %> '/>
</A>
</Td>
</ItemTemplate>
<FooterTemplate>
</Tr>
</Table>
<! -- Scroll to the end of some tables -->
</TD>
<Td id = "demo2">
</Td>
</Tr>
</Tbody>
</TABLE>
</FooterTemplate>
</Asp: Repeater>
</Div>
<Script type = "text/javascript">
Var speed3 = 15 // The greater the speed, the slower the speed.
Var demo = document. getElementById ("demo ");
Var demo1 = document. getElementById ("demo1 ");
Var demo2 = document. getElementById ("demo2 ");
Demo2.innerHTML = demo1.innerHTML
Function Marquee (){
If (demo2.offsetWidth-demo. scrollLeft <= 0)
Demo. scrollLeft-= demo1.offsetWidth
Else {
Demo. scrollLeft ++
}
}
Var MyMar = setInterval (Marquee, speed3)
Demo. onmouseover = function () {clearInterval (MyMar )}
Demo. onmouseout = function () {MyMar = setInterval (Marquee, speed3 )}
</Script>
</Form>
</Body>
</Html>
2. The background code mainly implements data binding:
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 = "http://www.szit.edu.cn ";
MyItem item2 = new MyItem ();
Item2.Title = "item2 ";
Item2.Src = "images/2.jpg ";
Item2.Href = "http://www.sohu.com ";
MyItem item3 = new MyItem ();
Item3.Title = "item3 ";
Item3.Src = "images/3.jpg ";
Item3.Href = "http://www.sina.com ";
List. Add (item1 );
List. Add (item2 );
List. Add (item3 );
ScrollRepeater. DataSource = list;
ScrollRepeater. DataBind ();
}
Download Demo
Just give you a piece of simple code.
<Html>
<Head>
<Title> image scrolling </title>
<Style>
# Div1
{Position: relative; width: pixel PX; height: 210px; overflow: hidden;
}
# Div2 {position: absolute ;}
Li {float: left; list-style-type: none; padding: 5px ;}
Img {border: none ;}
# Div2 li a: hover {top:-10px ;}
A {position: relative ;}
</Style>
<Script>
Window. onload = function ()
{
Var odiv2 = document. getElementById ('div2 ');
Var ali = odiv2.getElementsByTagName ('lil ');
Var aspeed =-5;
Var timer = null;
Odiv2.innerHTML + = odiv2.innerHTML;
Odiv2.style. width = ali [0]. offsetWidth * ali. length + 'px ';
Odiv2.onmouseover = function () {clearInterval (timer );};
Function ()
{
Timer = setInterval (function ()
{
Odiv2.style. left = odiv2.offsetLeft + aspeed + 'px ';
If (odiv2.offsetLeft <-odiv2.offsetWidth/2)
{
Odiv2.style. left = '0px ';
}
}, 30 );};
Odiv2.onmouseout =;
A ();
}
</Script>
</Head>
<Body>
<Div id = 'div1 '>
<Div id = 'div2'>
<Li> <a href = ""> </a> </li>
<Li> <a href = ""> </a> </li>
<Li> <a href = ""> </a> </li>
<Li> <a href = ""> <& # ...... remaining full text>
Javascript-based image scrolling
I saw this.
<Marquee onmouseover = "this. stop ();" onmouseout = "this. start ();">
</Marquee>
You can do this, and move your mouse over the button to get out of the picture.
Click the button to enter the event, and the image will scroll. The code is roughly the same
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
