السلام عليكم ورحمة الله وبركاته اليوم
سننشئ ال slide show او slide images بمعني صور متتابعة بأمر او تلقائي لكن اليوم سننشئها بأمر onclick "بالضغط" .درس اليوم اسهل الدروس في slide show اسهل طريقة ستجدها
اولا سننشئ ملف ال HTML و ملف css و ملف javascript او نربطهم ببعض في ملف html كما سأفعل انا.
بسم الله الرحمن الرحيم:
<!--سنجعل الصور في منتصف الصفحة او كما نريد :-->
<center>
<!--Create The Dots To Transform Between The Images-->
ننشئ النقاط التي سنقلب بها من صورة لأخري:
<div class="dots">
<span id="dots" class="dot" onclick="showOne()"></span>
<span id="dots" class="dot" onclick="showTwo()"></span>
<span id="dots" class="dot" onclick="showThree()"></span>
النقاط تلك كل واحدة لها نفس id و class لكن ليس لها نفس onclick function name مثلاً
showOne
showTwo
showThree
مهم جداً ان نكتب اول حرف في تاني كلمة كبيرة تلك هي قواعد javascript.
<h1>Slide Images</h1>
</div>
<!--END-->
وننشئ الصور .
<!--slide images-->
<div class="slide">
"كل صور لها id و class مخصص لها .
<img src="img1.jpg" id="img1" class="img1">
</div>
<div class="slide">
<img src="img2.jpg" id="img2" class="img2">
</div>
<div class="slide">
<img src="img3.jpg" id="img3" class="img3">
</div>
<!--END-->
</center>
من ثم نذهب الي الstyle او css .
<style type="text/css">
نجعل الوسم img اعدادات اساسية "basic settings"
مثلا ان تكون الصورة عرض 400px و طول 500px وذلك مهم جداً ان تكون الصور مقاس بعض.
img {width: 400px; height: 400px;
position: absolute;margin-top: 15px;margin-left: 450px;
border:solid 1px darkorange;box-shadow: 0 3px 4px darkorange;}
/*make all images display "none"*/
ومن ثم نجعل ال img1 فقط هي الظاهرة والباقي غير ظاهر بالوسم display.
display:block;
يعني ظاهر
none غير ظاهر.
.img1 {display: block;}
.img2 {display: none;}
.img3 {display: none;}
ومن ثم وتلك اهم نقطة ان تجعل النقط مرئية لان ان لم تجعلها كذلك لن تتمكن من التنقل من بين الصور,نجعلها display:inline-block; و crusor:pointor; اهم نقطتين.
/*make the dot's display "inline-block" to show it*/
.dot {width: 15px; height: 15px; border-radius: 100%; background-color: black;
color: red;display: inline-block;cursor: pointer;
}
.dot:hover {background-color: red;}
.bg-color {background-color: red;}
</style>
ثم نذهب الي الجافا سكربت :
<script type="text/javascript">
سنجعل الحدث showOne عند الضغط عليها display:block; وباقي الصور display:none; كما هو موضح.
function showOne(argument) {
//get the img one id and display it when we bress to function > "block";
document.getElementById("img1").style.display="block";
//when you bress this image diplay other images > "none";
document.getElementById('img2').style.display="none";
document.getElementById('img3').style.display="none";
}
سنجعل الحدث showTwo عند الضغط عليها display:block; والباقي display:none; كما موضح.
function showTwo(argument) {
//get the img one id and display it when we bress to function > "block";
document.getElementById('img2').style.display="block";
//when you bress this image diplay other images > "none";
document.getElementById('img1').style.display="none";
document.getElementById('img3').style.display="none";
}
سنجعل الحدث showThree عند الضغط عليها display:block; والباقي display:none; كما موضح.
function showThree(argument) {
//get the img one id and display it when we bress to function > "block";
document.getElementById('img3').style.display="block";
//when you bress this image diplay other images > "none";
document.getElementById('img2').style.display="none";
document.getElementById('img1').style.display="none";
}
</script>
لقد انتهي درسنا لليوم شكراً لمتابعتكم لي وارجو ان اكون افدتكم اخوتي السلام عليكم ورحمة الله وبركاته.