• 1 رای - 5 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
یک اسلاید شو ساده
#1
سلام
گفتم بشینم یه اسلاید شو ساده برای خودم درست کنم که به میل خودم هی توش تغییرات بدم، از طرفی گفتم بیام اسکلتش رو قبل از اینکه شلوغ پلوغ شه بزارم اینجا که واسه بعضی از دوستان که فکر میکنن اسلاید شو یه چیز خیلی سخت هست یه نمونه آموزشی باشه و ببینن که با چند خط کد ساده میشه یه اسلاید شو ساخت...

دیگه حالا دوستان میتونن stylesheet رو به میل خودشون تغییر بدن و از jquery و سایر افکت ها مثل css3 توش استفاده کنن و یا اصلاً با jquery باز نویسیش کنن...

کد های html , جاوااسکریپت:

کد:
<!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" />

<link href="slideshow.css" type="text/css" rel="stylesheet" />
<title>Slide Show</title>
</head>

<body>
<div id="slideshow" >
    <div id="slidshowContent">
        <div class="slide" style="display:block; background-color:#FF0;" >
            slide 1
        </div>
        
        <div class="slide" style="background-color:#69F;">
            slide 2
        </div>
        
        <div class="slide" style="background-color:#6C0;">
            slide 3
        </div>
        
        <div class="slide" style="background-color:#FF5050;">
            slide 4
        </div>
        
    </div>
    
    <div id="circles" class="cirlcles"></div>
    <div id="slidshowController">
        <button type="button" name="control" id="control">pause</button>
    </div>
</div>

<script  language="javascript" type="text/javascript">
    var SlidePosition=1;
    var slideCount = document.getElementsByClassName("slide").length;
    var Circle1='circle.png';
    var Circle2='circle2.png';
    var tempItem;
    ////////////////////////////////////////////////////
    mySlide=setInterval(function(){sliding()},1000);
    ////////////////////////////////////////////////////
    
    
    for(i=0;i<slideCount;i++)
    {
        var circleimg;
        if(i==0)
            document.getElementById("circles").innerHTML += '<span class="circles">' + CircleButton(Circle2,i) + '</span>';
        else
            document.getElementById("circles").innerHTML += '<span class="circles">' + CircleButton(Circle1,i) + '</span>';    
    }
    ////////////////////////////////////////////////////
    function goOnSlide(value){
        document.getElementsByClassName("slide").item(SlidePosition-1).style.display='none';
        
        tempItem=document.getElementsByClassName("circles").item(SlidePosition-1);    
        if(SlidePosition>0) tempItem.innerHTML=CircleButton(Circle1,SlidePosition-1);
        
        SlidePosition=value;
        document.getElementById("control").innerHTML="play"
        clearInterval(mySlide);        
        sliding();
    }
    ////////////////////////////////////////////////////
    function sliding()
    {
        var tempItem=document.getElementsByClassName("circles").item(SlidePosition);
        if(SlidePosition==0) tempItem.innerHTML=CircleButton(Circle1,SlidePosition);
        if(SlidePosition>0)
        {
            tempItem=document.getElementsByClassName("circles").item(SlidePosition-1);
             tempItem.innerHTML=CircleButton(Circle1,SlidePosition-1);
        }

    
        if(SlidePosition>0) document.getElementsByClassName("slide").item(SlidePosition-1).style.display='none';
    
        if(SlidePosition==slideCount) SlidePosition=0;
        
        tempItem=document.getElementsByClassName("circles").item(SlidePosition);
        tempItem.innerHTML=CircleButton(Circle2,SlidePosition);
        
        document.getElementsByClassName("slide").item(SlidePosition).style.display='block';
        SlidePosition++;
    
    }
    ////////////////////////////////////////////////////
    document.getElementById("control").onclick=function()
    {
        if(document.getElementById("control").innerHTML=="pause")    
        {
            document.getElementById("control").innerHTML="play"
            clearInterval(mySlide);
        }
        else
        {
            document.getElementById("control").innerHTML="pause"
            mySlide=setInterval(function(){sliding()},1000);        
        }
    }
    ////////////////////////////////////////////////////
    function CircleButton(image ,value)
    {
        return '<input name="Image1"  src="'+image+'" type="image" value="'+value+'" onclick="goOnSlide(this.value)" />';
    }
</script>
</body>

</html>

CSS
کد:
#slideshow{
    position:relative;
    width:90%;
    height:300px;
    border:3px gray solid;
}

.slide{
    position:absolute;
    top:10px;
    left:5%;
    border:1px fuchsia solid;
    width:90%;
    height:80%;
    text-align:center;
    display:none;
}

#slidshowController{
    position:absolute;
    border:1px green solid;
    height:25px;
    bottom:0px;
}

.cirlcles{
    position:absolute;
    bottom:0px;
    left:100px;
}

این دوتا تصویر رو هم دانلود کنید بزارید کنار فایل html تون:


.zip   circle2.zip (اندازه 6.67 KB / تعداد دانلود: 191)
هر که با مرغ هوا دوست شود - خوابش آرامترین خواب جهان خواهد بود.
  پاسخ
#2
یه مشکل cross browsing هم با IE وجود داشت که حل شد:

توی فانکشن goOnSlide ، عبارت زیر را:

کد:
SlidePosition = value;

به :

کد:
SlidePosition = parseInt(value);

تغییر دهید. Rolleyes
هر که با مرغ هوا دوست شود - خوابش آرامترین خواب جهان خواهد بود.
  پاسخ
تشکر شده توسط : Reza moh3nmir arashen91 milad465


پرش به انجمن:


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