Javascript + CSS achieve Flash dynamic news effect (pp original) _ image effects

Javascript + CSS achieve Flash dynamic news effect (pp original)

<Style type = "text/css">/* the image news size can be changed */. pp_portal_imgNews {position: relative; text-align: left; width: 250px; height: pixel PX ;}. pp_portal_imgNew {position: absolute;}/* image style */. pp_portal_imgNew img {width: 100%; height: 165px; border: 0;}/* text title style */. pp_portal_imgNew_title {text-align: center; margin-top: 5px ;}. pp_portal_imgNew_title a {display: block; color: #000; text-decoration: none; font-size: 14px; font-weight: bold; text-align: center ;} /* navigation prompt position */. pp_portal_navLink {position: absolute; display: block; right: 0px; bottom: 5px;}/* navigation prompt style (not selected )*/. pp_portal_navLink a {color: # fff; text-align: center; text-decoration: none ;}. pp_portal_navLink li {display: inline; text-align: center; background-color: #333; width: 15px; margin-left: 1px ;} </style> <script type = "text/javascript"> var newsNum = 4; var nn = 1; function pp_portal_selectPicNew (o) {for (var I = 1; I <= newsNum; I ++) {var newsId = "id_portal_imgNew" + I; if (o = I) {// selected document. getElementById (newsId ). style. display = "block"; document. getElementById ("id_portal_navLink" + I ). style. background = "red";} else {document. getElementById (newsId ). style. display = "none"; document. getElementById ("id_portal_navLink" + I ). style. background = "#333" ;}} nn = o;} // automatically selects the image news function pp_portal_changePicNew () {if (nn> newsNum) nn = 1 // alert (nn); pp_portal_selectPicNew (nn); nn ++;} function pp_portal_picNew_auto () {response = setInterval ('pp _ portal_changePicNew ()', 2000);} pp_portal_picNew_auto (); script <p id = "id_portal_imgNews" class = "pp_portal_imgNews"> <p id = "id_portal_imgNew1" class = "pp_portal_imgNew" style = "display: block; "> <p class =" pp_portal_imgNew_title "> IMG 1 </p> <p id =" id_portal_imgNew2 "class =" pp_portal_imgNew "style =" display: none; "> <p class =" pp_portal_imgNew_title "> image News 2 </p> <p id =" id_portal_imgNew3 "class =" pp_portal_imgNew "style =" display: none; "> <p class =" pp_portal_imgNew_title "> Picture News 3 </p> <p id =" id_portal_imgNew4 "class =" pp_portal_imgNew "style =" display: none; "> <p class =" pp_portal_imgNew_title "> image News 4 </p> <p id =" id_portal_navLinks "class =" pp_portal_navLink "> <ul> <li id = "id_portal_navLink1"> 1 </li> <li id = "id_portal_navLink2"> 2 </li> <li id = "id_portal_navLink3"> 3 </li> <li id = "id_portal_navLink4"> 4 </li> </ul> </p>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]