关于网页中图片幻灯片

来源：互联网发布：wave三人动作数据下载编辑：程序博客网时间：2024/05/22 08:58

#ifocus { width:778px; height:133px; margin:0px; border:1px solid #DEDEDE;

background:#F8F8F8; }
#ifocus_pic { display:inline; position:relative; float:left; width:640px; height:225px;

overflow:hidden; margin:10px 0 0 10px; }
#ifocus_piclist { position:absolute; }
#ifocus_piclist li { width:650px; height:225px; overflow:hidden; }
#ifocus_piclist img { width:650px; height:225px; }//图片样式
#ifocus_btn { display:inline; float:right; width:86px;
margin:9px 9px 0 0; }//右方按钮DIV的样式

#ifocus_btn li { width:66px;
height:57px; cursor:pointer; -moz-opacity:0.5; }
#ifocus_btn img { width:75px; height:45px; margin:7px 0 0 11px; z-index:2;}//右方按钮的样式
#ifocus_btn .current { background: url(img/ifocus_btn_bg.gif) no-repeat; }
#ifocus_opdiv { position:absolute; left:0; bottom:0; width:545px; height:35px;

background:#000; -moz-opacity:0.5; }
#ifocus_tx { position:absolute; left:8px; bottom:8px; color:#FFF; }//下方文本的样式
#ifocus_tx .normal { display:none; }

</style>

       setInterval('autoiFocus()', 3500);
       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, -225, 5);
               classNormal('ifocus_btn', 'ifocus_tx');
               classCurrent('ifocus_btn', 'ifocus_tx', 1);
           }
           if (currentNum == 1 && listLength != 2) {
               moveElement('ifocus_piclist', 0, -450, 5);
               classNormal('ifocus_btn', 'ifocus_tx');
               classCurrent('ifocus_btn', 'ifocus_tx', 2);
           }
           if (currentNum == 2 && listLength != 3) {
               moveElement('ifocus_piclist', 0, -675, 5);
               classNormal('ifocus_btn', 'ifocus_tx');
               classCurrent('ifocus_btn', 'ifocus_tx', 3);
           }
           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);
           }
       }
       addLoadEvent(iFocusChange);
       function Button1_onclick() {

}

</script>

<div id="ifocus">
                     <div id="ifocus_pic">
                     <div id="ifocus_piclist" style="left:0; top:0; width: 647px;">
                     <ul>
                     <li><a href=" #" target="_blank">
                     <img src="京东/QQ截图20111024144904.png" width="650" alt="" /></a></li>
                     <li><a href="#" target="_blank">
                     <img src="京东/QQ截图20111024141656.png" width="650" height="180" alt="" /></a></li>
                     <li><a href=" #" target="_blank">
                     <img src="京东/QQ截图20111024144933.png"width="650" height="180" alt="" /></a></li>
                     <li><a href="#" target="_blank">
                     <img src="京东/QQ截图20111024144950.png" width="650" height="180" alt=""/></a></li>
                     </ul>
                     </div>

                     <div id="ifocus_tx">
                     <ul>
                     <li class="current">大家好</li>
                     <li class="normal">QQ472613400</li>
                     <li class="normal">邮箱472613400@qq.com</li>
                     <li class="normal">河北软件职业学院</li>
                     </ul>
                     </div>
                     </div>
                     <div id="ifocus_btn">
                     <ul>
                     <li class="current"><img src="京东/QQ截图20111024145959.png"width="90" alt="" /></li>
                     <li class="normal"><img src="京东/QQ截图20111024150007.png" height="27" alt="" /></li>
                     <li class="normal"><img src="京东/QQ截图20111024150014.png"width="90" height="27" alt="" /></li>
                     <li class="normal"><img src="京东/QQ截图20111024150030.png"width="90" alt="" /></li>
                     </ul>
                     </div>

这段代码是关于网页中幻灯片式图片的代码

上方

中写的分别是整个DIV的样式

图片的样式

右方按钮的样式

按钮鼠标触摸后的样式

字体出现的样式

JS中德代码是整个图片DIV中根据时间或者触及按钮时

图片的上下更改来控制当前显示的图片

对使用的图片根据他的布局更换时上下调整来显示需要显示的图片

DIV中的代码分别是需要显示的图片

显示的文字

以及右方按钮的图片

主要是JS中根据DIV的HEIGHT来更变显示的图片

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, -225, 5);
                   classNormal('ifocus_btn', 'ifocus_tx');
                   classCurrent('ifocus_btn', 'ifocus_tx', 1);
               }
           }
           if (listLength >= 3) {
               iFocusBtns[2].onmouseover = function () {
                   moveElement('ifocus_piclist', 0, -450, 5);
                   classNormal('ifocus_btn', 'ifocus_tx');
                   classCurrent('ifocus_btn', 'ifocus_tx', 2);
               }
           }
           if (listLength >= 4) {
               iFocusBtns[3].onmouseover = function () {
                   moveElement('ifocus_piclist', 0, -675, 5);
                   classNormal('ifocus_btn', 'ifocus_tx');
                   classCurrent('ifocus_btn', 'ifocus_tx', 3);
               }
           }
这里就是根据当前的显示更改的过程