Текст, зураг, хүснэгт гэх мэт агуулга бүхий агуулгыг оруулах боломжтой HTML хуудсанд блок үүсгэх үүднээс уг шошгыг вэб дизайн хийхэд идэвхтэй ашигладаг.
Зааварчилгаа
1-р алхам
Ашигласан тохиолдолд төгсгөлийн шошго шаардлагатай. Үүнийг дараахь шинж чанаруудтай хамт ашиглаж болно.
- зэрэгцүүлэх - зэрэгцүүлэх (зүүн, төв, баруун, зөвтгөх), жишээлбэл, Текст;
- анги - ангийн нэр (Текст);
- id - html хаяг танигчийн нэр;
- хэв маягийн хэв маягийн чиглэл;
- гарчиг - зөвлөмж.
Алхам 2
Блок ашиглахдаа хэв маягийн хуудсыг ашиглах нь зүйтэй. Жишээлбэл, хэрэв та хуудсан дээрх агуулгатай хоёр өөр блок үүсгэхийг хүсвэл код нь иймэрхүү харагдах болно:
.block1 {
өргөн: 500px;
өндөр: 200px;
дэвсгэр: Шар;
дүүргэлт: 0px;
баруун тал: 0px;
хил: хатуу 0px хар;
хөвөх: зүүн;
}
.block2 {
өргөн: 200px;
өндөр: 500;
дэвсгэр: Ногоон;
дүүргэлт: 0px;
баруун тал: 0px;
хил: хатуу 0px хар;
хөвөх: баруун;
}
Шар блок нь 500px өргөн, 200px урттай анхны блок юм.
Ногоон блок нь 200px өргөн, 500px урттай анхны блок юм.
Алхам 3
Блокуудын баруун / зүүн талын тохируулгыг хэв маягийг ашиглан тохируулж болно:
.leftimg {
хөвөх: зүүн;
маржин: 5px 15px 7px 0;
}
.rightimg {
хөвөх: баруун;
маржин: 7px 0 7px 7px;
}
Алхам 4
Шошгоны тусламжтайгаар та ээлжлэн солигдох зургийг зохион байгуулж болно.
div # rotator {байршил: харьцангуй; өндөр: 150px; захын зүүн: 15px;}
div # rotator ul li {хөвөх: зүүн; албан тушаал: туйлын; жагсаалтын хэв маяг: байхгүй;}
div # rotator ul li.show {z-index: 500;}
theRotator () функц {
$ ('div # rotator ul li'). css ({тунгалаг байдал: 0.0});
$ ('div # rotator ul li: first'). css ({opacity: 1.0});
setInterval ('эргүүлэх ()', 5000);
}
функцийг эргүүлэх () {
var current = ($ ('div # rotator ul li.show')? $ ('div # rotator ul li.show'): $ ('div # rotator ul li: first'));
var next = ((current.next (). length)? ((current.next (). hasClass ('show'))? $ ('div # rotator ul li: first'): current.next ()): $ ('div # rotator ul li: first'));
// var sibs = current.siblings ();
// var rndNum = Math.floor (Math.random () * sibs.length);
// var next = $ (sibs [rndNum]);
next.css ({тунгалаг байдал: 0.0})
.addClass ('show')
.animate ({тунгалаг байдал: 1.0}, 1000);
current.animate ({тунгалаг байдал: 0.0}, 1000)
.removeClass ('show');
};
$ (баримт бичиг). бэлэн (функц () {
theRotator ();
});
