jquery 相册展示，带点击，带小图展示
浏览数：25 /
时间：2015年06月09日
开年没事做，公司的业务都在商谈中，就趁着时间学习了一下javascript面向对象编程。纯粹练手，大神勿吐槽，欢迎交流
大致的样子是：
里面的图片是在懒人图库下载的一个demo，没看懂里面写的
代码，就按着效果自己尝试写了一下。
代码如下：
<!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>
<title></title>
<script src="js/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
*{ margin:0px; padding:0px;}
img{ border:0px;}
.home
{
width:720px;
height:420px;
margin:0 auto;
position:relative;
overflow:hidden;
}
.home_01
{
width:720px;
height:360px;
overflow:hidden;
}
.home_01_pic
{
width:2880px;
height:360px;
position:absolute;
top:0px;
left:0px;
}
.home_01_pic ul li
{
width:720px;
height:360px;
display:inline;
float:left;
}
.home_01_pic ul li a img
{
width:720px;
height:360px;
}
.home_02
{
width:720px; height:50px;
margin-top:10px;
}
.home_left
{
width:30px;
height:50px;
background:url(images/all.png) -180px -40px no-repeat;
float:left;
cursor:pointer;
}
.home_right
{
width:30px;
height:50px;
background:url(images/all.png) -210px -40px no-repeat;
float:right;
cursor:pointer;
}
.s_Pic
{
width:660px;
height:50px;
float:left;
}
.s_Pic ul li
{
width:163px;
height:50px;
float:left;
display:inline;
text-align:center;
}
.s_Pic ul li a img
{
width:130px;
height:48px;
float:left;
display:inline;
margin-left:15px;
border:1px solid gray;
}
.on
{
border:1px solid red !important;
}
</style>
</head>
<body>
<div class="home">
<div class="home_01">
<div class="home_01_pic">
<ul class="home_ul">
<li><a href="#"><img src="images/1.jpg" /></a></li>
<li><a href="#"><img src="images/2.jpg" /></a></li>
<li><a href="#"><img src="images/3.jpg" /></a></li>
<li><a href="#"><img src="images/4.jpg" /></a></li>
</ul>
</div>
</div>
<div class="home_02">
<div class="home_left"></div>
<div class="s_Pic">
<ul class="smallPic">
<li><a href="#"><img src="images/s1.jpg" class="simg"/></a></li>
<li><a href="#"><img src="images/s2.jpg" class="simg"/></a></li>
<li><a href="#"><img src="images/s3.jpg" class="simg"/></a></li>
<li><a href="#"><img src="images/s4.jpg" class="simg"/></a></li>
</ul>
</div>
<div class="home_right"></div>
</div>
</div>
<script type="text/javascript">
$(function () {
$.fn.scroll = function (options) {
var o = $.extend({}, options || {});
var home_pic = $(o.bigPic),
small_Pic = $(o.smallPic),
leftBtn = $(o.left_btn),
rightBtn = $(o.right_btn);
var Index = 0, timer = null;
//大图片移动函数
var move = function (Index) {
home_pic.stop().animate({ left: -(Index * 720) + "px" }, 1500, function () {
smallPicHide();
smallPicShow(Index);
});
};
//初始化函数
var init = function () {
home_pic.hover(function () {
clearInterval(timer);
}, function () {
start();
}).trigger("mouseleave");
};
//开始滚动
var start = function () {
timer = setInterval(function () {
move(Index);
Index++;
if (Index > 3) {
Index = 0;
}
}, 3000);
}
//小图片显示边框
var smallPicShow = function (Index) {
small_Pic.children("li").eq(Index).find(".simg").addClass("on");
}
//小图片隐藏边框
var smallPicHide = function () {
small_Pic.children("li").find(".simg").removeClass("on");
};
//初始化
init();
//点击向左事件
leftBtn.click(function () {
if (Index == 0) {
Index = 4;
}
clearInterval(timer);
move(--Index);
start();
});
//点击向右事件
rightBtn.click(function () {
if (Index == 3) {
Index = 0;
}
clearInterval(timer);
move(++Index);
start();
});
};
//页面加载
$(window).load(function () {
$(".home").scroll({
bigPic: ".home_01_pic",
smallPic: ".smallPic",
left_btn: ".home_left",
right_btn: ".home_right"
});
});
});
</script>
</body>
</html>
效果在IE6/7/8/9 chrome/firefox/遨游浏览器（极速模式、兼容模式）下测试过，都是可以的。但是图片过渡有点生硬，希望大神能指点一下。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
