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

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>

المكان وضع الكود :
التشكيلات العامة أو الاعلانات الخاصة .

الكود:

<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>