سلام عليكم
ممكن كود سلايد شو محترف واريده صغير وليس حجم كبير للصور
تحياتي
ممكن كود سلايد شو محترف واريده صغير وليس حجم كبير للصور
تحياتي
طلب كود سلايد شو الأربعاء 15 يناير 2014 - 10:34رد: طلب كود سلايد شو الأربعاء 15 يناير 2014 - 11:01
https://i.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg
الكود:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>عنوان الصفحة</title><meta http-equiv="content-script-type"
content="text/javascript" /><meta http-equiv="content-style-type"
content="text/css" /><meta http-equiv="imagetoolbar" content="no"
/>
<meta name="google-site-verification" content="P7BJggJ24VHn6Tj47PJcOEZAY-D28VmZHKMCQX-93y0" />
<HTML dir=rtl>
<style type="text/css">
html {
overflow: hidden;
}
body {
position: absolute;
margin: 0px;
padding: 0px;
background: #111;
width: 100%;
height: 100%;
}
#center {
position: absolute;
left: 50%;
top: 50%;
}
#slider {
position: absolute;
width: 820px;
height: 333px;
left: -430px;
top: -186px;
overflow: hidden;
background: #000;
border: 20px solid #000;
}
#slider .slide {
position: absolute;
top: 0px;
height: 333px;
width: 500px;
background: #000;
overflow: hidden;
border-left: #000 solid 1px;
cursor: default;
}
#slider .title {
color: #F80;
font-weight: bold;
font-size: 1.2em;
margin-right: 1.5em;
text-decoration: none;
}
#slider .backgroundText {
position: absolute;
width: 100%;
height: 100%;
top: 100%;
background: #000;
filter: alpha(opacity=40);
opacity: 0.4;
}
#slider .text {
position: absolute;
top: 1%;
top: 100%;
color: #FFF;
font-family: verdana, arial, Helvetica, sans-serif;
font-size: 0.9em;
text-align: justify;
width: 470px;
left: 10px;
}
#slider .diapo {
position: absolute;
filter: alpha(opacity=100);
opacity: 1;
visibility: hidden;
}
a:link {
color: Lime;
text-decoration:none;
}
a:visited {
color: Lime;
text-decoration:none;
}
a:hover {
color:DarkOrange;
text-decoration:none;
}
a {text-decoration: none;}
a:hover {
text-shadow: 2px 2px 2px #73729c;
text-decoration: none !important;
}
a:hover
{
background: url(http://i65.servimg.com/u/f65/16/35/21/30/undo10.gif) no-repeat right;
padding:10px 30px 10px 10px;
}
</style>
<script type="text/javascript">
/* ==== slider nameSpace ==== */
var slider = function() {
/* ==== private methods ==== */
function getElementsByClass(object, tag, className) {
var o = object.getElementsByTagName(tag);
for ( var i = 0, n = o.length, ret = []; i < n; i++) {
if (o[i].className == className) ret.push(o[i]);
}
if (ret.length == 1) ret = ret[0];
return ret;
}
function setOpacity (obj,o) {
if (obj.filters) obj.filters.alpha.opacity = Math.round(o);
else obj.style.opacity = o / 100;
}
/* ==== Slider Constructor ==== */
function Slider(oCont, speed, iW, iH, oP) {
this.slides = [];
this.over = false;
this.S = this.S0 = speed;
this.iW = iW;
this.iH = iH;
this.oP = oP;
this.oc = document.getElementById(oCont);
this.frm = getElementsByClass(this.oc, 'div', 'slide');
this.NF = this.frm.length;
this.resize();
for (var i = 0; i < this.NF; i++) {
this.slides[i] = new Slide(this, i);
}
this.oc.parent = this;
this.view = this.slides[0];
this.Z = this.mx;
/* ==== on mouse out event ==== */
this.oc.onmouseout = function () {
this.parent.mouseout();
return false;
}
}
Slider.prototype = {
/* ==== animation loop ==== */
run : function () {
this.Z += this.over ? (this.mn - this.Z) * .5 : (this.mx - this.Z) * .5;
this.view.calc();
var i = this.NF;
while (i--) this.slides[i].move();
},
/* ==== resize ==== */
resize : function () {
this.wh = this.oc.clientWidth;
this.ht = this.oc.clientHeight;
this.wr = this.wh * this.iW;
this.r = this.ht / this.wr;
this.mx = this.wh / this.NF;
this.mn = (this.wh * (1 - this.iW)) / (this.NF - 1);
},
/* ==== rest ==== */
mouseout : function () {
this.over = false;
setOpacity(this.view.img, this.oP);
}
}
/* ==== Slide Constructor ==== */
Slide = function (parent, N) {
this.parent = parent;
this.N = N;
this.x0 = this.x1 = N * parent.mx;
this.v = 0;
this.loaded = false;
this.cpt = 0;
this.start = new Date();
this.obj = parent.frm[N];
this.txt = getElementsByClass(this.obj, 'div', 'text');
this.img = getElementsByClass(this.obj, 'img', 'diapo');
this.bkg = document.createElement('div');
this.bkg.className = 'backgroundText';
this.obj.insertBefore(this.bkg, this.txt);
if (N == 0) this.obj.style.borderLeft = 'none';
this.obj.style.left = Math.floor(this.x0) + 'px';
setOpacity(this.img, parent.oP);
/* ==== mouse events ==== */
this.obj.parent = this;
this.obj.onmouseover = function() {
this.parent.over();
return false;
}
}
Slide.prototype = {
/* ==== target positions ==== */
calc : function() {
var that = this.parent;
// left slides
for (var i = 0; i <= this.N; i++) {
that.slides[i].x1 = i * that.Z;
}
// right slides
for (var i = this.N + 1; i < that.NF; i++) {
that.slides[i].x1 = that.wh - (that.NF - i) * that.Z;
}
},
/* ==== HTML animation : move slides ==== */
move : function() {
var that = this.parent;
var s = (this.x1 - this.x0) / that.S;
/* ==== lateral slide ==== */
if (this.N && Math.abs(s) > .5) {
this.obj.style.left = Math.floor(this.x0 += s) + 'px';
}
/* ==== vertical text ==== */
var v = (this.N < that.NF - 1) ? that.slides[this.N + 1].x0 - this.x0 : that.wh - this.x0;
if (Math.abs(v - this.v) > .5) {
this.bkg.style.top = this.txt.style.top = Math.floor(2 + that.ht - (v - that.Z) * that.iH * that.r) + 'px';
this.v = v;
this.cpt++;
} else {
if (!this.pro) {
/* ==== adjust speed ==== */
this.pro = true;
var tps = new Date() - this.start;
if(this.cpt > 1) {
that.S = Math.max(2, (28 / (tps / this.cpt)) * that.S0);
}
}
}
if (!this.loaded) {
if (this.img.complete) {
this.img.style.visibility = 'visible';
this.loaded = true;
}
}
},
/* ==== light ==== */
over : function () {
this.parent.resize();
this.parent.over = true;
setOpacity(this.parent.view.img, this.parent.oP);
this.parent.view = this;
this.start = new Date();
this.cpt = 0;
this.pro = false;
this.calc();
setOpacity(this.img, 100);
}
}
/* ==== public method - script initialization ==== */
return {
init : function() {
// create instances of sliders here
// parameters : HTMLcontainer name, speed (2 fast - 20 slow), Horizontal ratio, vertical text ratio, opacity
this.s1 = new Slider("slider", 12, 1.84/3, 1/3.2, 70);
setInterval("slider.s1.run();", 16);
}
}
}();
</script>
</head>
<body>
<br>
<div
style="text-align: center;"><font style="font-weight: bold;"
size="5"><span style="font-family: Tahoma;"><a href="رابط
منتداك">الرئيسية</a> <a href="رابط البوابة او رابط
اخر">البوابة</a></span></font><br></div>
<div id="center">
<div id="slider">
<div class="slide">
<img
class="diapo"
src="http://i48.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg" alt=" كلمات
دلالية للموضوع " width="500" height="333"><div class="text">
<span class="title">عنوان الموضوع باختصار</span>
وصف موجز للموضوع. <a href="رابط الموضوع" target="_blank">قرائة المزيد</a><br><br>.
</div>
</div><div class="slide">
<img
class="diapo"
src="http://i48.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg" alt="كلمات
دلالية للموضوع" width="500" height="333"><div class="text">
<span class="title">عنوان الموضوع
</span>
وصف موجز للموضوع. <a href="رابط الموضوع" target="_blank">قرائة المزيد</a><br><br>.
</div>
</div><div class="slide">
<img
class="diapo"
src="http://i48.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg" alt=" كلمات
دلالية للموضوع" width="500" height="354"><div class="text">
<span class="title">عنوان الموضوع</span>
وصف موجز للموضوع . <a href="رابط الموضوع" target="_blank">قرائة المزيد</a><br><br>.
</div>
</div> <div class="slide">
<img
class="diapo"
src="http://i48.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg" alt="كلمات
دلالية للموضوع" width="500" height="334"><div class="text">
<span class="title">عنوان الموضوع</span>
وصف موجز للموضوع. <a href="رابط الموضوع" target="_blank">قرائة المزيد</a><br><br>.
</div>
</div> <div class="slide">
<img
class="diapo"
src="http://i48.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg" alt="كلمات
دلالية للموضوع" width="500" height="334"><div class="text">
<span class="title">عنوان الموضوع</span>
وصف موجز للموضوع. <a href="رابط الموضوع" target="_blank">قرائة المزيد</a><br><br>.
</div>
</div> <div class="slide">
<img
class="diapo"
src="http://i48.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg" alt="كلمات
دلالية للموضوع" width="500" height="334"><div class="text">
<span class="title">عنوان الموضوع</span>
وصف موجز للموضوع. <a href="رابط الموضوع" target="_blank">قرائة المزيد</a><br><br>.
</div>
</div> <div class="slide">
<img
class="diapo"
src="http://i48.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg" alt="كلمات
دلالية للموضوع" width="500" height="334"><div class="text">
<span class="title">عنوان الموضوع</span>
وصف موجز للموضوع. <a href="رابط الموضوع" target="_blank">قرائة المزيد</a><br><br>.
</div>
</div> <div class="slide">
<img
class="diapo"
src="http://i48.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg" alt="كلمات
دلالية للموضوع" width="500" height="334"><div class="text">
<span class="title">عنوان الموضوع</span>
وصف موجز للموضوع. <a href="رابط الموضوع" target="_blank">قرائة المزيد</a><br><br>.
</div>
</div> <div class="slide">
<img
class="diapo"
src="http://i48.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg" alt="كلمات
دلالية للموضوع" width="500" height="334"><div class="text">
<span class="title">عنوان الموضوع</span>
وصف موجز للموضوع. <a href="رابط الموضوع" target="_blank">قرائة المزيد</a><br><br>.
</div>
</div> <div class="slide">
<img
class="diapo"
src="http://i48.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg" alt="كلمات
دلالية للموضوع" width="500" height="334"><div class="text">
<span class="title">عنوان الموضوع</span>
وصف موجز للموضوع. <a href="رابط الموضوع" target="_blank">قرائة المزيد</a><br><br>.
</div>
</div> <div class="slide">
<img
class="diapo"
src="http://i48.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg" alt="كلمات
دلالية للموضوع" width="500" height="334"><div class="text">
<span class="title">عنوان الموضوع</span>
وصف موجز للموضوع. <a href="رابط الموضوع" target="_blank">قرائة المزيد</a><br><br>.
</div>
</div> <div class="slide">
<img
class="diapo"
src="http://i48.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg" alt="كلمات
دلالية للموضوع" width="500" height="334"><div class="text">
<span class="title">عنوان الموضوع</span>
وصف موجز للموضوع. <a href="رابط الموضوع" target="_blank">قرائة المزيد</a><br><br>.
</div>
</div> <div class="slide">
<img
class="diapo"
src="http://i48.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg" alt="كلمات
دلالية للموضوع" width="500" height="334"><div class="text">
<span class="title">عنوان الموضوع</span>
وصف موجز للموضوع. <a href="رابط الموضوع" target="_blank">قرائة المزيد</a><br><br>.
</div>
</div> <div class="slide">
<img
class="diapo"
src="http://i48.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg" alt="كلمات
دلالية للموضوع" width="500" height="334"><div class="text">
<span class="title">عنوان الموضوع</span>
وصف موجز للموضوع. <a href="رابط الموضوع" target="_blank">قرائة المزيد</a><br><br>.
</div>
</div> <div class="slide">
<img
class="diapo"
src="http://i48.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg" alt="كلمات
دلالية للموضوع" width="500" height="334"><div class="text">
<span class="title">عنوان الموضوع</span>
وصف موجز للموضوع. <a href="رابط الموضوع" target="_blank">قرائة المزيد</a><br><br>.
</div>
</div> <div class="slide">
<img
class="diapo"
src="http://i48.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg" alt="كلمات
دلالية للموضوع" width="500" height="334"><div class="text">
<span class="title">عنوان الموضوع</span>
وصف موجز للموضوع. <a href="رابط الموضوع" target="_blank">قرائة المزيد</a><br><br>.
</div>
</div> <div class="slide">
<img
class="diapo"
src="http://i48.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg" alt="كلمات
دلالية للموضوع" width="500" height="334"><div class="text">
<span class="title">عنوان الموضوع</span>
وصف موجز للموضوع. <a href="رابط الموضوع" target="_blank">قرائة المزيد</a><br><br>.
</div>
</div> <div class="slide">
<img
class="diapo"
src="http://i48.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg" alt="كلمات
دلالية للموضوع" width="500" height="334"><div class="text">
<span class="title">عنوان الموضوع</span>
وصف موجز للموضوع. <a href="رابط الموضوع" target="_blank">قرائة المزيد</a><br><br>.
</div>
</div> <div class="slide">
<img
class="diapo"
src="http://i48.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg" alt="كلمات
دلالية للموضوع" width="500" height="334"><div class="text">
<span class="title">عنوان الموضوع</span>
وصف موجز للموضوع. <a href="رابط الموضوع" target="_blank">قرائة المزيد</a><br><br>.
</div>
</div> <div class="slide">
<img
class="diapo"
src="http://i48.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg" alt="كلمات
دلالية للموضوع" width="500" height="334"><div class="text">
<span class="title">عنوان الموضوع</span>
وصف موجز للموضوع. <a href="رابط الموضوع" target="_blank">قرائة المزيد</a><br><br>.
</div>
</div> <div class="slide">
<img
class="diapo"
src="http://i48.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg" alt="كلمات
دلالية للموضوع" width="500" height="334"><div class="text">
<span class="title">عنوان الموضوع</span>
وصف موجز للموضوع. <a href="رابط الموضوع" target="_blank">قرائة المزيد</a><br><br>.
</div>
</div> <div class="slide">
<img
class="diapo"
src="http://i48.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg" alt="كلمات
دلالية للموضوع" width="500" height="334"><div class="text">
<span class="title">عنوان الموضوع</span>
وصف موجز للموضوع. <a href="رابط الموضوع" target="_blank">قرائة المزيد</a><br><br>.
</div>
</div> <div class="slide">
<img
class="diapo"
src="http://i48.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg" alt="كلمات
دلالية للموضوع" width="500" height="334"><div class="text">
<span class="title">عنوان الموضوع</span>
وصف موجز للموضوع. <a href="رابط الموضوع" target="_blank">قرائة المزيد</a><br><br>.
</div>
</div> <div class="slide">
<img
class="diapo"
src="http://i48.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg" alt="كلمات
دلالية للموضوع" width="500" height="334"><div class="text">
<span class="title">عنوان الموضوع</span>
وصف موجز للموضوع. <a href="رابط الموضوع" target="_blank">قرائة المزيد</a><br><br>.
</div>
</div> <div class="slide">
<img
class="diapo"
src="http://i48.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg" alt="كلمات
دلالية للموضوع" width="500" height="334"><div class="text">
<span class="title">عنوان الموضوع</span>
وصف موجز للموضوع. <a href="رابط الموضوع" target="_blank">قرائة المزيد</a><br><br>.
</div>
</div> <div class="slide">
<img
class="diapo"
src="http://i48.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg" alt="كلمات
دلالية للموضوع" width="500" height="334"><div class="text">
<span class="title">عنوان الموضوع</span>
وصف موجز للموضوع. <a href="رابط الموضوع" target="_blank">قرائة المزيد</a><br><br>.
</div>
</div> <div class="slide">
<img
class="diapo"
src="http://i48.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg" alt="كلمات
دلالية للموضوع" width="500" height="334"><div class="text">
<span class="title">عنوان الموضوع</span>
وصف موجز للموضوع. <a href="رابط الموضوع" target="_blank">قرائة المزيد</a><br><br>.
</div>
</div> <div class="slide">
<img
class="diapo"
src="http://i48.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg" alt="كلمات
دلالية للموضوع" width="500" height="334"><div class="text">
<span class="title">عنوان الموضوع</span>
وصف موجز للموضوع. <a href="رابط الموضوع" target="_blank">قرائة المزيد</a><br><br>.
</div>
</div> <div class="slide">
<img
class="diapo"
src="http://i48.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg" alt="كلمات
دلالية للموضوع" width="500" height="334"><div class="text">
<span class="title">عنوان الموضوع</span>
وصف موجز للموضوع. <a href="رابط الموضوع" target="_blank">قرائة المزيد</a><br><br>.
</div>
</div> <div class="slide">
<img
class="diapo"
src="http://i48.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg" alt="كلمات
دلالية للموضوع" width="500" height="335"><div class="text">
وصف موجز للموضوع. <a href="رابط الموضوع" target="_blank">شقرائة المزيد</a><br><br>.
</div>
</div>
<div class="slide">
<img
class="diapo"
src="http://i48.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg" alt="كلمات
دلالية للموضوع " width="500" height="333"><div class="text">
<span class="title">عنوان الموضوع</span>
وصف موجز للموضوع. <a href="رابط الموضوع" target="_blank">قرائة المزيد</a><br><br>.
</div>
</div>
<div class="slide">
<img
class="diapo"
src="http://i48.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg" alt="كلمات
دلالية للموضوع" width="500" height="333"><div class="text">
<span class="title">عنوان الموضوع</span>
وصف موجز للموضوع. <a href="رابط الموضوع" target="_blank">قرائة المزيد</a><br><br>
</div>
</div>
</div>
<script type="text/javascript">
/* ==== start script ==== */
slider.init();
</script>
</body>
</html>رد: طلب كود سلايد شو الأربعاء 15 يناير 2014 - 11:07رد: طلب كود سلايد شو الجمعة 17 يناير 2014 - 11:41رد: طلب كود سلايد شو الأحد 19 يناير 2014 - 18:51
جميع الحقوق محفوظة لدليل الاشهار العربي
