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>

 

posted @ 2016-12-11 21:09  fighting_liu  阅读(124)  评论(0)    收藏  举报