返回首页
当前位置: 主页 > 网络编程 > Jsp实例教程 >

jQuery简易的相册滚动效果及源代码

时间:2012-06-04 10:53来源:知行网www.zhixing123.cn 编辑:麦田守望者

<!DOCTYPE HTML>
<html lang=”en-US”>
<head>
<meta charset=”UTF-8″>
<title></title>
<style type=”text/css”>
* { padding:0; margin:0; }
ul,li {list-style:none; }
#swing-wrapper { width:580px; margin:20px auto; border:2px solid #080; padding:10px; }
#swing-thumb { width:580px; overflow:hidden; position:relative; }
#swing-thumb ul { overflow:hidden; position:relative;}
#swing-thumb li { float:left; cursor:pointer; padding-right:50px; }
#swing-big { position:relative; width:580px; height:360px; margin-bottom:12px;}
#disc { height:28px; line-height:28px; font-size:14px; width:100%; text-align:center; position:absolute; left:0; bottom:0; background:#fff; color#333; opacity:0.6; }
.cursorL { cursor:url(http://img1.cache.netease.com/cnews/img/gallery11/bg11.cur), auto; }
.cursorR { cursor:url(http://img1.cache.netease.com/cnews/img/gallery11/bg12.cur), auto; }
</style>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”></script>
<script type=”text/javascript”>
window.onload = function(){
//
var oUl = $(“#swing-thumb”).find(“ul”);
var oLi = oUl.find(“li”);
var sWidth = oLi.eq(0).outerWidth();
var bWidth = $(“#swing-big”).width() / 2;
var len = oLi.length;
var oUrl = “”;
var iNow = 0;
var timer = null;
oUl.css(“width”, sWidth * len + “px”);
//自动
clearInterval(timer);
timer = setInterval(auto,3000);
//
function auto(){
iNow++;
if(iNow==len){
iNow=0;
};
cut();
};
//点击小图切换大图
oLi.bind(“click”, function () {
iNow = $(this).index();
cut();
});
//切换方法
function cut() {
oUrl = $(“#swing-big”).find(“img”).attr(“src”);
if (oUrl == oLi.eq(iNow).attr(“data-src”)) {
return false;
} else {
$(“#disc”).text(oLi.eq(iNow).attr(“title”)).hide();
$(“#swing-big”).find(“img”).attr(“src”, oLi.eq(iNow).attr(“data-src”)).end().hide();
$(“#swing-big”).fadeIn(“slow”, function () {
$(“#disc”).slideDown();
});
}
if (iNow == 0) {
oUl.animate({
“marginLeft”: 0
});
} else if (iNow == len – 1) {
oUl.animate({
“marginLeft”: (2 – iNow) * sWidth + “px”
});
} else {
oUl.animate({
“marginLeft”: (1 – iNow) * sWidth + “px”
});
}
};
//
$(“#swing-big”).bind(“mousemove”, function (e) {
var e = $.event.fix(e);
clearInterval(timer);
var disX = e.pageX – $(this).offset().left;
if (disX < bWidth) {
$(this).removeClass(“cursorR”).addClass(“cursorL”).attr(“title”, “点击可切换图片”);
} else {
$(this).removeClass(“cursorL”).addClass(“cursorR”).attr(“title”, “点击可切换图片”);
}
});
$(“#swing-big”).bind(“mouseout”, function (e) {
timer = setInterval(auto,3000);
});
//
$(“#swing-big”).click(function (e) {
var e = $.event.fix(e);
var disX = e.pageX – $(this).offset().left;
if (disX < bWidth) {
iNow–;
if (iNow == -1) {
iNow = len – 1;
}
cut();
} else {
iNow++;
if (iNow == len) {
iNow = 0;
}
cut();
}
});
};
</script>
</head>
<body>
<div id=”swing-wrapper”>
<div id=”swing-big”>
<img src=”http://www.xh-css.cn/wp-content/uploads/2012/05/f1.jpg” alt=”" />
<p id=”disc”>床前明月光</p>
</div>
<div id=”swing-thumb”>
<ul>
<li data-src=”http://www.xh-css.cn/wp-content/uploads/2012/05/f1.jpg” title=”床前明月光” ><img src=”http://www.xh-css.cn/wp-content/uploads/2012/05/f1.jpg” width=”160″ alt=”" /></li>
<li data-src=”http://www.xh-css.cn/wp-content/uploads/2012/05/f2.jpg” title=”疑是地上霜” ><img src=”http://www.xh-css.cn/wp-content/uploads/2012/05/f2.jpg” width=”160″ alt=”" /></li>
<li data-src=”http://www.xh-css.cn/wp-content/uploads/2012/05/f3.jpg” title=”举头望明月” ><img src=”http://www.xh-css.cn/wp-content/uploads/2012/05/f3.jpg” width=”160″ alt=”" /></li>
<li data-src=”http://www.xh-css.cn/wp-content/uploads/2012/05/f4.jpg” title=”低头思故乡” ><img src=”http://www.xh-css.cn/wp-content/uploads/2012/05/f4.jpg” width=”160″ alt=”" /></li>
<li data-src=”http://www.xh-css.cn/wp-content/uploads/2012/05/f5.jpg” title=”日照香炉生紫烟” ><img src=”http://www.xh-css.cn/wp-content/uploads/2012/05/f5.jpg” width=”160″ alt=”" /></li>
<li data-src=”http://www.xh-css.cn/wp-content/uploads/2012/05/f6.jpg” title=”要看瀑布挂前川” ><img src=”http://www.xh-css.cn/wp-content/uploads/2012/05/f6.jpg” width=”160″ alt=”" /></li>
<li data-src=”http://www.xh-css.cn/wp-content/uploads/2012/05/f7.jpg” title=”飞流直下三千尺” ><img src=”http://www.xh-css.cn/wp-content/uploads/2012/05/f7.jpg” width=”160″ alt=”" /></li>
</ul>
</div>
</div>
</body>
</html>

顶一下
(1)
100%
踩一下
(0)
0%
标签(Tag):jQuery jquery教程 jquery技巧
------分隔线----------------------------
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码:点击我更换图片