zoukankan html css js c++ java

js练习8(幻灯片切换效果)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>幻灯片切换</title>
        <style>
            .body{text-align:center;}
            li,ul{list-style:none;margin:0px;padding:0px;}
            #showPlay{
                text-align:left;
                width:890px;
                overflow:hidden;
                margin:0px auto;
                height:350px;
                position:relative;
            }
            #dopics{
                opacity: 0.4;
                background: none repeat scroll 0 0 #000;
                height: 10px;
                padding: 5px 10px;
                position: absolute;
                width:870px;
                text-align:right;
                clear:both;
                bottom:0px;
            }
            #dopics span{
                opacity: 0.4;
                background: none repeat scroll 0 0 #FFFFFF;
                cursor: pointer;
                display: inline-block;
                height: 10px;
                margin-left: 5px;
                width: 25px;
                text-align:center;
                color:#000;
                font-weight:bold;
                font-size:10px;
                height:10;
                line-height:10px;
                
                
            }
        </style>
    </head>
    <body>
        <div id="showPlay">
            <div id="pics">
                <ul>
                    <li><a href=""><img src="slideimg_1.jpg" /></a></li>
                    <li><a href=""><img src="slideimg_2.jpg" /></a></li>
                    <li><a href=""><img src="slideimg_3.jpg" /></a></li>
                    <li><a href=""><img src="slideimg_4.jpg" /></a></li>
                    <li><a href=""><img src="slideimg_5.jpg" /></a></li>
                    <li><a href=""><img src="slideimg_6.jpg" /></a></li>
                </ul>
            </div>
            <div id="dopics">
            </div>
        </div>
        <script>
            var time;
            var n=1;
            var ul=document.getElementById("pics").getElementsByTagName("ul")[0];
            
            //5秒钟进行交替图片
            time=setInterval("run()",5000);
            
            //显示图片
            function run(){
                ++n;
                if(n>6){
                    n=1;
                }
                ul.innerHTML="<li><a href=''><img src='slideimg_"+n+".jpg' /></a></li>";
            }
            
            //根据图片来生成对应的按钮
            function getBtn(){
                var liList=document.getElementById("pics").getElementsByTagName("li");
                var dopics=document.getElementById("dopics");
                var str="";
                for(var i=0;i<liList.length;i++){
                    str+="<span>"+(i+1)+"</span>";
                }
                //alert(str);
                dopics.innerHTML=str;
            }
            getBtn();
            
            //鼠标移到按钮上时
            var spanList=document.getElementById("dopics").getElementsByTagName("span");
            for(var j=1;j<spanList.length+1;j++){
                spanList[j-1].onmouseover=function(){
                    clearInterval(time);
                    //这里的this.innerHTML不能使j因为循环完的j=7
                    ul.innerHTML="<li><a href=''><img src='slideimg_"+this.innerHTML+".jpg' /></a></li>";    
                    time=setInterval("run()",9000);
                }
            }
        </script>
    </body>
</html>

查看全文

相关阅读:
简单的购物车
 分页显示
 登录验证码的实现
 简单遗传算法代码
 jQ
2.servlet的会话机制session
1.servlet的会话机制cookie
基本数据类型和引用数据类型的区别
 struts2-第一章-基础用法2
struts2第一章-基本用法

原文地址：https://www.cnblogs.com/yuwensong/p/2873318.html