5种超酷的Jquery轮换特效融为一体。
- <script type="text/javascript">
- $(document).ready(function(e) {
- ImgRotation.Parent = $("#MainDiv");
- ImgRotation.Initialize();
- });
- var ImgRotation = {
- Parameters: [{
- width: "400",
- height: "250"
- }],
- Parent: null,
- Mainchild: null,
- tips: null,
- index: 0,
- dJson: [{
- imgTips: "img1",
- imgUrl: "img1.jpg"
- }, {
- imgTips: "img2",
- imgUrl: "img2.jpg"
- }, {
- imgTips: "img3",
- imgUrl: "img3.jpg"
- }, {
- imgTips: "img4",
- imgUrl: "img4.jpg"
- }, {
- imgTips: "img5",
- imgUrl: "img5.jpg"
- }],
- Initialize: function() {
- if (ImgRotation.Parent == null) {
- ImgRotation.Parent = $(document.body);
- }
- ImgRotation.Mainchild = $("<div id=\"container\"></div>");
- ImgRotation.Parent.append(ImgRotation.Mainchild);
- tips = $("<div id=\"tips\"></div>");
- tips.css("color", "#fff").css("padding-left", "10px").css("padding-top", "10px");
- tips.css("width", ImgRotation.Parameters[0].width "px").css("height", "45px").css("background-color", "#333").css("opacity", "0.8").css("margin-top", ImgRotation.Parameters[0].height "px");
- ImgRotation.Mainchild.append(tips);
- ImgRotation.Mainchild.hover(function() {
- tips.animate({
- marginTop: ImgRotation.Parameters[0].height - 45 "px"
- }, 500)
- }, function() {
- tips.animate({
- marginTop: ImgRotation.Parameters[0].height "px"
- }, 500)