快捷导航
查看: 1388|回复: 11

[求助] 仿淘宝焦点图

[复制链接]
发表于 2013-8-8 23:22:23 | 显示全部楼层 |阅读模式
本帖最后由 银狐 于 2013-8-11 15:59 编辑

我自己尝试做了一个类似淘宝的焦点图。但是当做到鼠标移动到数字时。背景颜色没有变。代码如下
[HTML] 纯文本查看 复制代码运行代码

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>焦点图</title>
</head>
<style>
body,ul,li,p,img{margin: 0;padding: 0;border: 0}
ul{list-style: none;}
#promo{width: 490px;height: 170px;overflow: hidden;margin: 30px auto;border: 1px solid #D8D8D8;position: relative;}
#promo ul{}
#promo ul li{float: left;/*display: none;*/}
#promo .num{width: 98px;height: 20px;position: absolute;right: 9px;bottom: 10px;z-index: 10}
#promo .num li{width: 18px;height: 20px;text-align: center;font: normal 12px/20px "Microsoft Yahei",Arial;border: 1px solid #D8D8D8;background: #FFF;color: #F60;margin-left: -1px;cursor: pointer;}
#promo .num li.active{background: #F60;color: #FFF;}
</style>
<script>
window.onload=function (){
        var oDiv=document.getElementById("pic");
        var aLi=oDiv.getElementsByTagName("li");
        var oUl=document.getElementById("num");
        var aLi2=oUl.getElementsByTagName("li");
        // alert(oUl.length);
        for(var i=0;i<aLi2.length;i++){
                this.className="active";
        }
}
</script>
<body>
<div id="promo">
        <ul id="pic" class="switch_able">
                <li style="display:block;">
                        <a href="javascript:;"><img src="http://img03.taobaocdn.com/tps/i3/T1BfxMFdNhXXcr_tT7-490-170.jpg" alt=""></a>
                </li>
                <li>
                        <a href="javascript:;"><img src="http://i.mmcdn.cn/simba/img/T1sWXZFlxgXXb1upjX.jpg" alt=""></a>
                </li>
                <li>
                        <a href="javascript:;"><img src="http://i.mmcdn.cn/simba/img/T1I68WFoxaXXb1upjX.jpg" alt=""></a>
                </li>
                <li>
                        <a href="javascript:;"><img src="http://i.mmcdn.cn/simba/img/T15DpiFj0jXXb1upjX.jpg" alt=""></a>
                </li>
                <li>
                        <a href="javascript:;"><img src="http://img03.taobaocdn.com/tps/i3/T1ggt4Fi0XXXcr_tT7-490-170.jpg" alt=""></a>
                </li>
        </ul>
        <ul id="num" class="num">
                <li class="active">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
        </ul>
</div>       
</body>
</html>

 楼主| 发表于 2013-8-8 23:24:04 | 显示全部楼层
先抢下沙发  
发表于 2013-8-8 23:29:11 | 显示全部楼层
好像根本就不动啊
发表于 2013-8-8 23:51:55 | 显示全部楼层
for(var i=0;i<aLi2.length;i++)
{
     aLi2[i].onmouseover=function ()
     {
         alert(this.innerHTML);
     }
}
按照这个修改一下就可以了
发表于 2013-8-9 08:49:42 | 显示全部楼层
妈呀,这样的问题只能心理支持
发表于 2013-8-9 16:37:46 | 显示全部楼层
都能写这么复杂的代码了啊
 楼主| 发表于 2013-8-9 22:09:10 | 显示全部楼层

value为啥不行呢,没道理呀
 楼主| 发表于 2013-8-9 22:09:26 | 显示全部楼层
隔山打牛 发表于 2013-8-9 08:49
妈呀,这样的问题只能心理支持

我也是刚学习的,很多不懂。
 楼主| 发表于 2013-8-9 22:09:42 | 显示全部楼层
真菜鸟假高手 发表于 2013-8-9 16:37
都能写这么复杂的代码了啊

这个应该算简单的了吧。
发表于 2013-8-9 23:39:38 | 显示全部楼层
银狐 发表于 2013-8-9 22:09
value为啥不行呢,没道理呀

li根本就没有value属性
只有input那些有
 楼主| 发表于 2013-8-10 15:08:24 | 显示全部楼层
caicai 发表于 2013-8-9 23:39
li根本就没有value属性
只有input那些有

原来是这个样子哝。居然没想到。谢谢大神指点
 楼主| 发表于 2013-8-11 15:58:12 | 显示全部楼层
caicai 发表于 2013-8-9 23:39
li根本就没有value属性
只有input那些有

重新编辑了下。现在出现的问题是。移到数字上面去 背景颜色没有改变

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2017-9-26 18:51 , Processed in 0.086893 second(s), 19 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

快速回复返回顶部 返回列表