jquery 앨범 전시, 클릭, 작은 그림 전시 (2) 수정 편
53445 단어 jquery
구체 적 으로 추 가 된 내용 은 여러 가지 효 과 를 추가 하여 사용자 가 왼쪽으로 굴 러 갈 지 오른쪽으로 굴 러 갈 지 선택 할 수 있 도록 하 는 것 입 니 다. 물론 다른 효과 도 추가 할 수 있 습 니 다.하지만 아직 실현 되 지 않 았 다.다만 지금 만 든 것 을 올 리 고 나중에 수정 해서 에 세 이 를 한 편 더 쓰 면 된다.
<!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 !important;
position:absolute;
top:0px;
left:0px;
z-index:9999;
}
.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;
padding-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 style=" height:360px; width:720px;"></div>
<div class="home_01">
<div class="home_01_pic">
<ul class="home_ul">
<li><a href="#"><img src="images/1.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/2.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/3.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/4.jpg" alt="" /></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" alt="" class="simg"/></a></li>
<li><a href="#"><img src="images/s2.jpg" alt="" class="simg"/></a></li>
<li><a href="#"><img src="images/s3.jpg" alt="" class="simg"/></a></li>
<li><a href="#"><img src="images/s4.jpg" alt="" class="simg"/></a></li>
</ul>
</div>
<div class="home_right"></div>
</div>
</div>
<script type="text/javascript">
$(function () {
$.fn.scroll = function (options) {
$.fn.scroll.options = {
effect: "left", //left: top leftMarquee
delayTime: 500,//
cellWidth:720,//
cellHeitht:360,//
speed:3000 //
};
var o = $.extend({}, $.fn.scroll.options, 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) {
switch (o.effect) {
case "left":
leftMove(Index);
break;
case "top":
topMove(Index);
break;
}
};
//
var leftMove = function (Index) {
home_pic.stop().animate({ left: -(Index * o.cellWidth) + "px" }, o.delayTime, function () {
smallPicHide();
smallPicShow(Index);
});
};
//
var topMove = function (Index) {
home_pic.css("width", "720px").css("height", "1440px");
home_pic.stop().animate({ top: -(Index * o.cellHeitht) + "px" }, o.delayTime, 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;
}
}, o.speed);
}
//
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 = -1;
}
clearInterval(timer);
move(++Index);
start();
});
};
//
$(window).load(function () {
$(".home").scroll({
bigPic: ".home_01_pic",
smallPic: ".smallPic",
left_btn: ".home_left",
right_btn: ".home_right",
effect:"left",
delayTime:500
});
});
});
</script>
</body>
</html>, 코드 를 직접 올 리 면 효과 도 는 올 라 가지 않 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
jQuery 전후 예이 기사에서는 jquery after() 및 before() 메소드의 예를 볼 것입니다. before() 메서드는 선택한 요소 앞에 지정된 콘텐츠를 삽입합니다. after() 메서드는 선택한 요소 뒤에 지정된 콘텐츠...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
