طراحی سایت و اسلایدشو با جاوا اسکریپ
نمایش نتایج: از شماره 1 تا 2 , از مجموع 2
  1. elham1388 آواتار ها
    elham1388
    کاربر سایت
    Dec 2014
    تهران
    116
    0
    تشکر شده : 22

    پیش فرض طراحی سایت و اسلایدشو با جاوا اسکریپ

    نمایش اسلایدشو از قابلیت هایی است که در اغلب طراحی سایت ها اعمال می شود. درج اسلایدشو به منظور نمایش محصولات و خدمات در اغلب طراحی وب سایت ها مورد کاربرد قرار می گیرد. افزونه های بسیاری بدین منظور وجود دارد که به شما این امکان را می دهد که اسلایدشویی از مطالب مورد نظر خود را در طراحی سایت ایجاد نمایید. نمایش اسلایدشو به دلیل ظاهر گرافیکی موجب جلب توجه کاربران سایت شما به محصولات و خدمات شما می شود بدین واسط فراهم نمودن اسلایدشو با نمای گرافیکی زیبا تاثیر موجب جذب کاربر و ترافیک به سمت وب سایت شما می شود که در سئو سایت شما اثرگذار خواهد بود. استفاده از اسکریپ های جاوا این امکان را به شما می دهد که اسلایدشویی مطابق نظر خود را در طراحی سایت خود پیاده سازی نماید. در اینجا قصد داریم کدهایی که بدین منظور می بایست در طراحی سایت خود درج نمایید را بیان نماییم.





    <style type="text/css">





    #slideshowContainer{


    width: 300px;


    height: auto;


    }





    #numberDiv a{


    font: bold 14px Arial;


    text-decoration: none;


    }





    #backforthbuttons{


    margin-top: 6px;


    }





    </style>





    <script type="text/j-avascript">





    // Index It Image Slideshow script- By JavaScriptKit.com


    // For this and over 400+ free scripts, visit JavaScript Kit- فقط کاربران ثبت نام شده میتوانند لینک های انجمن را مشاهده کنند. ]


    // This notice must stay intact for use





    //Specify images for slideshow:


    //["Image Path", "Optional Image link"]





    var numberslide=new Array()


    numberslide[0]=["plane1.gif", "http://www.google.com"]


    numberslide[1]=["plane2.gif", ""]


    numberslide[2]=["plane3.gif", ""]


    numberslide[3]=["plane4.gif", ""]


    numberslide[4]=["plane5.gif", ""]





    var mylinktarget="" //specify optional link target


    var mylinkcolor="navy" //specify default color of number links


    var mylinkcolorSelected="red" //specify color of selected links





    var imgborderwidth=0 //specify border of image slideshow





    /////Stop customizing here////////////////





    var preloadit=new Array()


    for (i=0;i<numberslide.length;i++){


    preloadit[i]=new Image()


    preloadit[i].src=numberslide[i][0]


    }





    var currentindex=""





    function changeslides(which){


    var imghtml=""


    currentindex=(which=="initial")? 0 : parseInt(which)


    var mode=(which=="initial")? "initial" : ""


    var which=(mode=="initial")? numberslide[0] : numberslide[which]


    if (which[1]!="")


    imghtml='<a href="'+which[1]+'" target="'+mylinktarget+'">'


    imghtml+='<img src="'+which[0]+'" border="'+imgborderwidth+'">'


    if (which[1]!="")


    imghtml+='</a>'





    if (mode=="initial")


    document.write('<div>'+imghtml+'</div>')


    else{


    document.getElementById("imagecontainer").innerHTM L=imghtml


    changecolors()


    }


    }





    function createnumbers(){


    document.write('<a href="javascript:changeslides(0)" style="color:'+mylinkcolorSelected+'">0</a> ')


    for (i=1; i< numberslide.length; i++)


    document.write('<a href="javascript:changeslides(\''+i+'\')">'+i+'</a> ')


    }





    function changecolors(){


    var numberobj=document.getElementById("numberDiv")


    numberlinks=numberobj.getElementsByTagName("A")


    for (i=0; i<=currentindex; i++)


    numberlinks[i].style.color=mylinkcolorSelected


    for (i=currentindex+1; i<numberslide.length; i++)


    numberlinks[i].style.color=mylinkcolor


    }





    function goforward(){


    if (currentindex<numberslide.length-1)


    changeslides(currentindex+1)


    }





    function goback(){


    if (currentindex!=0)


    changeslides(currentindex-1)


    }





    </script>








    کدهای css و اسکریپ ها را در تگ <head> صفحه سایت درج نمایید. حال قطعه کد زیر را در بخشی از صفحه طراحی سایت خود که قصد نمایش اسلایدشو را دارید درج نمایید.





    <div id="slideshowContainer">


    <div id="imagecontainer">


    <script type="text/j-avascript">


    changeslides("initial") //This call displays the first image


    </script>


    </div>





    <div id="numberDiv">


    <script type="text/j-avascript">


    createnumbers() //This call writes out the numbers


    </script>


    </div>





    <div id="backforthbuttons">


    <a href="javascript:goforward()" style="float: right"><img src="/demo/blueright.gif" border="0"></a> <a href="javascript:goback()"><img src="/demo/blueleft.gif" border="0"></a>


    </div>





    <p style="font: normal 11px Arial">This free script provided by<br />


    <a href="http://www.javascriptkit.com">JavaScript Kit</a></p>





    </div>


    با آسانی با درج کدهای زیر شما در صفحه سایت خود اسلایدشویی از محصولات خود را خواهید داشت.


    منبع: فقط کاربران ثبت نام شده میتوانند لینک های انجمن را مشاهده کنند. ]
    فقط کاربران ثبت نام شده میتوانند لینک های انجمن را مشاهده کنند. ], فقط کاربران ثبت نام شده میتوانند لینک های انجمن را مشاهده کنند. ] , فقط کاربران ثبت نام شده میتوانند لینک های انجمن را مشاهده کنند. ] , فقط کاربران ثبت نام شده میتوانند لینک های انجمن را مشاهده کنند. ], فقط کاربران ثبت نام شده میتوانند لینک های انجمن را مشاهده کنند. ]
    #1 ارسال شده در تاريخ 27th December 2014 در ساعت 12:13

  2. sitesazan آواتار ها
    sitesazan
    کاربر سایت
    Feb 2018
    تهذان
    2
    0
    تشکر شده : 0

    پیش فرض

    برای ساخت اسلاید شو از owl carousal استفاده می کنیم و بیش از حد خودمون رو اذیت نمی کنیم. البته اگر بخواهیم فقط کاربران ثبت نام شده میتوانند لینک های انجمن را مشاهده کنند. ] رو به بهترین شکل انجام بدیم، باید از کتابخونه ها و پلاگین هایی که سالها برروی اونها کار شده استفاده کنیم. حالا در بعضی مواقع این کتاب خونه ها جوابگو نیستند و خودمون باید بنویسیم که خیلی نادره
    فقط کاربران ثبت نام شده میتوانند لینک های انجمن را مشاهده کنند. ] | فقط کاربران ثبت نام شده میتوانند لینک های انجمن را مشاهده کنند. ] | فقط کاربران ثبت نام شده میتوانند لینک های انجمن را مشاهده کنند. ]
    #2 ارسال شده در تاريخ 27th February 2018 در ساعت 14:12

علاقه مندی ها (Bookmarks)

مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •  

Designed With Cooperation

Of Creatively & VBIran&تزیین سفره هفت سین 96