jquery Big Picture Carousel

The first step is to create a new JS folder to put the existing jquery-1.7.1.min.js into the folder to the head section

The second step encapsulates a JS script method introduced to the head section of the page, with the following code:

1 function Myalert (t, c, TC) {2 3     varTcstr ="<div id=\ "tc\" style=\ "position:fixed; width:400px; left:50%; Margin-left: -200px; top: -500px; border:1px soli D Red; box-shadow:0 0 10px Pink; z-index:1001; Background-color:white;\ ">";4Tcstr + ="<div id=\ "tc-top\" style=\ "width:100%; height:30px; background-color:red; color:white; font-size:18px; font-we Ight:bold; Text-align:center; Line-height:30px;\ ">";5Tcstr + = t;//here is the title6Tcstr + ="</div><div id=\ "tc-main\" style=\ "padding:20px; text-align:center;\" >";7Tcstr + =C;8Tcstr + ="</div><div id=\ "tc-bottom\" style=\ "position:relative; width:100%; height:40px;\" >";9Tcstr + ="<div onclick=\ "tcbtn1 (); \" Id=\ "tc-btn1\" style=\ "Position:absolute; top:5px; left:50%; Margin-left: -50px; wid th:100px; height:30px; Background-color:pink; Color:white; Text-align:center; line-height:30px; Cursor:pointer;\ "> OK </div></div></div>";TenTcstr + ="<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>"; One  A $ (document.body). Append (tcstr); -  -$("#tc-top"). Text (t); the$("#tc-main"). HTML (c); -$("#tc"). Animate ({top:" -"}, -). Animate ({top:" -"}, -). Animate ({top:" -"}, $); -$("#tc-zz"). CSS ("Display","Block"); -     if(TC! =NULL) $("#tc-top"). CSS ("Background-color", TC); + } -  + function tcbtn1 () { A$("#tc"). Animate ({top:" the"}, $). Animate ({top:"-500"}, -, function () { at$("#tc-zz"). CSS ("Display","None"); -$("#tc"). Remove (); -$("#tc-zz"). Remove (); -     }); -}

JS Scripting Method

The second step creates a new Web form, and the HTML and jquery code for the form are as follows:

<%@ Page language="C #"autoeventwireup="true"codefile="Datulunbo.aspx.cs"inherits="Datulunbo"%><! DOCTYPE html>"http://www.w3.org/1999/xhtml">"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:0Auto;            width:800px;            height:400px;            BORDER:2PX solid black;        Overflow:hidden; } #dt-items {position:relative;            width:8000px;            height:400px; Z-index:Ten; }. DT-Item {width:800px;            height:400px; float: Left; Background-size: -%;            }. btn {position:relative; Top:-400px; Width: -%; Height: -%; float: Left; Z-index: One; }    </style>"Form1"runat="Server"> <div id="DT"> <div id="Dt-items"> <divclass="Dt-item"style="Background-image:url (images/1.jpg);"></div> <divclass="Dt-item"style="Background-image:url (images/2.jpg);"></div> <divclass="Dt-item"style="Background-image:url (images/3.jpg);"></div> <divclass="Dt-item"style="Background-image:url (images/4.jpg);"></div> <divclass="Dt-item"style="Background-image:url (images/5.jpg);"></div> <divclass="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>"Text/javascript">varImgindex =0; vartimer; $("#btn_left"). Click (function () {Imgindex--; if(Imgindex <0) Imgindex = $ (". Dt-item"). Length-1; varImgleft = parseint ("-"+ parseint ($ (". Dt-item"). EQ (0). Width ()) *Imgindex); $("#dt-items"). Stop (). Animate ({Left:imgleft}, -);    }); $("#btn_right"). Click (function () {Imgindex++; if(Imgindex > ($ (". Dt-item"). Length-1)) Imgindex =0; varImgleft = parseint ("-"+ parseint ($ (". Dt-item"). EQ (0). Width ()) *Imgindex); $("#dt-items"). Stop (). Animate ({Left:imgleft}, -);    }); Timer=Automove (); function Automove () {returnWindow.setinterval (function () {Imgindex++; if(Imgindex > ($ (". Dt-item"). Length-1)) Imgindex =0; varImgleft = parseint ("-"+ parseint ($ (". Dt-item"). EQ (0). Width ()) *Imgindex); $("#dt-items"). Stop (). Animate ({Left:imgleft}, -); },  -); }    $("#dt"). Hover (function () {window.clearinterval (timer); }, function () {Timer=Automove (); });</script>

View Code

jquery Big Picture Carousel