jquery 点击切换图片

 

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}
body {
    text-align: center;
    font-family: Arial, Verdana, Sans-serif;
    font-size: 12px;
    padding: 30px 0;    
}
body,a {
    color: #333;
}
#wrapper {
    width: 280px;
    margin: 0 auto;
}
#imageContainer {
    width: 280px;
    height: 280px;
    position: relative;
    overflow: hidden;
    background: #eee;
}
#imageContainer img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
#imageContainer img.active {
    z-index: 3;
}
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
var imageObject = {
    clickSwap : function(obj) {
        obj.click(function() {
            var activeImage = $(this).children('img.active');
            activeImage.removeClass('active');
            if (activeImage.next().length > 0) {
                activeImage.next().addClass('active');
            } else {
                $(this).children('img:first-child').addClass('active');
            }
            return false;
        });
    }
};
$(function() {
    imageObject.clickSwap($('#imageContainer'));
});
</script>
</head>

<body>


<div id="wrapper">
    
    <div id="imageContainer">
        <img src="http://img1.gtimg.com/visual_page/e2/11/22013.jpg" class="active" alt="01" width="280" height="280" />
        <img src="http://img1.gtimg.com/visual_page/83/a6/22068.jpg" alt="02" width="280" height="280" />
        <img src="http://img1.gtimg.com/visual_page/63/c2/22058.jpg" alt="03" width="280" height="280" />
    </div>
    
</div>


</body>
</html>

 

 

 

 

 

 

posted @ 2014-01-08 09:36  赵小磊  阅读(654)  评论(0)    收藏  举报
回到头部