<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Crow_百叶窗</title>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
(function($) {
$.fn.extend( {
"baiye" : function(options) {
options = $.extend( {
z_index : 1000,
width : 1084
}, options);
$(this).css("position", "relative");// 设置为相对定位
var allWidth = parseInt($(this).css("width")); //外层宽度
var divChild = $(this).children(); //子元素设置为绝对定位
divChild.css("position", "absolute");
var n = divChild.length;// 获取总数量
var imgSee = divChild.find("img").next();
var widthSee = imgSee.width(); //'按钮'宽度
var bai_current = 0; // 当前索引
divChild.each(function(e) {
divChild.eq(e).css( {
"z-index" : options.z_index - e * 10,
"right" : widthSee * (n - e - 1),
"position" : "absolute",
"width" : options.width
});
});
imgSee.each(function(e) {
$(this).click(function() {
if (bai_current < e) {
for ( var i = bai_current; i < e; i++) {
divChild.eq(i).animate( {
"right" : allWidth - (i + 1) * widthSee
}, 600);
bai_current = e;
}
} else {
for ( var i = bai_current; i > e; i--) {
divChild.eq(i - 1).animate( {
"right" : (n - i) * widthSee
}, 600);
bai_current = e;
}
}
});
});
}
});
})(jQuery)
$(function() {
$("#bai_main_div").baiye();
})
</script>
<style type="text/css">
#bai_main_div {
margin:0 auto;
background:#000;
width:1000px;
height:526px;
overflow:hidden;
}
.bai_btn {
cursor:pointer;
/*设置透明度*/
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
/*设置开始透明度和结束透明度（滤镜）*/
filter:Alpha(Opacity="75", FinishOpacity="0", Style="2")
}
</style>
</head>
<body>
<div id="bai_main_div">
<div><img src="suoai.jpg" alt="点击查看更多"/><img class="bai_btn" src="suoai_title.jpg" /></div>
<div><img src="suoai.jpg" alt="点击查看更多"/><img class="bai_btn" src="suoai_title.jpg" /></div>
<div><img src="suoai.jpg" alt="点击查看更多"/><img class="bai_btn" src="suoai_title.jpg" /></div>
<div><img src="suoai.jpg" alt="点击查看更多"/><img class="bai_btn" src="suoai_title.jpg" /></div>
<div><img src="suoai.jpg" alt="点击查看更多"/><img class="bai_btn" src="suoai_title.jpg" /></div>
<div><img src="suoai.jpg" alt="点击查看更多"/><img class="bai_btn" src="suoai_title.jpg" /></div>
</div>
</body>
</html>
View Code
