• 0 رای - 0 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
عدم اجرای قسمتی از کد اسلایدشو
#1
سلام.خسته نباشید
من از این کد ساده برای اسلایدشو تصاویر استفاده میکنم و نتیجه هم میده . فقط دکمه های next و previes دیده نمیشن که بخوام اجرا یا عدم اجرای اونها رو ببینم . آدرس تصاویر رو هم درست دادم.بنظرتون مشکل از کجاست؟
البته ببخشید میدونم کدهای طولانی خسته کنندست ؛ ولی لطف میکنید اگر نگاه کنید....
کد:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<!-- include jQuery library -->
<script type="text/javascript"  src="jquery-1.5.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript"  src="jquery.cycle.all.latest.js"></script>

<script type="text/javascript">

    $(document).ready(function() {

        $('.slideshow').cycle({

        fx: 'fade',

        pause: 1,

        prev: '#prev',

        next: '#next'

        });

    });

</script>


<style type="text/css">

* {
    margin:0px;

    padding:0px;

    border:0px;

}

body {

    background:url(images/background.jpg) repeat-x;

}


#slideshowContainer {

    width: 632px;

    margin: 100px auto 0 auto;

    position:relative;

}

.slideshow {

   height: 332px;

}

.slideshow img {

    padding: 15px;

    border: 1px solid #ccc;

    background-color: #eee;

}


#nav {

    list-style-type:none;

    z-index:150;

}

#nav li a {
    display:block;
    width:58px;
    height:102px;
    text-indent:-9999px;
    outline:none;

}
#prev a {

    background:url(images/left.png);
    width:58px;
    height:102px;
    position:absolute;
    top:120px;
    left:-70px;
}

#next a {
    background:url(images/right.png);
    width:58px;
    height:102px;
    position:absolute;
    top:120px;
    right:-70px;

}

#next a:hover {

    background:url(images/right_over.png);
}

#prev a:hover {
    background:url(images/left_over.png);

}

</style>

</head>

<body>


<div id="slideshowContainer">

<div class="slideshow">
         <img  src="Koala.jpg" alt="" width="600" height="300" />

         <img  src="Chrysanthemum.jpg" alt="" width="600" height="300" />

         <img  src="Desert.jpg" alt="" width="600" height="300" />

         <img  src="Hydrangeas.jpg" alt="" width="600" height="300" />

         <img src="Jellyfish.jpg" alt="" width="600" height="300" />


</div>

<ul id="nav">
    <li id="prev"><a href="#">Previous</a></li>

    <li id="next"><a href="#">Next</a></li>

</ul>
</div>

</body>
</html>
آرام باش ؛ توكل كن ؛ تفكر كن و سپس آستينها را بالا بزن , آنگاه دستان خداوند را خواهي ديد كه زودتر از تو دست به كار شده است.امام علي عليه السلام.
  پاسخ
تشکر شده توسط :
#2
اسلاید شو با تمام فایل هاش رو پیوست این تاپیک کن تا بتونیم روش تست بزنیم.
هر چیزی که در جستن آنی آنی...
غایب
  پاسخ
تشکر شده توسط : pary_daryayi
#3
پری تو داری از پلاگین استفاده میکنی. اینجا فقط کسانی به پرسش های مربوط به پلاگینا جواب میدن که باهاش کار کرده باشن. واسه پیدا کردن جواب اینجور سوالاتت از گوگل استفاده کن. اینطوری سریع تر به جواب میرسی. میتونی هم صبر کنی من برات سرچ کنم ببینم به چه نتیجه ای میرسم.

پری اینو پیدا کردم http://stackoverflow.com/questions/10079...lay-button
غایب
  پاسخ
تشکر شده توسط : pary_daryayi
#4
(۱۳۹۱ مرداد ۰۵, ۰۷:۱۰ ب.ظ)ehsan_php نوشته: اسلاید شو با تمام فایل هاش رو پیوست این تاپیک کن تا بتونیم روش تست بزنیم.
ممنونم . ولی همه ی کدها همینه . فقط کتابخانه ی jquery و عکسها رو نفرستادم.منظورتون اینه که اینا رو پیوست کنم ؟

نقل قول:پری تو داری از پلاگین استفاده میکنی.
یعنی شما برای اسلاید شو خودتون کدنویسی میکنید ؟ یک بار آموزشش رو خوندم . خیلی طولانیه . خسته کننده بود...
لینک رو دیدم . نشد که نشد... ولی پیداش میکنم ...
آرام باش ؛ توكل كن ؛ تفكر كن و سپس آستينها را بالا بزن , آنگاه دستان خداوند را خواهي ديد كه زودتر از تو دست به كار شده است.امام علي عليه السلام.
  پاسخ
تشکر شده توسط :
#5
نقل قول: یعنی شما برای اسلاید شو خودتون کدنویسی میکنید ؟ یک بار آموزشش رو خوندم . خیلی طولانیه . خسته کننده بود...
بستگی به خواسته کارفرما داره. من تمام CSS بدون جاوا اسکریپت مینویسم. لذت و کیفیت کار بیشتره. واسه اسلایدر ها، ما اسلایدر های متنوعی داریم. یه جستجو کنی مدلای بیشتری میابی.
غایب
  پاسخ
تشکر شده توسط : pary_daryayi
#6
کد:
<script type="text/javascript"  src="jquery.cycle.all.latest.js"></script>

خب من محتویات این فایل رو میخوام ببینم! تا شاید بتونم مشکل رو یرطرف کنم.

از اونجایی که از اسلاید شو های اماده استفاده میکنی بهتره سریع بری و یکی دیگه رو جایگزینش کنی تا اینجوری کارت سریع تر پیش بره.
هر چیزی که در جستن آنی آنی...
غایب
  پاسخ
تشکر شده توسط : pary_daryayi
#7
اون فایلی که احسان گفته رو بذار که بشه نظر داد ولی فعلا این کار رو انجام بده ببین دکمه ها رو بازم نمیبینی ؟
برای دکمه ها خاصیت background رو اینجوری بنویس :
کد:
background:url(images/left.png) #F00;
ببین بازم دیده نمیشن ؟
  پاسخ
تشکر شده توسط : undefined pary_daryayi hamid_80386
#8
وای خدای من درست شد..ممنون آقای bojbaj. ولی چرا ؟ چه ارتباطی به این داشت؟
ٰفقط یه مورد کوچیک دیگه . مربوط به css میشه . این دکمه های prev و next میخوام بیان روی عکس قرار بگیرن . خیلی کدهاشو دست کاری کردم نشد . میشه بگید کدوم خاصیتش رو تغییر بدم ؟
left و right رو که کم میکنم میرن زیر عکس قرار میگیرن.
آرام باش ؛ توكل كن ؛ تفكر كن و سپس آستينها را بالا بزن , آنگاه دستان خداوند را خواهي ديد كه زودتر از تو دست به كار شده است.امام علي عليه السلام.
  پاسخ
تشکر شده توسط :
#9
درست متوجه نشدم !
یعنی دکمه ها روی اسلاید شو باشن ؟
خاصیت z-index برای این کار استفاده میشه.
یا میخوای مکانشون عوض بشه و کنار اسلاید باشن ؟ ( این با همون left و right انجام میشه )
یه اسکرین شات بذار ببینم چطوری شده الان !!
  پاسخ
تشکر شده توسط : pary_daryayi
#10
خیلی ممنون . z-index کلاس slideshow رو -1 دادم درست شد.

آرام باش ؛ توكل كن ؛ تفكر كن و سپس آستينها را بالا بزن , آنگاه دستان خداوند را خواهي ديد كه زودتر از تو دست به كار شده است.امام علي عليه السلام.
  پاسخ
تشکر شده توسط :


پرش به انجمن:


کاربران در حال بازدید این موضوع: 1 مهمان