您现在的位置: 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文

jQuery实现的多屏图像图层切换效果实例

作者:佚名    责任编辑:admin    更新时间:    2015-10-15 09:49:22

   这篇文章主要介绍了jQuery实现的多屏图像图层切换效果,可实现多个图层的点击切换效果,设计jQuery鼠标事件及样式的操作技巧,需要的朋友可以参考下

  ?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript" src="jquery-1.6.2.min.js"></script> <style type="text/css"> ul{list-style:none;margin:0;padding:0;} li{float:left;} .Xing_focus{ width:875px; height:800px; overflow:hidden;border:1px solid red; } .Xing_focus ul{ width:3500px; } .bnt { float:left;width:300px;height:20px; border:1px solid red; } .bnt li{ width:18px;height:18px; background:red; cursor:pointer; margin-right:10px;float:left; } .bnt .sli{ background:blue; } .next{ width:100px;height:100px; background:#990000;float:left; cursor:pointer; } .pre{ width:100px;height:100px; background:#009;float:left; cursor:pointer;margin-right:30px; } .list1{ width:875px;height:500px;background:red; } .list2{ width:875px;height:500px;background:black; } .list3{ width:875px;height:500px;background:pink; } .list4{ width:875px;height:500px;background:blue; } </style> </head> <body> <div class="Xing_focus" id="box"> <ul class="imgs" id="actor"> <li class="list1"> <img src="http://www.baidu.com/img/baidu_sylogo1.gif" /> </li> <li class="list2"> <img src="http://www.baidu.com/img/baidu_sylogo1.gif" /> </li> <li class="list3"> <img src="http://www.baidu.com/img/baidu_sylogo1.gif" /> </li> <li class="list4"> <img src="http://www.baidu.com/img/baidu_sylogo1.gif" /> </li> </ul> <ul class="bnt" id="bnt"> </ul> <div class="pre" id="pre">上一张</div> <div class="next" id="next">下一张</div> </div> <script type="text/javascript"> $(window).load(function() { var liW = $("#actor li:first").width(); var liL = $("#actor li").length; //alert(liW) var lis = $("#actor li").length; for(i=0;i<lis;i++){ $("#bnt").append("<li></li>") $("#bnt li:first").addClass("sli"); }; $("#bnt li").each(function(index) { $(this).click(function(){ if($("#actor").is(":animated")==false){ $("#actor").animate({"marginLeft":-index*liW},500,function(){ $("#bnt li").removeClass("sli"); $("#bnt li").eq(index).addClass("sli"); }); }; }); }); settime=window.setInterval(atuoScroll,2000); $("#box").hover(function(){ window.clearInterval(settime); },function(){ settime=window.setInterval(atuoScroll,2000); }); //////////////////////////////////////// $("#next").click(function(){ var ulM =parseInt( $("#actor").css("margin-left")); if(ulM==-((liL-1)*liW)&&$("#actor").is(":animated")==false){ $("#actor").animate({"marginLeft":0+"px"},500,function(){ $("#bnt li").removeClass("sli"); $("#bnt li:first").addClass("sli"); }); } else if($("#actor").is(":animated")==false){ $("#actor").animate({"marginLeft":ulM-liW+"px"},500,function(){ var ulM =parseInt( $("#actor").c