經常看到好多公司主頁上的產品會自動滾動，實現產品展示的效果。便想自己試試實現這樣的效果，并且圖片是動態從數據庫中獲取，自動水平從左到右或從右到左滾動，下面就是實現的部分代碼：
ImageScroll.aspx頁面：
代碼
1 <%@ Page Language="C#" AutoEventWireup="true"
CodeFile="ImageScroll.aspx.cs" Inherits="ImageScroll" %>
2
3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5 <html xmlns="//www.w3.org/1999/xhtml">
6 <head runat="server">
7 <title></title>;
8 <script type="text/javascript" src="jquery/jquery-1.4.js"></script>
9 <script type="text/javascript" src="js/imageScroller.js"></script>
10 <style type="text/css">
11 #viewer {height:100px; width:300px; clear:both;
overflow:hidden; border:3px solid #e5e5e5;}
12 #viewerFrame {width:505px; clear:both; padding:0;}
13 #viewer img {width:90px; height:90px; margin:5px; display:inline; border:0;}
14 #viewer a {display:block; float:left; width:100px; height:100px;}
15 </style>
16 </head>
17 <script type="text/javascript">
18 $(function() {
19 $("#viewer").imageScroller({
20 next: "right",//向右
21 ; prev: "left",//向左
22 frame: "viewerFrame",//父容器
23 width: 100, //寬度
24 child: "a", //圖片容器
25 auto: true
26 });
27 });
28 </script>
29 <body>
30 <form id="form1" runat="server">
31 <div id="viewer">
32 <div id="viewerFrame">
33 <asp:Repeater ID="Repeater1" runat="server">
34 ; <ItemTemplate>
35 <a href=""><img alt="" src='<%# Eval("p_url") %>' />;</a>
36 </ItemTemplate>
37 </asp:Repeater>
38 </div>
39 </div>
40 <span id="right">next</span><br/><span id="left">prev</span>
41 </form>
42 </body>
43 </html>
44
ImageScroll.aspx.cs頁面
代碼
1 using System;
2 using System.Collections.Generic;
3 using System.Linq;
4 using System.Web;
5 using System.Web.UI;
6 using System.Web.UI.WebControls;
7 using System.Data;
8
9 public partial class ImageScroll : System.Web.UI.Page
10 {
11 protected void Page_Load(object sender, EventArgs e)
12 {
13 bingImage();
14 }
15
16 ; public void bingImage()
17 {
18 string strSql = "select p_url from product";
19 DataSet ds = AccessDB.Dataset(strSql);
20 Repeater1.DataSource = ds;
21 Repeater1.DataBind();
22 }
23 }
imageScroller.js文件
代碼
1 jQuery.fn.imageScroller = function(params){
2 var p = params || {
3 next:"buttonNext",
4 prev:"buttonPrev",
5 frame:";viewerFrame",
6 width:100,
7 child:"a",
8 auto:true
9 };
10 var _btnNext = $("#"+ p.next);
11 var _btnPrev = $("#"+ p.prev);
12 var _imgFrame = $("#"+ p.frame);
13 var _width = p.width;
14 var _child = p.child;
15 var _auto = p.auto;
16 var _itv;
17
18 var turnLeft = function(){
19 _btnPrev.unbind("click",turnLeft);
20 if(_auto) autoStop();
21 _imgFrame.animate( {marginLeft:-_width}, 'fast', '', function(){
22 _imgFrame.find(_child+":first").appendTo( _imgFrame );
23 _imgFrame.css("marginLeft",0);
24 _btnPrev.bind("click",turnLeft);
25 ; if(_auto) autoPlay();
26 });
27 };
28
29 var turnRight = function(){
30 _btnNext.unbind("click",turnRight);
31 if(_auto) autoStop();
32 _imgFrame.find(_child+":last").clone().show().prependTo( _imgFrame );
33 _imgFrame.css("marginLeft",-_width);
34 _imgFrame.animate( {marginLeft:0}, 'fast' ,'', function(){
35 _imgFrame.find(_child+":last").remove();
36 _btnNext.bind("click",turnRight);
37 if(_auto) autoPlay();
38 });
39 };
40
41 _btnNext.css("cursor","hand").click( turnRight );
42 _btnPrev.css("cursor","hand").click( turnLeft );
43
44 ; var autoPlay = function(){
45 _itv = window.setInterval(turnLeft, 3000);
46 };
47 var autoStop = function(){
48 ; window.clearInterval(_itv);
49 };
50 if(_auto) autoPlay();
51 };
標簽：
本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自：網絡轉載
金喜正規買球 
109次
金喜正規買球相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線