لقد قمت بالإختيار الدي عجبني وقمت بتعديل عليه ورفعته في موقعي في هذه الصفحة يضهر :
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
مساعددة في عمل إعلان مثال في الداخل
