JavaScript-slide effects for pictures

JavaScript code:

<script type= "Text/javascript" > Function Select_play () {var select_play_box = document.getElementById ("se        Lect_play_box ");        var aUl = select_play_box.getelementsbytagname ("ul");        var aimg = aul[0].getelementsbytagname ("Li");        var anum = aul[1].getelementsbytagname ("Li");        var timer = play = null;        var i = index = 0;            Toggle button for (i = 0; i < anum.length; i++) {anum[i].index = i; Anum[i].onmouseover = function () {Show (This.index)}}//mouse over close timer select        _play_box.onmouseover = function () {clearinterval (play)};        Mouse away start AutoPlay select_play_box.onmouseout = function () {autoPlay ()};                AutoPlay functions Function AutoPlay () {play = SetInterval (function () {index++;                Index >= aimg.length && (index = 0);            Show (index);        }, 2500);} autoPlay ();//apply//Picture toggle, fade effect function Show (a) {index = A;            var alpha = 0;            for (i = 0; i < anum.length; i++) anum[i].classname = "";            Anum[index].classname = "current";            Clearinterval (timer);                for (i = 0; i < aimg.length; i++) {aimg[i].style.opacity = 0;            Aimg[i].style.filter = "Alpha (opacity=0)";                Timer = setinterval (function () {alpha + = 2;                Alpha > && (alpha = 100);                aimg[index].style.opacity = alpha/100;                Aimg[index].style.filter = "alpha (opacity =" + Alpha + ")";        Alpha = = && clearinterval (timer)}, 20); }}</script>

HTML code:

<div id= "Select_play_box" >    <ul class= "select_play_list" >        <li class= "Select_play_current" ></li>        <li></li>        <li>< IMG src= "d/c.jpg"/></li>        <li></li>    </ul>    <ul class= "Select_play_count" >        <li class= "select_play_current" >1</li>        <li>2</li>        <li>3</li>        <li>4</li>    </ul></div>

CSS code:

1 #select_play_box{2 position:relative;3 width:315px;4 Height:272px;5 background:#fff;6 Border-radius:5px;7 Border:8px Solid #fff;8 margin:5px Auto;9}Ten #select_play_box ul{ One List-style-type:None; A} -  - #select_play_box ul, Li{ the margin:0; - padding:0; -} -  + #select_play_box. Select_play_list{ - position:relative; + width:100%; A Height:100%; at Overflow:Hidden; - Border:1px solid #ccc; -} -  - #select_play_box. select_play_list Li{ - position:Absolute; in Top:0; - Margin-left:15px; to Margin-top:5px; + width:300px; - Height:170px; the Opacity:0; * Filter:Alpha (opacity=0); $}Panax Notoginseng #select_play_box. select_play_list img{ - width:250px; the Height:250px; +} A  the #select_play_box. Select_play_list li.select_play_current{ + Opacity:1; - Filter:Alpha (opacity=100); $} $  - #select_play_box. Select_play_count{ - position:Absolute; the  Right:0; - Bottom:5px;Wuyi} the  - #select_play_box. Select_play_count Li{ Wu text-align:Center; - Color:#fff; About float: Left; $ width:20px; - Height:20px; - cursor:Pointer; - Margin-right:5px; A Overflow:Hidden; + background:#F90; the Opacity:0.7; - Filter:Alpha (opacity=70); $ Border-radius:20px; the} the  the #select_play_box. Select_play_count li.select_play_current{ the Color:#fff; - Opacity:1; in Filter:Alpha (opacity=100); the Font-weight: the; the background:#f60; About}

View Code

Full HTML page code:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "HTTP://WWW.W3.ORG/TR/XHTML1/DTD/XHTML1-TRANSITIONAL.D TD ">
JavaScript-slide effects for pictures