第一步新建一个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; width: 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=\"width: 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; width: 100%; height: 40px;\">";
9 tcstr += "<div onclick=\"tcbtn1();\" id=\"tc-btn1\" style=\"position: absolute; top: 5px; left: 50%; margin-left: -50px; width: 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; width: 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 }
js脚本方法
第二步新建一个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;
width: 800px;
height: 400px;
border: 2px solid black;
overflow: hidden;
}
#dt-items {
position: relative;
width: 8000px;
height: 400px;
z-index: 10;
}
.dt-item {
width: 800px;
height: 400px;
float: left;
background-size: 100%;
}
.btn {
position: relative;
top: -400px;
width: 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>
时间： 2024-12-25 05:08:52