第一步新建一个js文件夹将现有的jquery-1.7.1.min.js放到该文件夹下引如到head部分
第二步封装一个jS脚本方法引入到页面的HEAD部分，代码如下：
1 function myalert(t, c, tc) { 2 3 var tcstr = "<div id="tc" style="position: fixed; 400px; left: 50%; margin-left: -200px; top: -500px; border: 1px solid red; box-shadow: 0 0 10px pink; z-index: 1001; background-color: white;">"; 4 tcstr += "<div id="tc-top" style=" 100%; height: 30px; background-color: red; color: white; font-size: 18px; font-weight: bold; text-align: center; line-height: 30px;">"; 5 tcstr += t;//这里是标题 6 tcstr += "</div><div id="tc-main" style="padding: 20px; text-align: center;">"; 7 tcstr += c; 8 tcstr += "</div><div id="tc-bottom" style="position: relative; 100%; height: 40px;">"; 9 tcstr += "<div onclick="tcbtn1();" id="tc-btn1" style="position: absolute; top: 5px; left: 50%; margin-left: -50px; 100px; height: 30px; background-color: pink; color: white; text-align: center; line-height: 30px; cursor: pointer;">确定</div></div></div>"; 10 tcstr += "<div id="tc-zz" style="position: fixed; top: 0px; left: 0px; 100%; height: 100%; background-color: black; opacity: 0.3; display: none; z-index: 1000;"></div>"; 11 12 $(document.body).append(tcstr); 13 14 $("#tc-top").text(t); 15 $("#tc-main").html(c); 16 $("#tc").animate({ top: "100" }, 500).animate({ top: "90" }, 100).animate({ top: "100" }, 200); 17 $("#tc-zz").css("display", "block"); 18 if (tc != null) $("#tc-top").css("background-color", tc); 19 } 20 21 function tcbtn1() { 22 $("#tc").animate({ top: "110" }, 200).animate({ top: "-500" }, 500, function () { 23 $("#tc-zz").css("display", "none"); 24 $("#tc").remove(); 25 $("#tc-zz").remove(); 26 }); 27 }
第二步新建一个web窗体；该窗体的HTML代码和JQuery代码如下如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="datulunbo.aspx.cs" Inherits="datulunbo" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="js/jquery-1.7.1.min.js"></script> <title></title> <style type="text/css"> #dt { margin-top: 50px; margin: 0 auto; 800px; height: 400px; border: 2px solid black; overflow: hidden; } #dt-items { position: relative; 8000px; height: 400px; z-index: 10; } .dt-item { 800px; height: 400px; float: left; background-size: 100%; } .btn { position: relative; top: -400px; 50%; height: 100%; float: left; z-index: 11; } </style> </head> <body> <form id="form1" runat="server"> <div id="dt"> <div id="dt-items"> <div class="dt-item" style="background-image: url(images/1.jpg);"></div> <div class="dt-item" style="background-image: url(images/2.jpg);"></div> <div class="dt-item" style="background-image: url(images/3.jpg);"></div> <div class="dt-item" style="background-image: url(images/4.jpg);"></div> <div class="dt-item" style="background-image: url(images/5.jpg);"></div> <div class="dt-item" style="background-image: url(images/6.jpg);"></div> </div> <div id="btn_left" class="btn"></div> <div id="btn_right" class="btn"></div> </div> </form> </body> </html> <script type="text/javascript"> var imgindex = 0; var timer; $("#btn_left").click(function () { imgindex--; if (imgindex < 0) imgindex = $(".dt-item").length - 1; var imgleft = parseInt("-" + parseInt($(".dt-item").eq(0).width()) * imgindex); $("#dt-items").stop().animate({ left: imgleft }, 500); }); $("#btn_right").click(function () { imgindex++; if (imgindex > ($(".dt-item").length - 1)) imgindex = 0; var imgleft = parseInt("-" + parseInt($(".dt-item").eq(0).width()) * imgindex); $("#dt-items").stop().animate({ left: imgleft }, 500); }); timer = automove(); function automove() { return window.setInterval(function () { imgindex++; if (imgindex > ($(".dt-item").length - 1)) imgindex = 0; var imgleft = parseInt("-" + parseInt($(".dt-item").eq(0).width()) * imgindex); $("#dt-items").stop().animate({ left: imgleft }, 500); }, 2000); } $("#dt").hover(function () { window.clearInterval(timer); }, function () { timer = automove(); }); </script>