كيف يمكنني فعل هذا؟

2 مشترك

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

كيف يمكنني فعل هذا؟ Empty كيف يمكنني فعل هذا؟

مُساهمة من طرف فيروسان الجمعة 15 ديسمبر 2017 - 17:27

السَّــلامُ عليـكُم و رحمة الله و بركاته
سؤال: كيفَ يُمكنني فعل هذا كما في الصورة تماماً
كيف يمكنني فعل هذا؟ 734109430للتوضيح أكثر هذا منتدى يطبّق هذه الفكرة هنا
رابط منتدآي هنا
فيروسان
فيروسان

كيف يمكنني فعل هذا؟ 01010

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

http://love-anime-g.ahlamontada.com/

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

كيف يمكنني فعل هذا؟ Empty رد: كيف يمكنني فعل هذا؟

مُساهمة من طرف فيروسان الجمعة 15 ديسمبر 2017 - 22:13

H U D A كتب:مرحبا ,

هذا شريط الصور المتحركة 

تفضل الكود :

الكود:
<table border="1" width="100%">
   <tr>
      <td><img border="0" src="ضع هنا رابط الصوره "></td>
      <td><img border="0" src="ضع هنا رابط الصوره "></td>
      <td><img border="0" src="ضع هنا رابط الصوره "></td>
      <td><img border="0" src="ضع هنا رابط الصوره "></td>
      <td><img border="0" src="ضع هنا رابط الصوره "></td>
      <td><img border="0" src="ضع هنا رابط الصوره "></td>
   </tr>
</table>

المكان وضع الكود :
التشكيلات العامة أو الاعلانات الخاصة .
أهـلاً
شكـراً لكِ و لكـن الكود لم ينجـح معي و لم تظهـر لي سوى مجموعة من الصّور المختلطـة
أردتُهـا في الصورة تماماً
فيروسان
فيروسان

كيف يمكنني فعل هذا؟ 01010

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

http://love-anime-g.ahlamontada.com/

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

كيف يمكنني فعل هذا؟ Empty رد: كيف يمكنني فعل هذا؟

مُساهمة من طرف omarpop23 السبت 16 ديسمبر 2017 - 23:07

ضع الكود التالي في نهاية قالب الـ overall_header
الكود:
<style>
.titel-slide,
.pagin7ation a,
a.prev,
a.next,
.nav-tab {
    background-color: #444
}
.mr {
    border-right: 3px solid #5490cc
}
.ward {
    border: 1px solid #5490cc
}
.site_stats_bar li span {
    border-bottom: 2px solid #5490cc
}
.image_carousel {
    padding-right: 3px;
    position: relative
}
.image_carousel a {
    display: block;
    float: left
}
.image_carousel img {
    border: 1px solid #ccc;
    background-color: #fff;
    padding: 6px;
    margin: 5px;
    display: block;
    float: left
}
.image_carousel img:hover {
    border: 1px solid #DDD;
    -moz-box-shadow: 0 1px 5px #555;
    -webkit-box-shadow: 0 1px 5px #555;
    box-shadow: 0 1px 5px #555
}
.image_carousel:hover > a.prev {
    overflow: visible;
    opacity: 1;
    left: 20px
}
.image_carousel:hover > a.next {
    overflow: visible;
    opacity: 1;
    right: 20px
}
a.prev,
a.next {
    overflow: hidden;
    opacity: 0;
    cursor: pointer;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    transition: all .5s ease
}
a.prev {
    background-image: url(http://store1.up-00.com/2017-01/1484068956722.png);
    background-repeat: no-repeat;
    background-color: #D34A21;
    width: 42px;
    height: 40px;
    display: block;
    position: absolute;
    top: 60px;
    left: -32px;
    border-radius: 20px
}
a.next {
    background-image: url(http://store1.up-00.com/2017-01/1484068956661.png);
    background-repeat: no-repeat;
    background-color: #D34A21;
    width: 40px;
    height: 40px;
    display: block;
    position: absolute;
    top: 60px;
    right: -32px;
    border-radius: 20px
}
a.prev:hover,
a.next:hover {
    opacity: .7!important
}
a.prev span, a.next span {
    line-height: 40px;
    text-align: center;
    color: #FFF;
    margin: 0 auto;
    font-weight: bold;
    display: block;
    direction: ltr;
}
.pagin7ation {
    text-align: center
}
.pagin7ation a {
    width: 20px;
    height: 20px;
    margin: 0 5px 0 0;
    display: inline-block;
    float: none;
    border-radius: 20px
}
.pagin7ation a.selected {
    background-position: -25px -300px;
    cursor: default;
    background-color: #D34A21
}
.pagin7ation a span {
    display: none
}
  .caroufredsel_wrapper {
    right: auto !important;
}
</style>

<div class="image_carousel">
<div class="caroufredsel_wrappers" style="position: relative; top: auto; right: auto; bottom: auto; left: auto;height: 174px; margin: 0px; overflow: hidden;">
  <div id="foo1" style="text-align: left; float: none; position: absolute; top: 0px; left: 0px; margin: 0px; width: 4880px; height: 174px;">
      <!-- المجموعة الأولي -->
      <a href="http://www.a7la-anime.com/t20343-topic">
      <img src="http://i.imgur.com/RxyQec8.png" width="220" height="150" />
      </a>
      <a href="http://www.a7la-anime.com/t20956-topic">
      <img src="http://i.imgur.com/utXbqy8.png" width="220" height="150" />
      </a>
      <a href="http://www.a7la-anime.com/t20927-topic">
      <img src="http://i.imgur.com/Pai7RWt.png" width="220" height="150" />
      </a>
      <!-- المجموعة الثانية -->
      <a href="http://www.a7la-anime.com/t20333-topic">
      <img src="http://i.imgur.com/8kjsl3P.png" width="220" height="150" />
      </a>
      <a href="http://www.a7la-anime.com/t20265-topic">
      <img src="http://i.imgur.com/4jPaW2P.png" width="220" height="150" />
      </a>
      <a href="http://www.a7la-anime.com/t20347-topic">
      <img src="http://i.imgur.com/ksNjicT.png" width="220" height="150" />
      </a>
  </div>
</div>  <div class="clearfix"></div>
      <a class="prev" id="foo1_prev" href="#" style="display: block;"><span><</span></a><a class="next" id="foo1_next" href="#" style="display: block;"><span>></span></a>
      <div class="pagin7ation" id="foo1_pag" style="display: block;"><a href="#" class="selected"><span>1</span></a><a href="#" class=""><span>2</span></a></div>
<script src="https://rawgit.com/Deve-Net/style/master/jquery.carouFredSel.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#foo1').carouFredSel({
        auto: {
            pauseDuration: 5000,
            delay: 375
        },
        prev: '#foo1_prev',
        next: '#foo1_next',
        pagination: "#foo1_pag",
    });
    $('#foo2').carouFredSel({
        auto: {
            pauseDuration: 5000,
            delay: 375
        },
        prev: '#foo2_prev',
        next: '#foo2_next',
        pagination: "#foo2_pag",
    });
});
</script>
omarpop23
omarpop23
 
 

ذكر
عدد المساهمات : 1522
معدل النشاط : 6521
السُمعة : 218

http://www.best-devs.net

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

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

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

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