|
۩۞۩ هبوب تطوير المواقع والمنتديات ۩۞۩ قسم الهاكات,ستايلات واضافات منتديات وتقديم المساعدة |
|
أدوات الموضوع | إبحث في الموضوع | انواع عرض الموضوع |
#1
|
|||||||||||||
|
|||||||||||||
سلايد شو متحرك احترافي جديد للمنتديات والمواقع
السلام عليكم ورحمة الله وبركاته
اقدم لكم سلايد شو مطلوب بنرات متحركة صورة للسلايد شو طريقة التركيب نضع اوﻻ الكود جافا اللي بالمرفقات من خلال لوحة الادارة. عناصر اضافية. HTML و JAVASCRIPT. اكواد javascript تفعيل اكواد javascript اختار نعم وسجل ثم انشاء كود الاسم اي شئ اختار جميع صفحات وضع الكود الاتي الذي بالمرفقات ثم ضع كود css الاتي من خلال لوحة الادارة. مظهر المنتدى. صور والوان. الوان. ورقة css وضع الكود الاتي :- كود:
<li class="L0"><li class="L1"><li class="L2">.titel-slide {<li class="L3"> background: #222 none repeat scroll 0 0;<li class="L4"> display: block;<li class="L5"> height: 28px;<li class="L6"> margin: 0 auto;<li class="L7"> padding-top: 12px;<li class="L8"> text-align: center;<li class="L9"> width: auto;<li class="L0">}<li class="L1">.titel-slide strong {<li class="L2"> color: #fff;<li class="L3"> font-family: arial,sans-serif;<li class="L4"> font-size: 16px;<li class="L5"> line-height: 1;<li class="L6"> margin-right: -55px;<li class="L7">}<li class="L8">.titel-slide i {<li class="L9"> color: #fff;<li class="L0"> display: inline-block;<li class="L1"> float: right;<li class="L2"> font-family: "Batch";<li class="L3"> font-size: 21px;<li class="L4"> font-style: normal;<li class="L5"> font-weight: bolder;<li class="L6"> height: 28px;<li class="L7"> line-height: 0.7;<li class="L8"> margin-top: -12px;<li class="L9"> padding-top: 12px;<li class="L0"> text-align: center;<li class="L1"> width: 40px;<li class="L2">}<li class="L3"><li class="L4">.image_carousel {<li class="L5"> padding-right: 3px;<li class="L6"> position: relative;<li class="L7">}<li class="L8">.image_carousel a {<li class="L9"> display: block;<li class="L0"> float: left;<li class="L1">}<li class="L2">.image_carousel img {<li class="L3"> background-color: #fff;<li class="L4"> border: 1px solid #ccc;<li class="L5"> display: block;<li class="L6"> float: left;<li class="L7"> margin: 5px;<li class="L8"> padding: 6px;<li class="L9">}<li class="L0">.image_carousel img:hover {<li class="L1"> border: 1px solid #ddd;<li class="L2"> box-shadow: 0 1px 5px #555;<li class="L3">}<li class="L4">.image_carousel:hover > a.prev {<li class="L5"> left: 20px;<li class="L6"> opacity: 1;<li class="L7"> overflow: visible;<li class="L8">}<li class="L9">.image_carousel:hover > a.next {<li class="L0"> opacity: 1;<li class="L1"> overflow: visible;<li class="L2"> right: 20px;<li class="L3">}<li class="L4">a.prev, a.next {<li class="L5"> cursor: pointer;<li class="L6"> opacity: 0;<li class="L7"> overflow: hidden;<li class="L8"> transition: all 0.5s ease 0s;<li class="L9">}<li class="L0">a.prev {<li class="L1"> background-image: url("https://i.servimg.com/u/f37/16/46/77/76/left10.png");<li class="L2"> background-repeat: no-repeat;<li class="L3"> display: block;<li class="L4"> height: 40px;<li class="L5"> left: -32px;<li class="L6"> position: absolute;<li class="L7"> top: 90px;<li class="L8"> width: 40px;<li class="L9">}<li class="L0">a.next {<li class="L1"> background-image: url("https://i.servimg.com/u/f37/16/46/77/76/right10.png");<li class="L2"> background-repeat: no-repeat;<li class="L3"> display: block;<li class="L4"> height: 40px;<li class="L5"> position: absolute;<li class="L6"> right: -32px;<li class="L7"> top: 90px;<li class="L8"> width: 40px;<li class="L9">}<li class="L0">a.prev:hover, a.next:hover {<li class="L1"> opacity: 0.7 !important;<li class="L2">}<li class="L3">a.prev span, a.next span {<li class="L4"> display: none;<li class="L5">}<li class="L6">.pagination {<li class="L7"> text-align: center;<li class="L8">}<li class="L9">.pagination a {<li class="L0"> display: inline-block;<li class="L1"> float: none;<li class="L2"> height: 15px;<li class="L3"> margin: 0 5px 0 0;<li class="L4"> width: 15px;<li class="L5">}<li class="L6">.pagination a.selected {<li class="L7"> background-color: #5490cc;<li class="L8"> background-position: -25px -300px;<li class="L9"> cursor: default;<li class="L0">}<li class="L1">.pagination a span {<li class="L2"> display: none;<li class="L3">}<li class="L4"> .titel-slide, .pagination a, a.prev, a.next, .nav-tab {<li class="L5"> background-color: #444;<li class="L6">}<li class="L7">.slider-sh {<li class="L8"> background: #222 none repeat scroll 0 0;<li class="L9"> border: 1px solid #222;<li class="L0"> margin: auto;<li class="L1"> } كود:
<li class="L0"> <li class="L1"> <div style="width: 903px;margin: 0px auto;height: 190px;overflow: hidden;"> <li class="L2"> <li class="L3"> <div class="image_carousel"><li class="L4"> <li class="L5"> <div id="foo1"><li class="L6"> <li class="L7"> <!-- المجموعة الأولى --> <li class="L8"> <a href="رابط الموضوع"> <li class="L9"> <img src="https://i.imgur.com/pZby46i.png" alt="إعلانك هنا" style="width: 200px; height: 145px;" /></a> <li class="L0"> <a href="رابط الموضوع"> <li class="L1"> <img src="https://i.imgur.com/pZby46i.png" alt="إعلانك هنا" style="width: 200px; height: 145px;" /></a> <li class="L2"> <a href="رابط الموضوع"> <li class="L3"> <img src="https://i.imgur.com/pZby46i.png" alt="إعلانك هنا" style="width: 200px; height: 145px;" /></a> <li class="L4"> <a href="http://www.theb3st.com/t57994-topic"> <li class="L5"> <img src="https://i.imgur.com/pZby46i.png" alt="إعلانك هنا" style="width: 200px; height: 145px;" /></a> <li class="L6"> <a href="رابط الموضوع"> <li class="L7"> <img src="https://i.imgur.com/pZby46i.png" alt="إعلانك هنا" style="width: 200px; height: 145px;" /></a> <li class="L8"> <a href="رابط الموضوع"> <li class="L9"> <img src="https://i.imgur.com/pZby46i.png" alt="إعلانك هنا" style="width: 200px; height: 145px;" /></a> <li class="L0"> <a href="رابط الموضوع"> <li class="L1"> <img src="https://i.imgur.com/pZby46i.png" alt="إعلانك هنا" style="width: 200px; height: 145px;" /></a> <li class="L2"> <a href="رابط الموضوع"> <li class="L3"> <img src="https://i.imgur.com/pZby46i.png" alt="إعلانك هنا" style="width: 200px; height: 145px;" /></a> <li class="L4"> <a href="رابط الموضوع"> <li class="L5"> <img src="https://i.imgur.com/pZby46i.png" alt="إعلانك هنا" style="width: 200px; height: 145px;" /></a> <li class="L6"> <a href="رابط الموضوع"> <li class="L7"> <img src="https://i.imgur.com/pZby46i.png" alt="إعلانك هنا" style="width: 200px; height: 145px;" /></a> <li class="L8"> <a href="رابط الموضوع"> <li class="L9"> <img src="https://i.imgur.com/pZby46i.png" alt="إعلانك هنا" style="width: 200px; height: 145px;" /></a> <li class="L0"> <a href="رابط الموضوع"> <li class="L1"> <img src="https://i.imgur.com/pZby46i.png" alt="إعلانك هنا" style="width: 200px; height: 145px;" /></a> <li class="L2"> <!-- نهاية المجموعة الأولى --> <li class="L3"> </div><li class="L4"> <li class="L5"> <div class="clearfix"><li class="L6"></div> <li class="L7"> <a class="prev" id="foo1_prev" href="#"><span>prev</span></a> <a class="next" id="foo1_next" href="#"><span>next</span></a> <li class="L8"> <div class="pagination" id="foo1_pag"><li class="L9"> <li class="L0"> </div><li class="L1"> <li class="L2"> </div><li class="L3"> <li class="L4"> </div><li class="L5"> <li class="L6"><script type="text/javascript"><li class="L7">$(document).ready(function() { <li class="L8">$('#foo1').carouFredSel({<li class="L9"> auto: {pauseDuration: 5000, delay: 375},<li class="L0"> prev: '#foo1_prev',<li class="L1"> next: '#foo1_next',<li class="L2"> pagination: "#foo1_pag",<li class="L3"> <li class="L4"> });<li class="L5">$('#foo2').carouFredSel({<li class="L6"> auto: {pauseDuration: 5000, delay: 375},<li class="L7"> prev: '#foo2_prev',<li class="L8"> next: '#foo2_next',<li class="L9"> pagination: "#foo2_pag",<li class="L0"> <li class="L1"> });<li class="L2"> <li class="L3"> <li class="L4">});<li class="L5"></script><li class="L6"> <script type="text/javascript" language="javascript"><li class="L7"> $(function() {<li class="L8"> <li class="L9"> <li class="L0"> $('#foo2').carouFredSel({<li class="L1"> auto: true,<li class="L2"> prev: '#prev2',<li class="L3"> next: '#next2',<li class="L4"> pagination: false,<li class="L5"> mousewheel: true,<li class="L6"> swipe: {<li class="L7"> onMouse: true,<li class="L8"> onTouch: true<li class="L9"> }<li class="L0"> });<li class="L1"> <li class="L2"> <li class="L3"> <li class="L4"> });<li class="L5"> </script> وبكدا خلصنا الكود عبارة عن كود جافا وكود css وقالب في قالب overall_header دمتم بخير الموضوع الأصلي: سلايد شو متحرك احترافي جديد للمنتديات والمواقع || الكاتب: الوافي || المصدر: منتديات هبوب الجنوب
|
مواقع النشر (المفضلة) |
الكلمات الدلالية (Tags) |
للمنتديات, متحرك, احترافي, جديد, سلايد, والمواقع |
الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1) | |
|
|
المواضيع المتشابهه | ||||
الموضوع | كاتب الموضوع | المنتدى | مشاركات | آخر مشاركة |
كود لقوانين انشاء موضوع جديد ويكون بشكل واضح وملفت للنظر وبشكل متحرك | الوافي | ۩۞۩ هبوب تطوير المواقع والمنتديات ۩۞۩ | 6 | 01-12-2023 02:35 PM |