jQuery之焦点图转换
之前写过一个超级简单的焦点图，现在换一种思路开始添加一些新东西。
新思路：让盒子动（所以首先布局要清晰。给四张图套两个盒子，里层盒子大小等于四张图片横向排布，外层盒子等于一张图片的大小，并overflow：hidden。这样就可以只显示我们看到的一张图，并且用动画实现图片来回转换）。a标签href不写图片路径。a标签之间不加数字，通过索引值index()来找到。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>焦点图转换</title>
<link rel="stylesheet" href="css/reset.css">
<style type="text/css">
.pic-show{width: 480px;overflow: hidden;}
.pic{width: 1920px;height: 320px;position: relative;}
img{display: block;float: left;}
ul{width: 120px;height: 18px;position: absolute;top: 280px;left: 185px;}
li{float: left;width: 20px;height: 18px;margin-left: 5px;}
a{display: block;width: 20px;height: 18px;text-decoration: none;border: 1px solid #ccc;border-radius: 50%;background-color: #ccc;opacity: 0.6;}
.aHover{background-color: #3b216a;}
.aCss{background-color: #094a99;}
</style>
</head>
<body>
<div class="pic-show">
<div class="pic">
<img src="images/1.jpg" alt="">
<img src="images/2.jpg" alt="">
<img src="images/3.jpg" alt="">
<img src="images/4.jpg" alt="">
</div>
<ul>
<li><a class="aCss" href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</div>
<script src="js/jquery-3.0.0.js"></script>
<script type="text/javascript">
$("ul li a").click(function(event){
var num=$(this).parent().index();//获取索引值
var mlNum=num * -480+'px';//字符串链接
//$(".pic").css("margin-left",mlNum)
$(".pic").animate({"margin-left":mlNum},500)//动画
//$(this).css("background-color","#494a93").parent().siblings().find("a").css("background-color","#ccc");//链式操作
$(this).addClass("aCss").parent().siblings().find("a").removeClass("aCss");//addClass
event.preventDefault();
})
$("ul li a").hover(function(){
$(this).addClass("aHover")
},function(){
$(this).removeClass("aHover")
})
</script>
</body>
</html>
