A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 郝强勇 中级黑马   /  2013-2-26 11:13  /  2647 人查看  /  12 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

本帖最后由 郝强勇 于 2013-3-1 20:15 编辑

我模仿了一个山寨的类似于淘宝的图片的变换框:

但我觉得代码相当繁琐,而且不怎么跨浏览器?高人帮忙看一下!
还有就是我CSS布局一直都很烂,position的几个属性都知道是什么意思
但是在进行复杂的布局时就蒙圈了,有没有关于CSS的常用的设计模式啊,
大神们分享一下呗!:lol

代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<style type="text/css">
        #continer{
                position:relative;
                top:0px;
                left:200px;
               
        
        }
        #bigimg{
                width:600px;
                height:400px;
                border:#666 1px solid;
        }
        #bigimg img{
                width:600px;
                height:400px;
        }
        #div1{
                width:600px;
                height:400px;
                background-color:#F00;
                display:block;
               
        }
        #div2{
                width:600px;
                height:400px;
                background-color:#60C;
                display:none;
        }
        #div3{
                width:600px;
                height:400px;
                background-color:#FF0;
                display:none;
        }
        #div4{
                width:600px;
                height:400px;
                background-color:#0F0;
                display:none;
        }
        #div5{
                width:600px;
                height:400px;
                background-color:#03C;
                display:none;
        }
        #mark{
                position:absolute;
                top:360px;
                left:350px;
        }
        
        #mark ul li{
                float:left;
        }
        .smallimg{
                width:30px;
                height:30px;
                background-color:#FFF;
                margin:0px 5px;
                text-align:center;
        }
</style>

<script type="text/javascript">
        //定义公共的定时器变量
        var timer;
        //在页面加载完毕,没有进行任何操作时的页面状态
        window.onload = function(){
                var index = 0;
                change(index);
                var smallimgs = document.getElementById("mark").getElementsByTagName("ul")[0].getElementsByTagName("div");
                smallimgs[0].style.backgroundColor = "#CCC";
        }
        //鼠标移入小图标的时间
        function over(node){
                var num = node.innerHTML;
                clearInterval(timer);
                var continerNode = document.getElementById("bigimg");
                var divs = continerNode.getElementsByTagName("div");
                var smallimgs = document.getElementById("mark").getElementsByTagName("ul")[0].getElementsByTagName("div");
                for(var i=0;i<divs.length;i++){
                                divs.style.display = "none";
                                smallimgs.style.backgroundColor = "white";
                }
                node.style.backgroundColor = "#CCC";        
                divs[num].style.display = "block";        
        }
        //鼠标移出小图标的事件
        function out(node){
                var index = node.innerHTML;
                change(index);
        }
        //图片变换的定时器
        function change(index){
                var continerNode = document.getElementById("bigimg");
                var divs = continerNode.getElementsByTagName("div");
                var smallimgs = document.getElementById("mark").getElementsByTagName("ul")[0].getElementsByTagName("div");
                timer = setInterval(function(){
                                for(var i=0;i<divs.length;i++){
                                        divs.style.display = "none";
                                        smallimgs.style.backgroundColor = "white";
                                }
                                smallimgs[index].style.backgroundColor = "#CCC";
                                divs[index].style.display = "block";
                                index++;
                                if(index==5){
                                        index=0;
                                }
                        },2000);
        }

</script>



</head>

<body>
<div id="continer">
        <div id="bigimg">
            <div id="div1"><img src="file:///F|/照 片/刘子墨/新建文件夹/IMG_7492.JPG" /></div>
            <div id="div2"><img src="file:///F|/照 片/刘子墨/新建文件夹/IMG_7484.JPG" /></div>
        <div id="div3"><img src="file:///F|/照 片/刘子墨/新建文件夹/IMG_7502.JPG" /></div>
        <div id="div4"><img src="file:///F|/照 片/刘子墨/刘子墨亚米奇.jpg" /></div>
        <div id="div5"><img src="file:///F|/照 片/刘子墨/新建文件夹/IMG_7470.JPG" /></div>
        
    </div>
   
    <div id="mark">
            <ul>
                <li><div class="smallimg">0</div></li>
                <li><div class="smallimg">1</div></li>
                <li><div class="smallimg">2</div></li>
                <li><div class="smallimg">3</div></li>
                <li><div class="smallimg">4</div></li>
            </ul>
    </div>
</div>
</body>
</html>

QQ截图20130226110327.png (149.48 KB, 下载次数: 56)

QQ截图20130226110327.png

12 个回复

倒序浏览
咦,我的代码怎么变成“{:soso_e106:}”啦,不过大仙们懂的·······
回复 使用道具 举报
这是感言贴么。。。  我感觉自己有强迫症,特不乐意看到【未解决】这仨字儿。
回复 使用道具 举报
这没有什么呀,只是你输入的信息最好是系统里定义的表情一样罢了!!!
回复 使用道具 举报
haohao827 发表于 2013-2-26 11:16
咦,我的代码怎么变成“”啦,不过大仙们懂的·······

论坛发帖时候有个代码按钮
浏览器兼容问题 用jqury 比较不错
回复 使用道具 举报
css布局淘宝有个爱丽丝的开源框架你可以试试
回复 使用道具 举报

RE: 网页特效的代码

陈丽莉 发表于 2013-2-26 17:31
这是感言贴么。。。  我感觉自己有强迫症,特不乐意看到【未解决】这仨字儿。 ...

我要隔几天来网吧上一次网,不是很方便。对了,你改的代码我看不见啊:o
回复 使用道具 举报
陈丽莉 发表于 2013-2-26 17:31
这是感言贴么。。。  我感觉自己有强迫症,特不乐意看到【未解决】这仨字儿。 ...

我一开始写的是已解决吗?:'(
回复 使用道具 举报
郝强勇 发表于 2013-3-1 14:17
我要隔几天来网吧上一次网,不是很方便。对了,你改的代码我看不见啊

我没改代码啊,我将帖子改成【已解决】了,这帖子并不是提问的,所以就改了。
回复 使用道具 举报
陈丽莉 发表于 2013-3-1 18:14
我没改代码啊,我将帖子改成【已解决】了,这帖子并不是提问的,所以就改了。 ...

哈哈,这个帖子就是提问的啊,可能我的表达能力不是很好,毕竟工科生,理解一下下啊。呵呵
回复 使用道具 举报
郝强勇 发表于 2013-3-1 19:55
哈哈,这个帖子就是提问的啊,可能我的表达能力不是很好,毕竟工科生,理解一下下啊。呵呵 ...

............. 那好吧  我改过来,再帮你把问题弄得明显点儿。。  - -||
回复 使用道具 举报
陈丽莉 发表于 2013-3-1 20:11
............. 那好吧  我改过来,再帮你把问题弄得明显点儿。。  - -||

不用了,我自己研究出来啦,谢谢你哝!
回复 使用道具 举报
郝强勇 发表于 2013-3-1 20:16
不用了,我自己研究出来啦,谢谢你哝!

:L   好吧,我已经不知道说啥好了~~~  呵呵
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马