//base.css中根据自身习惯写写常用的样式规范，比如说a加上一个decoration:none;ul加上margin:0px;paddinga:0px;等等
1 <!DOCTYPE html> 2 3 <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <meta charset="gb2312" /> 6 <title>焦点图1</title> 7 <meta charset="utf-8"> 8 <link href="base.css" rel="stylesheet" type="text/css"/> 9 <link href="layout.css" rel="stylesheet" type="text/css"/> 10 <script src="jquery.min.js"></script> 11 <script src="focus.js"></script> 12 <script src="animation.js"></script> 13 </head> 14 <body> 15 <div class="pic-news"> 16 <div id="Home_A_B" class="pic"> 17 <ul class="bigImg_Box fleft"> 18 <li title="标题1" h="描述1" class="noactive"> 19 <a href="javascript://"> <img src="a.jpg"/> </a> 20 </li> 21 22 <li title="标题2" h="描述2" class="noactive"> 23 <a href="javascript://"> <img src="b.jpg"/> </a> 24 </li> 25 <li title="标题3" h="描述3"class="noactive"> 26 <a href="javascript://"> <img src="c.jpg"/> </a> 27 </li> 28 29 <li title="标题4" h="描述4" class="noactive"/> 30 <a href="javascript://"> <img src="c.jpg"/> </a> 31 </li> 32 </ul> 33 </div> 34 <div class="font"> 35 <h3> 36 <a href="javascript://"></a> 37 </h3> 38 <p></p> 39 </div> 40 <div class="tab"></div> 41 </div> 42 </body> 43 </html>
1 .pic-news{ background: #ede8dc none repeat scroll 0 0; 2 position:relative; 3 height: 430px; 4 margin: 0px auto; 5 width: 662px;} 6 .pic-news .pic{ width:662px; height:300px; overflow:hidden;position:relative;} 7 .pic-news .pic .bigImg_Box{ overflow:hidden;width:662px;height:300px;position:relative;margin:0px;padding:0px;} 8 .pic-news .pic .bigImg_Box li{ width:662px; height:300px; overflow:hidden;position:absolute;top:0px;left:0px;opacity:0;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;-webkit-opacity:0;} 9 .pic-news .pic .bigImg_Box li a{text-decoration:none;width:662px; height:300px; overflow:hidden; display:block;} 10 .pic-news .pic .bigImg_Box li a img{width:100%;height:100%;transform:scale(1.1);-webkit-transform:scale(1.1);-o-transform:scale(1.1);-ms-transform:scale(1.1);-moz-transform:scale(1.1);transition:transform 0.3s linear;-moz-transition:transform 0.3s linear;-o-transition:transform 0.3s linear;-webkit-transition:transform 0.3s linear;-ms-transition:transform 0.3s linear;} 11 .pic-news .pic .bigImg_Box li a img:hover{transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);-webkit-transform:scale(1);} 12 .pic-news .pic .bigImg_Box li.active{animation:700ms ease 0ms normal both 1 running focus;-moz-animation:700ms ease 0ms normal both 1 running focus;-webkit-animation:700ms ease 0ms normal both 1 running focus;-o-animation:700ms ease 0ms normal both 1 running focus;display:block;opacity:1;filter:alpha(opacity=100);-moz-opacity:100;-khtml-opacity:100;-webkit-opacity:100;} 13 .pic-news .pic .bigImg_Box .noactive{display:block;animation:700ms ease 0ms normal both 1 running nofocus;-moz-animation:700ms ease 0ms normal both 1 running nofocus;-webkit-animation:700ms ease 0ms normal both 1 running nofocus;-o-animation:700ms ease 0ms normal both 1 running nofocus;} 14 .pic-news .font{ padding:4px 16px; text-align:center;overflow:hidden;width:630px;height:72px;text-align:left;} 15 .pic-news .font h3{margin:0px ;padding:0px;font:18px/36px 微软雅黑;color:#1e1e1e;height:36px;overflow:hidden;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;} 16 .pic-news .font h3 a{text-decoration:none;font:20px/26px 微软雅黑;color:#1e1e1e;text-align:center;} 17 .pic-news .font p{font:12px/18px 微软雅黑;color:#1e1e1e;width:100%;height:36px;overflow:hidden;text-indent:2em;} 18 /*.pic-news .font ul li{ font:normal 14px/30px 微软雅黑,Arial; color:#730204;height:60px;overflow:hidden;}*/ 19 .pic-news .tab{ overflow:hidden; position:absolute; right:20px; bottom:22px;} 20 .pic-news .tab a{text-decoration:none; display:block; float:left; width:26px; height:21px; background:#fff; margin:0;font:12px/20px "微乳雅黑";text-align:center;color:#212121;border:1px solid #d4d4d4;border-right:0px;} 21 .pic-news .tab a:last-child{border-right:1px solid #d4d4d4} 22 .pic-news .tab a:hover,.pic-news .tab .e{ background:#730204;color:#fff;border-color:#730204;} 23 @keyframes focus 24 { 25 0% 26 { 27 opacity:1; 28 filter:alpha(opacity=100); 29 -moz-opacity:1; 30 -khtml-opacity:1; 31 transform:translateY(100%); 32 -moz-transform:translateY(100%); 33 -webkit-transform:translateY(100%); 34 -o-transform:translateY(100%); 35 } 36 100% 37 { 38 opacity:1; 39 filter:alpha(opacity=100); 40 -moz-opacity:1; 41 -khtml-opacity:1; 42 transform:translateY(0%); 43 -moz-transform:translateY(0%); 44 -o-transform:translateY(0%); 45 -webkit-transform:translateY(0%); 46 } 47 } 48 @-ms-keyframes focus 49 { 50 0% 51 { 52 opacity:1; 53 filter:alpha(opacity=100); 54 -moz-opacity:1; 55 -khtml-opacity:1; 56 -ms-opacity:1; 57 transform:translateY(100%); 58 -moz-transform:translateY(100%); 59 -webkit-transform:translateY(100%); 60 -o-transform:translateY(100%); 61 -ms-transform:translateY(100%); 62 } 63 100% 64 { 65 opacity:1; 66 filter:alpha(opacity=100); 67 -moz-opacity:1; 68 -khtml-opacity:1; 69 -ms-opacity:1; 70 transform:translateY(0%); 71 -moz-transform:translateY(0%); 72 -o-transform:translateY(0%); 73 -webkit-transform:translateY(0%); 74 } 75 } 76 77 @-moz-keyframes focus 78 { 79 0% 80 { 81 opacity:1; 82 filter:alpha(opacity=100); 83 -moz-opacity:1; 84 -khtml-opacity:1; 85 transform:translateY(100%); 86 -moz-transform:translateY(100%); 87 -webkit-transform:translateY(100%); 88 -o-transform:translateY(100%); 89 } 90 100% 91 { 92 opacity:1; 93 filter:alpha(opacity=100); 94 -moz-opacity:1; 95 -khtml-opacity:1; 96 transform:translateY(0%); 97 -moz-transform:translateY(0%); 98 -o-transform:translateY(0%); 99 -webkit-transform:translateY(0%); 100 } 101 } 102 @-o-keyframes focus 103 { 104 0% 105 { 106 opacity:1; 107 filter:alpha(opacity=100); 108 -moz-opacity:1; 109 -khtml-opacity:1; 110 transform:translateY(100%); 111 -moz-transform:translateY(100%); 112 -webkit-transform:translateY(100%); 113 -o-transform:translateY(100%); 114 } 115 100% 116 { 117 opacity:1; 118 filter:alpha(opacity=100); 119 -moz-opacity:1; 120 -khtml-opacity:1; 121 transform:translateY(0%); 122 -moz-transform:translateY(0%); 123 -o-transform:translateY(0%); 124 -webkit-transform:translateY(0%); 125 } 126 } 127 @-webkit-keyframes focus 128 { 129 0% 130 { 131 opacity:1; 132 filter:alpha(opacity=100); 133 -moz-opacity:1; 134 -khtml-opacity:1; 135 transform:translateY(100%); 136 -moz-transform:translateY(100%); 137 -webkit-transform:translateY(100%); 138 -o-transform:translateY(100%); 139 } 140 100% 141 { 142 opacity:1; 143 filter:alpha(opacity=100); 144 -moz-opacity:1; 145 -khtml-opacity:1; 146 transform:translateY(0%); 147 -moz-transform:translateY(0%); 148 -o-transform:translateY(0%); 149 -webkit-transform:translateY(0%); 150 } 151 } 152 @keyframes nofocus { 153 0% { 154 opacity:1; 155 filter:alpha(opacity=100); 156 -moz-opacity:1; 157 -khtml-opacity:1; 158 -ms-opacity:1; 159 transform: translateY(0%); 160 -moz-transform:translateY(0%); 161 -o-transform:translateY(0%); 162 -webkit-transform:translateY(0%); 163 -ms-transform:translateY(0%); 164 } 165 100% { 166 opacity: 1; 167 transform: translateY(-100%); 168 -moz-transform:translateY(-100%); 169 -webkit-transform:translateY(-100%); 170 -o-transform:translateY(-100%); 171 -ms-transform:translateY(100%); 172 } 173 } 174 @-o-keyframes nofocus { 175 0% { 176 opacity:1; 177 filter:alpha(opacity=100); 178 -moz-opacity:1; 179 -khtml-opacity:1; 180 transform: translateY(0%); 181 -moz-transform:translateY(0%); 182 -o-transform:translateY(0%); 183 -webkit-transform:translateY(0%); 184 } 185 100% { 186 opacity: 1; 187 transform: translateY(-100%); 188 -moz-transform:translateY(-100%); 189 -webkit-transform:translateY(-100%); 190 -o-transform:translateY(-100%); 191 } 192 } 193 @-ms-keyframes nofocus { 194 0% { 195 opacity:1; 196 filter:alpha(opacity=100); 197 -moz-opacity:1; 198 -khtml-opacity:1; 199 transform: translateY(0%); 200 -ms-transform:translateY(0%); 201 202 } 203 100% { 204 opacity: 1; 205 transform: translateY(-100%); 206 -ms-transform:translateY(-100%); 207 } 208 } 209 @-webkit-keyframes nofocus { 210 0% { 211 opacity:1; 212 filter:alpha(opacity=100); 213 -moz-opacity:1; 214 -khtml-opacity:1; 215 transform: translateY(0%); 216 -webkit-transform:translateY(0%); 217 218 } 219 100% { 220 opacity: 1; 221 transform: translateY(-100%); 222 -webkit-transform:translateY(-100%); 223 } 224 } 225 @-moz-keyframes nofocus { 226 0% { 227 opacity:1; 228 filter:alpha(opacity=100); 229 -moz-opacity:1; 230 -khtml-opacity:1; 231 transform: translateY(0%); 232 -ms-transform:translateY(0%); 233 234 } 235 100% { 236 opacity: 1; 237 transform: translateY(-100%); 238 -ms-transform:translateY(-100%); 239 } 240 }
1 // JavaScript source code 2 $(function () { 3 $("#Home_A_B").siblings(".font").find("a").html($("#Home_A_B li").eq(0).attr("title")); 4 $("#Home_A_B").siblings(".font").find("p").html($("#Home_A_B li").eq(0).attr("h")); 5 var count = $("#Home_A_B .bigImg_Box li").length; 6 var html = ""; 7 for (var i = 1; i < count + 1; i++) { 8 html += '<a href="javascript://">' + i + '</a>'; 9 } 10 $(".pic-news .tab").html(html); 11 $(".pic-news .tab").find("a").eq(0).addClass("e").siblings().removeClass("e"); 12 $(".bigImg_Box li:eq(0)").attr("class", "active"); 13 Animation.Run(); 14 15 })
1 var Animation = { 2 i: 0, 3 count: 0, 4 flag: 0, 5 Run: function () { 6 Animation.Indexfocus(); //首页焦点图 7 Animation.count = $("#Home_A_B .bigImg_Box li").length; 8 }, 9 Indexfocus: function () { 10 $(".pic-news .tab a").live("mouseover", function () { 11 var index = $(this).index(); 12 $(this).addClass("e").siblings().removeClass("e"); 13 $(".bigImg_Box li").eq(index).attr("class", "active").siblings("li").attr("class", "noactive"); 14 $("#Home_A_B").siblings(".font").find("h3 a").html($(".bigImg_Box li").eq(index).attr("title")); 15 $("#Home_A_B").siblings(".font").find("p").html($(".bigImg_Box li").eq(index).attr("h")); 16 }); 17 18 var right = setInterval(function () { Animation.Roll(); }, 4000); 19 $(".bigImg_Box li").live("mouseover", function () { 20 clearInterval(right); 21 }); 22 $(".bigImg_Box li").live("mouseleave", function () { 23 right = setInterval(function () { Animation.Roll(); }, 4000); 24 }); 25 }, 26 Roll: function () { 27 if (Animation.flag == 0) { 28 Animation.i++; 29 } 30 else { 31 Animation.i--; 32 } 33 if (Animation.i == Animation.count || Animation.i > Animation.count) { 34 Animation.i = Animation.count - 2; 35 Animation.flag = 1; 36 } 37 if (Animation.i == 0 || Animation.i < 0) { 38 Animation.i = 0; 39 Animation.flag = 0; 40 } 41 $(".pic-news .tab a").eq(Animation.i).mouseover(); 42 } 43 }
