slide ảnh trượt lên xuống

Demo

• 
• 
• 
• 
• 

• 1.........
  11........
• 2......
  22..........
• 3....
  33.......
• 4....
  44....
• 5...
  55...

• 
• 
• 
• 
• 

Code

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
 {MARGIN-TOP: 0px; PADDING-LEFT: 0px}
BODY { MARGIN-TOP: 10px; SCROLLBAR-FACE-COLOR: #397cb3; BACKGROUND: url(images/bg.jpg) #2a3442 repeat-x; MARGIN-BOTTOM: 10px; SCROLLBAR-HIGHLIGHT-COLOR: #3d85bf; SCROLLBAR-SHADOW-COLOR: #185b95; SCROLLBAR-3DLIGHT-COLOR: #4789bf; SCROLLBAR-ARROW-COLOR: #ffffff; SCROLLBAR-TRACK-COLOR: #2a3442; SCROLLBAR-DARKSHADOW-COLOR: #28323f}
.jsimg { WIDTH: 640px; HEIGHT: 291px}
#ifocus {BACKGROUND: #f8f8f8; WIDTH: 700px; HEIGHT: 291px}
#ifocus_pic {BORDER-RIGHT: #fff 0px solid; BORDER-TOP: #fff 0px solid; DISPLAY: inline; FLOAT: left; OVERFLOW: hidden; BORDER-LEFT: #fff 0px solid; WIDTH: 541px; BORDER-BOTTOM: #fff 0px solid; POSITION: relative; HEIGHT: 290px}
#ifocus_piclist {POSITION: absolute}
#ifocus_piclist LI {OVERFLOW: hidden; WIDTH: 540px; HEIGHT: 290px}
#ifocus_piclist IMG {BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; WIDTH: 540px; BORDER-BOTTOM: 0px; HEIGHT: 290px}
#ifocus_btn {DISPLAY: inline; FLOAT: right; MARGIN: 3px 9px 0px 0px; WIDTH: 91px; POSITION: absolute}
#ifocus_btn LI {FILTER: alpha(opacity=50); WIDTH: 91px; CURSOR: pointer; LIST-STYLE-TYPE: none; HEIGHT: 57px; opacity: 0.5; moz-opacity: 0.5}
#ifocus_btn IMG {MARGIN: 7px 0px 0px 11px; WIDTH: 75px; HEIGHT: 45px}
#ifocus_btn .current {BACKGROUND: url(images/fed/ifocus_btn_bg.gif) no-repeat; FILTER: alpha(opacity=100); opacity: 1; moz-opacity: 1}
#ifocus_opdiv {BACKGROUND: #000; FILTER: alpha(opacity=50); LEFT: 0px; WIDTH: 560px; BOTTOM: 0px; POSITION: absolute; HEIGHT: 80px; opacity: 0.6; moz-opacity: 0.5}
#ifocus_tx {LEFT: 8px; COLOR: #fff; BOTTOM: 5px; POSITION: absolute}
#ifocus_tx .normal {DISPLAY: none}
.title_js {FONT-WEIGHT: bold; FONT-SIZE: 16px; COLOR: yellow; FONT-FAMILY: Arial, Helvetica, sans-serif}
.content_js {FONT-SIZE: 11px; COLOR: #fff; FONT-FAMILY: Arial, Helvetica, sans-serif}
.date {FONT-SIZE: 11px; COLOR: #adbac5; FONT-FAMILY: Arial}
A.date:link {COLOR: #adbac5; TEXT-DECORATION: none}
A.date:visited {COLOR: #adbac5; TEXT-DECORATION: none}
A.date:hover {COLOR: #bad0e3; TEXT-DECORATION: none}
.login_text {FONT-SIZE: 11px; COLOR: #ababab; FONT-FAMILY: Arial}
A.login_text:link {COLOR: #ababab; TEXT-DECORATION: none}
A.login_text:visited {COLOR: #9d9d9d; TEXT-DECORATION: none}
A.login_text:hover {COLOR: #c4c4c4; TEXT-DECORATION: underline}
.div_class_bg {BORDER-RIGHT: 0px; PADDING-RIGHT: 4px; BORDER-TOP: 0px; PADDING-LEFT: 4px; FONT-WEIGHT: bold; FONT-SIZE: 11px; BACKGROUND: url(images/div_top_bg.jpg); PADDING-BOTTOM: 4px; BORDER-LEFT: 0px; WIDTH: 179px; COLOR: #ffffff; PADDING-TOP: 4px; BORDER-BOTTOM: 0px; FONT-FAMILY: Arial; HEIGHT: 24px}
.div_bg {BORDER-RIGHT: 0px; PADDING-RIGHT: 4px; BORDER-TOP: 0px; PADDING-LEFT: 4px; FONT-SIZE: 11px; BACKGROUND: url(images/div_bg.jpg); PADDING-BOTTOM: 4px; BORDER-LEFT: 0px; WIDTH: 179px; PADDING-TOP: 4px; BORDER-BOTTOM: 0px; FONT-FAMILY: Arial; HEIGHT: 24px}
A.div_bg_link:link {COLOR: #ffffff; TEXT-DECORATION: none}
A.div_bg_link:visited {COLOR: #a6a6a6; TEXT-DECORATION: none}
A.div_bg_link:hover {COLOR: #c7c7c7; TEXT-DECORATION: none}
.shoutbox {BORDER-RIGHT: 0px; PADDING-RIGHT: 1px; BORDER-TOP: 0px; PADDING-LEFT: 1px; FONT-SIZE: 11px; BACKGROUND: url(images/div_sb_bg.jpg) #505050 no-repeat; PADDING-BOTTOM: 1px; BORDER-LEFT: 0px; WIDTH: 179px; PADDING-TOP: 1px; BORDER-BOTTOM: 0px; FONT-FAMILY: Arial; HEIGHT: 24px}
.shout {FONT-SIZE: 11px; COLOR: #9d9d9d; FONT-FAMILY: Arial}
A.shout:link {COLOR: #c7c7c7; TEXT-DECORATION: none}
A.shout:visited {COLOR: #c7c7c7; TEXT-DECORATION: none}
A.shout:hover {COLOR: #cfcfcf; TEXT-DECORATION: none}
.shout_date {FONT-SIZE: 9px; COLOR: #9d9d9d; FONT-FAMILY: Arial}
.featured {FONT-SIZE: 11px; COLOR: #9d9d9d; FONT-FAMILY: Arial}
.featured_sub {FONT-SIZE: 11px; COLOR: #e5e5e5; FONT-FAMILY: Arial}
A.featured_sub:link {FONT-WEIGHT: bold; COLOR: #ffffff; TEXT-DECORATION: none}
A.featured_sub:visited {FONT-WEIGHT: bold; COLOR: #ffffff; TEXT-DECORATION: none}
A.featured_sub:hover {FONT-WEIGHT: bold; COLOR: #cfcfcf; TEXT-DECORATION: none}
.latest_news {FONT-SIZE: 11px; COLOR: #707070; FONT-FAMILY: Arial}
A.latest_news:link {FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #004b94; TEXT-DECORATION: none}
A.latest_news:visited {FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #004b94; TEXT-DECORATION: none}
A.latest_news:hover {FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #4a6f94; TEXT-DECORATION: none}
.latest_sub {FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #004b94; FONT-FAMILY: Arial}
.featured_list {FONT-SIZE: 10px; COLOR: #808080; FONT-FAMILY: Arial}
A.featured_list:link {FONT-SIZE: 11px; COLOR: #000000; TEXT-DECORATION: none}
A.featured_list:visited {FONT-SIZE: 11px; COLOR: #000000; TEXT-DECORATION: none}
A.featured_list:hover {FONT-SIZE: 11px; COLOR: red; TEXT-DECORATION: none}
.nowplaying {FONT-SIZE: 11px; COLOR: #004b94; FONT-FAMILY: Arial}
.rating_large {FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #004b94; FONT-FAMILY: Arial}
A.rating:link {FONT-SIZE: 11px; COLOR: #707070; FONT-FAMILY: Arial; TEXT-DECORATION: none}
A.rating:visited {FONT-SIZE: 11px; COLOR: #707070; FONT-FAMILY: Arial; TEXT-DECORATION: none}
A.rating:hover {FONT-SIZE: 11px; COLOR: #000000; FONT-FAMILY: Arial; TEXT-DECORATION: none}
.rating_small {FONT-SIZE: 10px; COLOR: #6a6a6a; FONT-FAMILY: Arial}
.poll {FONT-SIZE: 11px; COLOR: #707070; FONT-FAMILY: Arial}
A.poll:link {FONT-SIZE: 11px; COLOR: #707070; TEXT-DECORATION: none}
A.poll:visited {FONT-SIZE: 11px; COLOR: #707070; TEXT-DECORATION: none}
A.poll:hover {FONT-SIZE: 11px; COLOR: #707070; TEXT-DECORATION: underline}
.pollimg {BORDER-RIGHT: #c8c8c8 1px solid; BORDER-TOP: #c8c8c8 1px solid; BORDER-LEFT: #c8c8c8 1px solid; BORDER-BOTTOM: #c8c8c8 1px solid}
.pollimg_p {BORDER-RIGHT: #c8c8c8 1px solid; BORDER-TOP: #c8c8c8 1px solid; BORDER-LEFT: #c8c8c8 1px solid; BORDER-BOTTOM: #c8c8c8 1px solid}
.footer {FONT-SIZE: 11px; COLOR: #566575; FONT-FAMILY: Arial}
A.footer:link {FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #919fb0; TEXT-DECORATION: none}
A.footer:visited {FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #919fb0; TEXT-DECORATION: none}
A.footer:hover {FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #566575; TEXT-DECORATION: underline}
.footerb {FONT-SIZE: 11px; COLOR: #5f7691; FONT-FAMILY: Arial}
.footerc {FONT-SIZE: 11px; COLOR: #727272; FONT-FAMILY: Arial}
A.footerc:link {COLOR: #949494; TEXT-DECORATION: none}
A.footerc:visited {COLOR: #949494; TEXT-DECORATION: none}
A.footerc:hover {COLOR: #727272; TEXT-DECORATION: none}
.texthuge {FONT-WEIGHT: bold; FONT-SIZE: 20px; COLOR: #165794; FONT-FAMILY: Arial; TEXT-DECORATION: none}
H1 {FONT-WEIGHT: bold; FONT-SIZE: 20px; COLOR: #165794; FONT-FAMILY: Arial; TEXT-DECORATION: none}
.breadcrumb {FONT-SIZE: 11px; COLOR: #6a6a6a; FONT-FAMILY: Arial}
A.breadcrumb:link {COLOR: #6a6a6a; TEXT-DECORATION: none}
A.breadcrumb:visited {COLOR: #6a6a6a; TEXT-DECORATION: none}
A.breadcrumb:hover {COLOR: #2c5c87; TEXT-DECORATION: none}
.content {FONT-SIZE: 12px; COLOR: #000000; FONT-FAMILY: Tahoma; TEXT-DECORATION: none}
A.content:link {COLOR: #666666; TEXT-DECORATION: underline}
A.content:visited {COLOR: #666666; TEXT-DECORATION: underline}
A.content:hover {COLOR: #777777; TEXT-DECORATION: none}
.content_error {FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #e50000; FONT-FAMILY: Arial; TEXT-DECORATION: none}
.divtitle {FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #004b94; FONT-FAMILY: Arial}
.adsplit {PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; WIDTH: 100%; PADDING-TOP: 5px}
.ads {FONT-WEIGHT: bold; FONT-SIZE: 10px; BACKGROUND: url(images/featured_bg2.jpg); COLOR: #e5e5e5; FONT-FAMILY: Arial}
A.adsplit:link {FONT-WEIGHT: bold; COLOR: #ffffff; TEXT-DECORATION: none}
A.adsplit:visited {FONT-WEIGHT: bold; COLOR: #ffffff; TEXT-DECORATION: none}
A.adsplit:hover {FONT-WEIGHT: bold; COLOR: #cfcfcf; TEXT-DECORATION: none}
.contentlight {FONT-SIZE: 11px; COLOR: #8a8a8a; FONT-FAMILY: Arial; TEXT-DECORATION: none}
A.contentlight:link {COLOR: #7b7b7b; TEXT-DECORATION: none}
A.contentlight:visited {COLOR: #7b7b7b; TEXT-DECORATION: none}
A.contentlight:hover {COLOR: #000000; TEXT-DECORATION: underline}
.fieldset {BORDER-RIGHT: #c0c0c0 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #c0c0c0 1px solid; PADDING-LEFT: 0px; BACKGROUND: #ffffff; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: #c0c0c0 1px solid; PADDING-TOP: 0px; BORDER-BOTTOM: #c0c0c0 1px solid}
.fieldset2 {BORDER-RIGHT: #ffffff 1px outset; PADDING-RIGHT: 0px; BORDER-TOP: #ffffff 1px outset; PADDING-LEFT: 0px; BACKGROUND: #ffffff; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: #ffffff 1px outset; PADDING-TOP: 0px; BORDER-BOTTOM: #ffffff 1px outset}
A.fieldset2_link:link {FONT-SIZE: 11px; COLOR: #004b94; TEXT-DECORATION: none}
A.fieldset2_link:visited {FONT-SIZE: 11px; COLOR: #004b94; TEXT-DECORATION: none}
A.fieldset2_link:hover {FONT-SIZE: 11px; COLOR: #000000; TEXT-DECORATION: underline}
.game_nav_title {FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #000000; FONT-FAMILY: Arial}
A.game_nav_title:link {COLOR: #ff0000; TEXT-DECORATION: none}
A.game_nav_title:visited {COLOR: #333399; TEXT-DECORATION: none}
A.game_nav_title:hover {COLOR: #333399; TEXT-DECORATION: none}
.game_nav {FONT-SIZE: 11px; COLOR: #000000; FONT-FAMILY: Arial}
A.game_nav:link {COLOR: #333399; TEXT-DECORATION: none}
A.game_nav:visited {COLOR: #333399; TEXT-DECORATION: none}
A.game_nav:hover {COLOR: #ff0000; TEXT-DECORATION: none}
.comment {FONT-SIZE: 11px; COLOR: #707070; FONT-FAMILY: Arial}
A.comment:link {FONT-SIZE: 12px; COLOR: #004b94; TEXT-DECORATION: underline}
A.comment:visited {FONT-SIZE: 12px; COLOR: #004b94; TEXT-DECORATION: underline}
A.comment:hover {FONT-SIZE: 12px; COLOR: #004b94; TEXT-DECORATION: underline}
.headertitle {FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #ffffff; FONT-FAMILY: Arial; TEXT-DECORATION: none}
.headertitle_small {FONT-SIZE: 11px; COLOR: #ffffff; FONT-FAMILY: Arial; TEXT-DECORATION: none}
.right {FONT-SIZE: 11px; COLOR: #707070; FONT-FAMILY: Arial}
A.right:link {FONT-SIZE: 11px; COLOR: #28577f; FONT-FAMILY: Arial; TEXT-DECORATION: none}
A.right:visited {FONT-SIZE: 11px; COLOR: #28577f; FONT-FAMILY: Arial; TEXT-DECORATION: none}
A.right:hover {FONT-SIZE: 11px; COLOR: #25415b; FONT-FAMILY: Arial; TEXT-DECORATION: underline}
.spacer {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; HEIGHT: 2px}
.file_input {BORDER-RIGHT: #a8b4b8 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #a8b4b8 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 11px; BACKGROUND: url(images/input_bg.jpg) #f3fdff; PADDING-BOTTOM: 2px; BORDER-LEFT: #a8b4b8 1px solid; COLOR: #000000; PADDING-TOP: 2px; BORDER-BOTTOM: #a8b4b8 1px solid; FONT-FAMILY: Arial; HEIGHT: 18px}
.input {BORDER-RIGHT: #a8b4b8 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #a8b4b8 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 11px; BACKGROUND: url(images/input_bg.jpg) #f3fdff; PADDING-BOTTOM: 2px; BORDER-LEFT: #a8b4b8 1px solid; WIDTH: 158px; COLOR: #000000; PADDING-TOP: 2px; BORDER-BOTTOM: #a8b4b8 1px solid; FONT-FAMILY: Arial; HEIGHT: 18px}
.dropdown {BORDER-RIGHT: #a8b4b8 1px solid; BORDER-TOP: #a8b4b8 1px solid; FONT-SIZE: 11px; BACKGROUND: #f3fdff; BORDER-LEFT: #a8b4b8 1px solid; COLOR: #000000; BORDER-BOTTOM: #a8b4b8 1px solid; FONT-FAMILY: Arial}
.signature {FONT-SIZE: 11px; COLOR: #707070; FONT-FAMILY: Arial}
.padding1 {BORDER-RIGHT: 0px; PADDING-RIGHT: 1px; BORDER-TOP: 0px; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; MARGIN: 0px; BORDER-LEFT: 0px; PADDING-TOP: 1px; BORDER-BOTTOM: 0px}
.padding2 {BORDER-RIGHT: 0px; PADDING-RIGHT: 2px; BORDER-TOP: 0px; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; MARGIN: 0px; BORDER-LEFT: 0px; PADDING-TOP: 2px; BORDER-BOTTOM: 0px}
.padding3 {BORDER-RIGHT: 0px; PADDING-RIGHT: 3px; BORDER-TOP: 0px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; MARGIN: 0px; BORDER-LEFT: 0px; PADDING-TOP: 3px; BORDER-BOTTOM: 0px}
.padding5 {BORDER-RIGHT: 0px; PADDING-RIGHT: 5px; BORDER-TOP: 0px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; MARGIN: 0px; BORDER-LEFT: 0px; PADDING-TOP: 5px; BORDER-BOTTOM: 0px}
.padding10 {BORDER-RIGHT: 0px; PADDING-RIGHT: 10px; BORDER-TOP: 0px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; MARGIN: 0px; BORDER-LEFT: 0px; PADDING-TOP: 10px; BORDER-BOTTOM: 0px}
.textarea_class {BORDER-RIGHT: #a8b4b8 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #a8b4b8 1px solid; PADDING-LEFT: 5px; SCROLLBAR-FACE-COLOR: #f3fdff; FONT-SIZE: 11px; BACKGROUND: #f3fdff; PADDING-BOTTOM: 5px; SCROLLBAR-HIGHLIGHT-COLOR: #f3fdff; BORDER-LEFT: #a8b4b8 1px solid; WIDTH: 100%; SCROLLBAR-SHADOW-COLOR: #f3fdff; COLOR: #000000; SCROLLBAR-3DLIGHT-COLOR: #f3fdff; SCROLLBAR-ARROW-COLOR: #000000; PADDING-TOP: 5px; SCROLLBAR-TRACK-COLOR: #f3fdff; BORDER-BOTTOM: #a8b4b8 1px solid; FONT-FAMILY: Arial; SCROLLBAR-DARKSHADOW-COLOR: #f3fdff}
.textbox_class {BORDER-RIGHT: #a8b4b8 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #a8b4b8 1px solid; PADDING-LEFT: 5px; SCROLLBAR-FACE-COLOR: #f3fdff; FONT-SIZE: 11px; BACKGROUND: #f3fdff; PADDING-BOTTOM: 5px; SCROLLBAR-HIGHLIGHT-COLOR: #f3fdff; BORDER-LEFT: #a8b4b8 1px solid; WIDTH: 100%; SCROLLBAR-SHADOW-COLOR: #f3fdff; COLOR: #000000; SCROLLBAR-3DLIGHT-COLOR: #f3fdff; SCROLLBAR-ARROW-COLOR: #000000; PADDING-TOP: 5px; SCROLLBAR-TRACK-COLOR: #f3fdff; BORDER-BOTTOM: #a8b4b8 1px solid; FONT-FAMILY: Arial; SCROLLBAR-DARKSHADOW-COLOR: #f3fdff}
.nav {FONT-SIZE: 11px; COLOR: #7e7e7e; FONT-FAMILY: Arial}
A.nav:link {COLOR: #165993; TEXT-DECORATION: underline}
A.nav:visited {COLOR: #165993; TEXT-DECORATION: underline}
A.nav:hover {COLOR: #165993; TEXT-DECORATION: none}
.browse {FONT-SIZE: 11px; COLOR: #7e7e7e; FONT-FAMILY: Arial}
A.browse:link {COLOR: #165993; TEXT-DECORATION: underline}
A.browse:visited {COLOR: #165993; TEXT-DECORATION: underline}
A.browse:hover {COLOR: #165993; TEXT-DECORATION: none}
.hr {BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; COLOR: #cfcfcf; BORDER-BOTTOM: 0px; HEIGHT: 1px; BACKGROUND-COLOR: #cfcfcf}
.release_red {FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #dc0000; FONT-FAMILY: Arial; TEXT-DECORATION: none}
.quote {BORDER-RIGHT: #c0c0c0 1px dashed; PADDING-RIGHT: 10px; BORDER-TOP: #c0c0c0 1px dashed; PADDING-LEFT: 10px; FONT-SIZE: 11px; BACKGROUND: #efefef; PADDING-BOTTOM: 10px; BORDER-LEFT: #c0c0c0 1px dashed; COLOR: #000000; PADDING-TOP: 10px; BORDER-BOTTOM: #c0c0c0 1px dashed; FONT-FAMILY: Arial}
.search {BORDER-RIGHT: 0px; PADDING-RIGHT: 4px; BORDER-TOP: 0px; PADDING-LEFT: 4px; FONT-SIZE: 11px; BACKGROUND: url(images/search.jpg); PADDING-BOTTOM: 4px; BORDER-LEFT: 0px; WIDTH: 170px; COLOR: #666666; PADDING-TOP: 4px; BORDER-BOTTOM: 0px; FONT-FAMILY: Arial; HEIGHT: 21px}
.frontendpopup {BORDER-RIGHT: 0px; PADDING-RIGHT: 3px; BORDER-TOP: 0px; PADDING-LEFT: 3px; BACKGROUND: #ffffff; PADDING-BOTTOM: 3px; BORDER-LEFT: 0px; WIDTH: 100%; PADDING-TOP: 3px; BORDER-BOTTOM: 0px}
.error {PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-WEIGHT: bold; FONT-SIZE: 12px; PADDING-BOTTOM: 5px; COLOR: red; PADDING-TOP: 5px; FONT-FAMILY: Arial}
.select {FONT-SIZE: 11px; WIDTH: 145px; COLOR: #000000; FONT-FAMILY: Arial}
.adrepeat {BACKGROUND: url(images/adbg.jpg) #ffffff repeat-x left top; align: center}
.tablereg {BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px; BORDER-COLLAPSE: collapse; spacing: 0px}
.tdreg {BORDER-RIGHT: 0px; PADDING-RIGHT: 0px; BORDER-TOP: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; BORDER-LEFT: 0px; PADDING-TOP: 0px; BORDER-BOTTOM: 0px; BORDER-COLLAPSE: collapse; spacing: 0px}
.featured {FONT-SIZE: 11px; COLOR: #868686; FONT-FAMILY: Arial}
.pagenav {FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #000000; FONT-FAMILY: Arial; TEXT-DECORATION: none}
.texthuger {FONT-WEIGHT: bold; FONT-SIZE: 50px; COLOR: #000000; FONT-FAMILY: Arial; TEXT-DECORATION: none}
.content_large {FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #000000; FONT-FAMILY: Arial; TEXT-DECORATION: none}
.content_large_bright {FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #0077cc; FONT-FAMILY: Arial; TEXT-DECORATION: none}
.forumthread {FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #000000; FONT-FAMILY: Arial; TEXT-DECORATION: none}
A.forumthread:visited {COLOR: #787878}
A.forumthread:hover {COLOR: #000000}
A.forumthread:link {COLOR: #28577f}
.forumjump {FONT-SIZE: 10px; COLOR: #8a8a8a; FONT-FAMILY: Arial}
.slideshow {FONT-SIZE: 11px; COLOR: #8a8a8a; FONT-FAMILY: Arial}
.slideshowb {FONT-SIZE: 11px; COLOR: #cdcdcd; FONT-FAMILY: Arial}
.popupmessage {BORDER-RIGHT: #dadada 1px dashed; PADDING-RIGHT: 10px; BORDER-TOP: #dadada 1px dashed; PADDING-LEFT: 10px; BACKGROUND: #f8f8f8; PADDING-BOTTOM: 10px; BORDER-LEFT: #dadada 1px dashed; PADDING-TOP: 10px; BORDER-BOTTOM: #dadada 1px dashed}
A.latest:hover {COLOR: #767676; TEXT-DECORATION: none}
A.content_large:hover {COLOR: #656565; TEXT-DECORATION: none}
A.content:hover {COLOR: #656565; TEXT-DECORATION: none}
#lightbox {Z-INDEX: 100; LEFT: 0px; WIDTH: 100%; LINE-HEIGHT: 0; POSITION: absolute; TEXT-ALIGN: center}
#lightbox A IMG {BORDER-RIGHT: medium none; BORDER-TOP: medium none; BORDER-LEFT: medium none; BORDER-BOTTOM: medium none}
#outerImageContainer {MARGIN: 0px auto; WIDTH: 250px; POSITION: relative; HEIGHT: 250px; BACKGROUND-COLOR: #fff}
#imageContainer {PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; PADDING-TOP: 10px}
#loading {LEFT: 0%; WIDTH: 100%; LINE-HEIGHT: 0; POSITION: absolute; TOP: 40%; HEIGHT: 25%; TEXT-ALIGN: center}
#hoverNav {Z-INDEX: 10; LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px; HEIGHT: 100%}
UNKNOWN {LEFT: 0px}
#hoverNav A {outline: none}
#prevLink {DISPLAY: block; BACKGROUND: url(../images/blank.gif) no-repeat; WIDTH: 49%; HEIGHT: 100%}
#nextLink {DISPLAY: block; BACKGROUND: url(../images/blank.gif) no-repeat; WIDTH: 49%; HEIGHT: 100%}
#prevLink {LEFT: 0px; FLOAT: left}
#nextLink {RIGHT: 0px; FLOAT: right}
#prevLink:hover {BACKGROUND: url(../images/prevlabel.gif) no-repeat left 15%}
#prevLink:hover {BACKGROUND: url(../images/prevlabel.gif) no-repeat left 15%}
#nextLink:hover {BACKGROUND: url(../images/nextlabel.gif) no-repeat right 15%}
#nextLink:hover {BACKGROUND: url(../images/nextlabel.gif) no-repeat right 15%}
#imageDataContainer {MARGIN: 0px auto; FONT: 10px/1.4em Verdana, Helvetica, sans-serif; OVERFLOW: auto; WIDTH: 100%; BACKGROUND-COLOR: #fff}
#imageData {PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 0px; COLOR: #666; PADDING-TOP: 0px}
#imageData #imageDetails {FLOAT: left; WIDTH: 70%; TEXT-ALIGN: left}
#imageData #caption {FONT-WEIGHT: bold}
#imageData #numberDisplay {CLEAR: left; DISPLAY: block; PADDING-BOTTOM: 1em}
#imageData #bottomNavClose {FLOAT: right; PADDING-BOTTOM: 0.7em; WIDTH: 66px}
#overlay {Z-INDEX: 90; LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px; HEIGHT: 500px; BACKGROUND-COLOR: #000}
</style>
<SCRIPT type=text/javascript>
function $(id) { return document.getElementById(id); }
function addLoadEvent(func){
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function(){
oldonload();
func();
}
}
}
function moveElement(elementID,final_x,final_y,interval) {
  if (!document.getElementById) return false;
  if (!document.getElementById(elementID)) return false;
  var elem = document.getElementById(elementID);
  if (elem.movement) {
    clearTimeout(elem.movement);
  }
  if (!elem.style.left) {
    elem.style.left = "0px";
  }
  if (!elem.style.top) {
    elem.style.top = "0px";
  }
  var xpos = parseInt(elem.style.left);
  var ypos = parseInt(elem.style.top);
  if (xpos == final_x && ypos == final_y) {
return true;
  }
  if (xpos < final_x) {
    var dist = Math.ceil((final_x - xpos)/10);
    xpos = xpos + dist;
  }
  if (xpos > final_x) {
    var dist = Math.ceil((xpos - final_x)/10);
    xpos = xpos - dist;
  }
  if (ypos < final_y) {
    var dist = Math.ceil((final_y - ypos)/10);
    ypos = ypos + dist;
  }
  if (ypos > final_y) {
    var dist = Math.ceil((ypos - final_y)/10);
    ypos = ypos - dist;
  }
  elem.style.left = xpos + "px";
  elem.style.top = ypos + "px";
  var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
  elem.movement = setTimeout(repeat,interval);
}
function classNormal(iFocusBtnID,iFocusTxID){
var iFocusBtns= $(iFocusBtnID).getElementsByTagName('li');
var iFocusTxs = $(iFocusTxID).getElementsByTagName('li');
for(var i=0; i<iFocusBtns.length; i++) {
iFocusBtns[i].className='normal';
iFocusTxs[i].className='normal';
}
}
function classCurrent(iFocusBtnID,iFocusTxID,n){
var iFocusBtns= $(iFocusBtnID).getElementsByTagName('li');
var iFocusTxs = $(iFocusTxID).getElementsByTagName('li');
iFocusBtns[n].className='current';
iFocusTxs[n].className='current';
}
function iFocusChange() {
if(!$('ifocus')) return false;
$('ifocus').onmouseover = function(){atuokey = true};
$('ifocus').onmouseout = function(){atuokey = false};
var iFocusBtns = $('ifocus_btn').getElementsByTagName('li');
var listLength = iFocusBtns.length;
iFocusBtns[0].onmouseover = function() {
moveElement('ifocus_piclist',0,0,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',0);
}
if (listLength>=2) {
iFocusBtns[1].onmouseover = function() {
moveElement('ifocus_piclist',0,-290,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',1);
}
}
if (listLength>=3) {
iFocusBtns[2].onmouseover = function() {
moveElement('ifocus_piclist',0,-580,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',2);
}
}
if (listLength>=4) {
iFocusBtns[3].onmouseover = function() {
moveElement('ifocus_piclist',0,-870,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',3);
}
}
if (listLength>=5) {
iFocusBtns[4].onmouseover = function() {
moveElement('ifocus_piclist',0,-1160,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',4);
}
}
}
setInterval('autoiFocus()',5000);
var atuokey = false;
function autoiFocus() {
if(!$('ifocus')) return false;
if(atuokey) return false;
var focusBtnList = $('ifocus_btn').getElementsByTagName('li');
var listLength = focusBtnList.length;
for(var i=0; i<listLength; i++) {
if (focusBtnList[i].className == 'current') var currentNum = i;
}
if (currentNum==0&&listLength!=1 ){
moveElement('ifocus_piclist',0,-290,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',1);
}
if (currentNum==1&&listLength!=2 ){
moveElement('ifocus_piclist',0,-580,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',2);
}
if (currentNum==2&&listLength!=3 ){
moveElement('ifocus_piclist',0,-870,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',3);
}
if (currentNum==3&&listLength!=4 ){
moveElement('ifocus_piclist',0,-1160,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',4);
}
//-----------------------------------------
if (currentNum==4 ){
moveElement('ifocus_piclist',0,0,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',0);
// thêm vào nếu thêm số lish ảnh
//   Nguyên bản đoạn cuối:
// if (currentNum==3 ){
// moveElement('ifocus_piclist',0,0,5);
// classNormal('ifocus_btn','ifocus_tx');
// classCurrent('ifocus_btn','ifocus_tx',0);
//-------------------------------------------
}
if (currentNum==1&&listLength==2 ){
moveElement('ifocus_piclist',0,0,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',0);
}
if (currentNum==2&&listLength==3 ){
moveElement('ifocus_piclist',0,0,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',0);
}
if (currentNum==3&&listLength==4 ){
moveElement('ifocus_piclist',0,0,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',0);
}
}
addLoadEvent(iFocusChange);
</SCRIPT>

<!--
<SCRIPT src="jsapi" type=text/javascript></SCRIPT>
-->
                     
                                <DIV class=jsimg>
                                <DIV id=ifocus>
                                <DIV id=ifocus_pic>
                                <DIV id=ifocus_piclist style="LEFT: 0px; TOP: 0px">
                                <UL>
                                <LI><A href="#"><IMG src="http://bit.ly/bendoivn-img01"></A></LI>
                                <LI><A href="#"><IMG src="http://bit.ly/bendoivn-img02"></A></LI>
                                <LI><A href="#"><IMG src="http://bit.ly/bendoivn-img03"></A></LI>
                                <LI><A href="#"><IMG src="http://bit.ly/bendoivn-img04"></A></LI>
                                <LI><A href="#"><IMG src="http://bit.ly/bendoivn-img05"></A>
                                </LI></UL></DIV>
                             
                                <DIV id=ifocus_opdiv></DIV>
                                <DIV id=ifocus_tx>
                                <UL>
                                <LI class=current>
                                <DIV class=title_js>1......... </DIV>
                                <DIV class=content_js>11........</DIV>
                             
                                <LI class=normal>
                                <DIV class=title_js>2......</DIV>
                                <DIV class=content_js>22.......... </DIV>
                             
                                <LI class=normal>
                                <DIV class=title_js>3....</DIV>
                                <DIV class=content_js>33.......</DIV>
                             
                                <LI class=normal>
                                <DIV class=title_js>4....</DIV>
                                <DIV class=content_js>44....</DIV>
                             
                                <LI class=normal>
                                <DIV class=title_js>5... </DIV>
                                <DIV class=content_js>55... </DIV></LI></UL></DIV></DIV>
                             
<DIV id=ifocus_btn>
<UL>
                                <LI class=current><IMG src="http://bit.ly/bendoivn-img01"></LI>
                                <LI class=normal><IMG src="http://bit.ly/bendoivn-img02"></LI>
                                <LI class=normal><IMG src="http://bit.ly/bendoivn-img03"></LI>
                                <LI class=normal><IMG src="http://bit.ly/bendoivn-img04"></LI>
                                <LI class=normal><IMG src="http://bit.ly/bendoivn-img05"></LI>
                             
                                </UL></DIV></DIV></DIV>

Đây là hiệu ứng mình bắt trước từ trang mmo.vn từ hơn 3 năm trước! phần code js & css còn nhiều cái không cần thiết, nếu bạn muốn thì cần edit lại để tối ưu hơn.