3
나는 아이템을 삭제할 수있는 캐 러셀을 만들고 캐롤라이나에있는 아이템 중 하나와 작업 할 수있게 만들었지 만 다음 항목들에 대해서는 아무런 아이디어가 없다고 생각하지 않습니까?carouFredSel에서 항목을 제거하는 방법은 무엇입니까?
자바 스크립트
$(document).ready(function() {
$("#carousel").carouFredSel({
width : 675,
height : 130,
align : "left",
auto : {
pauseOnHover : true
},
items : {
visible:5
},
scroll : {
items : 1
},
prev : {
button : "#carPrev",
key : "left"
},
next : {
button : "#carNext",
key : "right"
}
}).find("#delButton").click(function(){
$("#rvBox").animate({
opacity : 0
}, 500).animate({
width : 0,
margin : 0,
borderWidth : 0
}, 500, function(){
$("#carousel").trigger("removeItem", $("#rvBox"));
});
});
});
HTML
<body>
<div id="container">
<header>
<h1>Recently Viewed Items Carousel</h1>
</header>
<div id="rViewed">
<div id="carousel">
<div id="rvBox" class="rvBox">
<a class="delete" id="delButton" href="#"></a>
<img src="img/img1.jpg" />
</div>
<div id="rvBox" class="rvBox">
<a class="delete" id="delButton" href="#"></a>
<img src="img/img2.jpg" />
</div>
<div class="rvBox">
<a class="delete" id="delButton" href="#"></a>
<img src="img/img3.jpg" />
</div>
<div class="rvBox">
<a class="delete" id="delButton" href="#"></a>
<img src="img/img4.jpg" />
</div>
<div class="rvBox">
<a class="delete" id="delButton" href="#"></a>
<img src="img/img5.jpg" />
</div>
<div class="rvBox">
<a class="delete" id="delButton" href="#"></a>
<img src="img/img6.jpg" />
</div>
<div class="rvBox">
<a class="delete" id="delButton" href="#"></a>
<img src="img/img7.jpg" />
</div>
<div class="rvBox">
<a class="delete" id="delButton" href="#"></a>
<img src="img/img8.jpg" />
</div>
</div>
<a class="prev" id="carPrev" href="#"></a>
<a class="next" id="carNext" href="#"></a>
</div>
</div>
</body>
나는 DIV에서 찾는) (.find 사용하던 내가 무엇을 변경하여이 작업을 얻을 것 같았다
body {
}
h1 {
font-family: Arial, Verdana, sans-serif;
font-size: 20px;
text-align: center;
}
/*DIV's*/
#container {
position:relative;
width:974px;
margin:auto;
background:#fff9b6;
}
#rViewed {
position:relative;
width:974px;
height:140px;
background:#ffffff;
padding: 15px 0 15px 0;
}
#carousel {
width:800px;
margin:0 0 0 40px;
}
.rvBox {
position:relative;
display:block;
float:left;
margin: 0 15px 0 0;
width:120px;
height:120px;
border:1px solid #dedede;
text-align:center;
background:url(../img/grad-x.jpg) repeat-x;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 3px 3px 3px #888;
-webkit-box-shadow: 3px 3px 3px #888;
box-shadow: 3px 3px 3px #888;
}
.rvBox img {
margin-top:10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
a.prev {
background:url(../img/left.png) no-repeat;
width: 31px;
height: 31px;
display:block;
position:absolute;
top:60px;
}
a.prev:hover {
background:url(../img/left_hover.png) no-repeat;
}
a.next {
background:url(../img/right.png) no-repeat;
width: 31px;
height: 31px;
display:block;
position:absolute;
top:60px;
right:220px;
}
a.next:hover {
background:url(../img/right_hover.png) no-repeat;
}
a.delete {
background:url(../img/delete.png) no-repeat;
width: 21px;
height: 21px;
display: block;
position:absolute;
top:3px;
right:3px;
}
a.delete:hover {
background:url(../img/delete_hover.png) no-repeat;
}