jQuery初体验—实现左右切换图片
前言
众所周知，jQuery是目前使用最广泛的javascript函数库。所以了解并学习是非常重要的，在javascript的学习过程中需要大量代码才能实现的效果，使用jQuery会使得一切简单很多，和CSS结合可以实现很多炫酷的页面效果，写得少，做得多不就是每个程序员所追求的吗？
jQuery相对原生JS是比较简单的，javascript语言的基本知识，就能看懂它，也能够很好的应用。目前，jQuery实现的功能如下：
一、选择网页元素
二、改变结果集
三、链式操作
四、元素的操作：取值和赋值
五、元素的操作：移动
六、元素的操作：复制、删除和创建
七、工具方法
八、事件操作
九、特殊效果
具体实例
由于之前DOM初体验中实现了一个小图和大图的切换，因此想通过jQuery也实现一个和其对比，看看效果如何。
效果展示图如下：
代码如下，CSS部分未给出。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery之图片左右切换动画</title>
<link rel="stylesheet" href="左右切换.css">
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="box">
<div id="test_box">
<h3 class="title">jquery实现左右图片切换</h3>
<div class="small">
<a href="#0"><img class="current" src="./images/炊烟.jpg" width="128px" alt="水天一线" /></a>
<a href="#1"><img src="./images/水天一线.jpg" width="128px" alt="水天一线" /></a>
<a href="#2"><img src="./images/窗外人生.jpg" width="128px" alt="水天一线" /></a>
<a href="#3"><img src="./images/路3.jpg" width="128px" alt="水天一线" /></a>
<a href="#4"><img src="./images/水天一线.jpg" width="128px" alt="水天一线" /></a>
</div>
<div class="chg_box">
<ul class="in_area" id="chg_area">
<li><img src="./images/炊烟.jpg" width="512px" alt="水天一线" /></li>
<li><img src="./images/水天一线.jpg" width="512px" alt="水天一线" /></li>
<li><img src="./images/窗外人生.jpg" width="512px" alt="水天一线" /></li>
<li><img src="./images/路3.jpg" width="512px" alt="水天一线" /></li>
<li><img src="./images/水天一线.jpg" width="512px" alt="水天一线" /></li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".small").find("img").click(function(){
$(".small").find("img").not($(this)).removeClass("current");
$(this).addClass("current");
$(this).parent().blur();
var picNum = parseInt($(this).parent().attr("href").slice(1));
var movePos = ($('#chg_area li').width()*(-picNum));
$("#chg_area").animate({left:movePos},500);
});
});
</script>
</body>
</html>其实现过程主要是通过CSS设置指定宽度后，导致大图片溢出，再通过js控制绝对定位层的移动，就可以实现图片左右切换的效果了。
对比与总结
与之前的对比发现，使用jQuery可以更方便地实现特殊效果，同时逻辑特别简单，易于理解。 除此以外，对于CSS的合理使用可以大大简化JS的控制，这是需要特别注意的。
