اريد معرفة شيء بخصوص هذا الكود !

3 مشترك

اذهب الى الأسفل

اريد معرفة شيء بخصوص هذا الكود !  Empty اريد معرفة شيء بخصوص هذا الكود !

مُساهمة من طرف ليث جيوسي الثلاثاء 11 ديسمبر 2012 - 15:48

انا اريد معرفة كيف اتحكم بسرعة تنقل الصور وهذا هو الكود !




الكود:

<!-- �������� jquery ����� ��� -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".paging").show();
$(".paging a:first").addClass("active");
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;
$(".image_reel").css({'width' : imageReelWidth});
rotate = function(){
    var triggerID = $active.attr("rel") - 1;
    var image_reelPosition = triggerID * imageWidth;
    $(".paging a").removeClass('active');
    $active.addClass('active');
    $(".image_reel").animate({
        left: -image_reelPosition
    }, 500 );
};
rotateSwitch = function(){
    play = setInterval(function(){
        $active = $('.paging a.active').next();
        if ( $active.length === 0) {
            $active = $('.paging a:first');
        }
        rotate();
    }, 4000); //��� ���� ����� ��� ������� �������� 4 �����
};
rotateSwitch();

$(".image_reel a").hover(function() {
    clearInterval(play);
}, function() {
    rotateSwitch();
}); 
$(".paging a").click(function() {
    $active = $(this);
    clearInterval(play);
    rotate();
    rotateSwitch();
    return false;
});
});
</script>

<!-- �������� jquery �����  ��� -->
<!-- �������� style ����� ����� -->
<style type="text/css">
*{outline: none;}
img {border: 0;}
.container {
    width: 790px;
    padding: 0;
    margin: 0 auto;
}
.folio_block {
    position: absolute;
    left: 50%; top: 50%;
    margin: -140px 0 0 -395px;
}
.main_view {
    float: left;
    position: relative;
}
.window {
/*--������� ���� �����--*/
    height:250px;    width: 600px;
/*--����� ������� ���� �����--*/
    overflow: hidden;
    position: relative;
}
.image_reel {
    position: absolute;
    top: 0; left: 0;
}
.image_reel img {float: left;}
.paging {
    position: absolute;
    bottom: 40px; right: -7px;
    width: 178px; height:47px;
    z-index: 100;
    text-align: center;
    line-height: 40px;
    background: url(http://i47.servimg.com/u/f47/15/47/68/39/bg10.png) no-repeat;
    display: none;
    }
.paging a {
    padding: 5px;
    text-decoration: none;
    color: #fff;
}
.paging a.active {
    font-weight: bold;
    background: #920000;
    border: 1px solid #610000;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}
</style>

<!-- �������� style ����� ��� -->

</head>

<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0">

<!--�����  ����� ����� -->

<div style="position: absolute; width: 221px; height: 100px; z-index: 103; left: 304px; top: 184px" id="a" align="center">
    <div class="main_view">
        <div class="window">
            <div class="image_reel" style="position: absolute; left: 1px; top: 31px; height:966px" id="c">
                <a href="http://jayyousi.alafdal.net/h3-page">


                <img src="http://www.loverfog.net/images/3.png" alt="" width="600" height="221" /></a>
                <a href="http://jayyousi.alafdal.net/h3-page/">

                <img src="http://www10.0zz0.com/2012/12/10/13/195518464.png" alt="" width="600" height="221" /></a>
                <a href="https://www.facebook.com/laithjayyosi">
                <img src="http://www6.0zz0.com/2012/12/10/13/646030898.png" alt="" width="600" height="221" /></a>
                <a href="http://www.facebook.com/laithjayyosi/">
                <img

src="http://www9.0zz0.com/2012/12/10/13/132265557.jpg" alt="" width="600" height="221" /></a>
 <a href="http://www.facebook.com/laithjayyosi/"></div>
        </div>



        <div class="paging" style="position: absolute; left: 422px; bottom: 204px" id="b">
            <a href="#" rel="1">1</a> <a href="#" rel="2">2</a>
  <a href="#" rel="3">3</a> <a href="#" rel="4">4</a>
        </div>
    </div>



وهذه معاينة للكود !!
http://jayyousi.alafdal.net/page_html?mode=preview
Cool Cool Cool
ليث جيوسي
ليث جيوسي
 
 

ذكر
عدد المساهمات : 2218
معدل النشاط : 8114
السُمعة : 0

https://www.facebook.com/laithjayyosi

الرجوع الى أعلى الصفحة اذهب الى الأسفل

اريد معرفة شيء بخصوص هذا الكود !  Empty رد: اريد معرفة شيء بخصوص هذا الكود !

مُساهمة من طرف ليث جيوسي الثلاثاء 11 ديسمبر 2012 - 15:50

عفوا !!
هذا كود المعاينة وليس السابق ! Cool
http://jayyousi.alafdal.net/h2-page
ليث جيوسي
ليث جيوسي
 
 

ذكر
عدد المساهمات : 2218
معدل النشاط : 8114
السُمعة : 0

https://www.facebook.com/laithjayyosi

الرجوع الى أعلى الصفحة اذهب الى الأسفل

اريد معرفة شيء بخصوص هذا الكود !  Empty رد: اريد معرفة شيء بخصوص هذا الكود !

مُساهمة من طرف Bo Mazen الثلاثاء 11 ديسمبر 2012 - 20:31

شوف اخي في الجزء الخاص بالجافاسكربت في رقم وحيد هو 500

اذا قللته مثلا الى 200 كان اسرع
واذا خليته 800 مثلا كان ابطء
طبعا تقدر تجرب اي رقم

اما تحته بشوي بالجافاسكربت في رقم 4000 هذا للتحكم بالتحريق التلقائي اذا قللت الرقم تحرك اسرع

جرب غير هذا الرقمين وبالتوفيق Cool
Bo Mazen
Bo Mazen
 
 

ذكر
عدد المساهمات : 781
معدل النشاط : 6346
السُمعة : 9

http://www.7ooof.net/f12-montada

الرجوع الى أعلى الصفحة اذهب الى الأسفل

اريد معرفة شيء بخصوص هذا الكود !  Empty رد: اريد معرفة شيء بخصوص هذا الكود !

مُساهمة من طرف ليث جيوسي الخميس 13 ديسمبر 2012 - 15:38

شكرا لك اخي العزيز Cool
ليث جيوسي
ليث جيوسي
 
 

ذكر
عدد المساهمات : 2218
معدل النشاط : 8114
السُمعة : 0

https://www.facebook.com/laithjayyosi

الرجوع الى أعلى الصفحة اذهب الى الأسفل

كاتب هذه المساهمة مطرود حالياً من المنتدى - معاينة المساهمة

الرجوع الى أعلى الصفحة

- مواضيع مماثلة

 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى