لقد قمت بالإختيار الدي عجبني وقمت بتعديل عليه ورفعته في موقعي في هذه الصفحة يضهر :
http://www.guide4arab.com/index1.html
أخدت كود التالي :
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-**="Content-Type" content="text/html;charset=UTF-8" />
<title>Make A Beautiful Carousel with carouFredSel and UI Kit from Design Deck</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">var post='http://favbulous.com/post/586/make-a-beautiful-carousel-with-caroufredsel-and-ui-kit-from-design-deck';</script>
<script type="text/javascript" language="javascript" src="jquery.carouFredSel-5.2.3-packed.js"></script>
<script type="text/javascript" language="javascript">
$(function() {
$('#carousel ul').carouFredSel({
prev: '#prev',
next: '#next',
pagination: "#pager",
auto: true,
scroll: 1000,
pauseOnHover: true
});
});
</script>
<style type="text/css" media="all">
.wrapper {
width: 750px;
margin: 40px auto;
text-align:center;
}
#carousel {
margin: 0 0 30px 0;
width: 735px;
position:relative;
}
#carousel ul {
margin: 0;
padding: 0;
list-style: none;
display: block;
}
#carousel li {
font-size: 40px;
color: #999;
text-align: center;
width: 232px;
height: 178px;
padding: 0;
margin: 6px;
display: block;
float: left;
background: transparent url('images1/carousel_polaroid.png') no-repeat 0 0;
position:relative;
}
#carousel li img {
width:201px;
height:127px;
margin-top:14px;
}
#carousel li a {
width:201px;
height:127px;
position:absolute;
display:block;
z-index:2;
top:14px;
left:16px;
background: transparent url('images1/carousel_shine.png') no-repeat 0 0;
text-indent:-999em;
}
.clearfix {
float: none;
clear: both;
}
#carousel .prev, #carousel .next {
margin-left: 10px;
width:15px;
height:21px;
display:block;
text-indent:-999em;
background: transparent url('images1/carousel_control.png') no-repeat 0 0;
position:absolute;
top:70px;
}
#carousel .prev {
background-position:0 0;
left:-30px;
}
#carousel .prev:hover {
left:-31px;
}
#carousel .next {
background-position: -18px 0;
right:-20px;
}
#carousel .next:hover {
right:-21px;
}
#carousel .pager {
margin:0 auto;
text-align: center;
}
#carousel .pager a {
margin: 0 5px 0 0;
text-decoration: none;
display:inline-block;
width:8px;
height:8px;
background: transparent url('images1/carousel_control.png') no-repeat -2px -32px;
text-indent:-999em;
}
#carousel .pager a.selected {
text-decoration: underline;
background: transparent url('images1/carousel_control.png') no-repeat -12px -32px;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="carousel">
<ul>
<li><img src="images1/image1.jpg" alt="" /><a href="">Image1</a></li>
<li><img src="images1/image2.jpg" alt="" /><a href="">Image2</a></li>
<li><img src="images1/image3.jpg" alt="" /><a href="">Image3</a></li>
<li><img src="images1/image1.jpg" alt="" /><a href="">Image1</a></li>
<li><img src="images1/image2.jpg" alt="" /><a href="">Image2</a></li>
<li><img src="images1/image3.jpg" alt="" /><a href="">Image3</a></li>
</ul>
<div class="clearfix"></div>
<a id="prev" class="prev" href="#"><</a>
<a id="next" class="next" href="#">></a>
<div id="pager" class="pager"></div>
</div>
</div>
</body>
</html>
لكن لم أعرف أين أضعه مع العلم وضعته كإعلان أدسنس ولم يشتغل جيدا ظهرت فقط الصور
المرجو مساعدتي وشكرااا
هذا هو رابط المنتدى
www.guide4arab.com