jQuery实现腾讯网的图片切换
今天刚刚看完《锋利的jQuery》中的第四章：jQuery中的事件与动画，模拟实现了腾讯网首页中的图片切换效果，感觉代码不完美，仍有一些需要改进的地方。
首先是HTML部分：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/main.css"> <script src="js/jquery-3.2.1.min.js"></script> <script src="js/main.js"></script> </head> <body> <div class="box" id="box"> <div class="hd" id="hd"> <h2> <a href="#">视觉焦点</a> </h2> <div class="btn" id="btn"> <span class="current"></span> <span class="other"></span> <span class="other"></span> </div> </div> <div class="bd" id="bd"> <ul class="count" id="count"> <li> <a href="#"><img src="images/01.jpg"></a> <p><a href="#">无臂女孩用脚直播吃饭化妆</a></p> </li> <li> <a href="#"><img src="images/02.jpg"></a> <p><a href="#">东北富豪别墅赛皇宫</a></p> </li> <li> <a href="#"><img src="images/03.jpg"></a> <p><a href="#">四川破盗窃案 1个佛头1000斤</a></p> </li> <li> <a href="#"><img src="images/04.jpg"></a> <p><a href="#">韩国高考举行 后辈跪地磕头</a></p> </li> <li> <a href="#"><img src="images/05.jpg"></a> <p><a href="#">林青霞马伊琍24年后重聚</a></p> </li> <li> <a href="#"><img src="images/06.jpg"></a> <p><a href="#">毒舌但很会照顾人星座</a></p> </li> <li> <a href="#"><img src="images/11.jpg"></a> <p><a href="#">女童跌入热水桶幼儿园被整顿</a></p> </li> <li> <a href="#"><img src="images/12.jpg"></a> <p><a href="#">最牛房产360万买入1亿开卖</a></p> </li> <li> <a href="#"><img src="images/13.jpg"></a> <p><a href="#">应被珍视的不丹</a></p> </li> <li> <a href="#"><img src="images/14.jpg"></a> <p><a href="#">全球13大可再生能源公司</a></p> </li> <li> <a href="#"><img src="images/15.jpg"></a> <p><a href="#">世界上最危险的村庄</a></p> </li> <li> <a href="#"><img src="images/16.jpg"></a> <p><a href="#">雷克萨斯LS+撞脸长安车</a></p> </li> <li> <a href="#"><img src="images/21.jpg"></a> <p><a href="#">人生本过客 何必千千结</a></p> </li> <li> <a href="#"><img src="images/22.jpg"></a> <p><a href="#">初恋颜的正确打开方式</a></p> </li> <li> <a href="#"><img src="images/23.png"></a> <p><a href="#">养膘好过冬</a></p> </li> <li> <a href="#"><img src="images/24.jpg"></a> <p><a href="#">郑爽超市开工秒变购物狂</a></p> </li> <li> <a href="#"><img src="images/25.jpg"></a> <p><a href="#">S9或放弃面部识别</a></p> </li> <li> <a href="#"><img src="images/26.jpg"></a> <p><a href="#">潘晓婷现身机场电话聊不停</a></p> </li> </ul> <span class="left"></span> <span class="right"></span> </div> </div> </body> </html>
CSS部分：
* { margin: 0; padding: 0; } a { text-decoration: none; } ul { list-style-type: none; } .box { width: 1000px; height: 184px; border-top: 1px solid #6daaea; margin: 100px auto; } .box .hd { width: 100%; height: 31px; } .hd h2 { float: left; font-size: 14px; text-indent: 5px; margin-top: 3px; } .hd h2 a { color: #0050d0; } .hd .btn { float: right; margin-right: 10px; } .hd .btn span { display: inline-block; width: 6px; height: 6px; border-radius: 50%; cursor: pointer; } .current { background-color: blue; } .other { background-color: gray; } .box .bd { width: 1000px; height: 144px; margin-top: 9px; position: relative; overflow: hidden; } .bd .count { width: 3024px; position: absolute; left: 0; top: 0; } .bd ul li { width: 160px; float: left; padding-right: 8px; } .bd .count p { width: 100%; height: 15px; font-size: 12px; text-align: center; } .bd .count li img { width: 160px; height: 100px; } .bd .count p a{ color: black; } .bd .count p a:hover { color: red; border-bottom: 1px solid red; } .bd span { display: inline-block; width: 40px; height: 40px; cursor: pointer; position: absolute; top: 33px; } .bd .left { left: 0; background: url("../images/left.png") no-repeat; } .bd .right { right: 0; background: url("../images/right.png") no-repeat; }
jQuery部分：
$(document).ready(function(){ var page = 0; function active(num) { $("#btn").find("span").eq(num).addClass("current").removeClass("other").siblings().removeClass("current").addClass("other"); } $("#box").hover(function(){ $("#bd span").css("background-color", "rgba(0,0,0,.6"); },function(){ $("#bd span").css("background-color", ""); }); $("#bd .right").click(function(){ if(!$("#count").is(":animated")) { if(parseInt($("#count").css("left"))<=-2016) { $("#count").animate({left: "0"},function(){active(page)}); page = 0; } else { $("#count").animate({left: "-=1008px"},function(){active(page)}); page++; } } }); $("#bd .left").click(function(){ if(!$("#count").is(":animated")) { if (parseInt($("#count").css("left")) >= 0) { $("#count").animate({left: "-2016px"},function(){active(page)}); page = 2; } else { $("#count").animate({left: "+=1008px"},function(){active(page)}); page--; } } }); function sport(i) { $("#btn").find("span").eq(i).click(function(){ $("#count").animate({left: i*(-1008)+"px"},function(){active(i)}); }); } sport(0); sport(1); sport(2); // $("#btn").find("span").eq(0).click(function(){ // $("#count").animate({left: 0},function(){ // $("#btn").find("span").eq(0).addClass("current").removeClass("other").siblings().removeClass("current").addClass("other"); // }); // }); // // $("#btn").find("span").eq(1).click(function(){ // $("#count").animate({left: "-1008px"},function(){ // $("#btn").find("span").eq(1).addClass("current").removeClass("other").siblings().removeClass("current").addClass("other"); // }); // }); // // $("#btn").find("span").eq(2).click(function(){ // $("#count").animate({left: "-2016px"},function(){ // $("#btn").find("span").eq(2).addClass("current").removeClass("other").siblings().removeClass("current").addClass("other"); // }); // }); });
几乎完全实现了所要的功能，但是还有改进的地方。代码缺少注释，以后得养成习惯。