坑爹的问题，jquery样式与css样式的神秘问题

悬赏园豆：20 [已解决问题] 解决于 2014-06-24 13:42

我在做一个图片轮转效果，把下面的数字和图片布局在一起，发现改变按钮（1,2,3...8的链接）样式没加上，而且点第二次的时候有效果。当我把 id 为 divLink的div放在外面，这些链接又是ok的，求解答，好像和js冒泡没关系...

http://files.cnblogs.com/xiaoshuai1992/PicRun.zip demo下载地址

测试谷歌是ok的，IE8不ok

清风君 | 菜鸟二级 | 园豆：372
提问于：2014-06-18 16:05

< >

最佳答案

<!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>
    <title>图片切换</title>
    <script src="jquery-1.8.0.js" type="text/javascript"></script>
    <link href="picchange.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        var picCurrent = 0;
        var picTotal = 8;
        var step = -1;
        var interval;
        function picSelect() {
            setSelectClass();
            picAnimate();
            return false;
        }
        function picMove() {
            picCurrent = (picCurrent + step + picTotal) % picTotal;
            picSelect();
        }
        function setSelectClass() {
            var $a = $("#divLink").children("a");
            $a.removeClass("picselect")
            $a.eq(picCurrent).addClass("picselect")
        }
        function picAnimate() {
            $("#divImg").stop().animate({ left: -((picCurrent) * 1000)}, "1000");
        }
        function picRun(functionName) {
            interval = setInterval(picMove, "3000");
        }
        function picStop() {
            clearTimeout(interval);
        }
        $(document).ready(function () {
            $("#divLink").children("a").click(function() {
                picStop();
                picCurrent = $(this).index();
                picSelect();
                picRun();
            });
            picRun();
        });
    </script>
</head>
<body>
    <div id="picMain">
        <div id="divImg">
            <img src="images/pic1.jpg" />
            <img src="images/pic2.jpg" />
            <img src="images/pic3.jpg" />
            <img src="images/pic4.jpg" />
            <img src="images/pic5.jpg" />
            <img src="images/pic6.jpg" />
            <img src="images/pic7.jpg" />
            <img src="images/pic8.jpg" />
        </div>
        <div id="divLink">
            <a href="###" title="1">1</a>
            <a href="###" title="2">2</a>
            <a href="###" title="3">3</a>
            <a href="###" title="4">4</a>
            <a href="###" title="5">5</a>
            <a href="###" title="6">6</a>
            <a href="###" title="7">7</a>
            <a href="###" title="8">8</a>
        </div>
    </div>
</body>
</html>

View Code

#picMain
{
    margin: auto;
    overflow: hidden;
    width: 1000px;
    height: 400px;
    position: relative;
}
#divImg
{
    width: 10000px;
    height: 400px;
    background-color: #000000;
    position: absolute;
    top: 0px;
}
#divLink
{
    position: absolute;
    width: 1000px;
    height: 50px;
    background-color: #000000;
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
    overflow: auto;
    display: block;
    bottom: 0px;
    left: 0px;
}
#divLink a
{
    border: 1px solid #C0C0C0;
    width: 30px;
    height: 30px;
    float: left;
    margin-left: 10px;
    line-height: 30px;
    text-decoration: none;
    text-align: center;
    color: #FFFFFF;
    font-weight: bold;
    margin-top: 10px;
    display: block;
}
#divImg img
{
    width: 1000px;
    height: 400px;
    float: left;
}
.picselect
{
    background-color: #919191;
}

View Code

以上HTML和CSS并不是解决楼主的BUG，只是我在你的基础之上修改了一下，正好自我学习一番。希望你不会介意。

我有几个建议：（1）分号漏了哦（2）大括号位置不统一（3）函数名，变量名最好是动宾结构，比如picNext改为nextPic

以上仅是个人观点

收获园豆：20

ThreeTree | 小虾三级 |园豆：1490 | 2014-06-18 22:51

建议很不错，但是我给链接的地址为图片地址是为了“留后路”，js失效链接也是有效的，不过你的代码比我的简洁多了

清风君 | 园豆：372 (菜鸟二级) | 2014-06-19 09:27

@轻狂.书生: 解决了告诉我一下啊，我都崩溃了，就是找不出来为什么IE8会出问题，而谷歌没问题。

ThreeTree | 园豆：1490 (小虾三级) | 2014-06-19 13:27

@ThreeTree: 可能是透明样式的问题，但是不知道怎么改

清风君 | 园豆：372 (菜鸟二级) | 2014-06-20 09:09

其他回答(2)

使用火狐进入demo没有发现楼主说的问题。或者楼主可以截图正确应该怎么样

呓语鑫 | 园豆：313 (菜鸟二级) | 2014-06-18 16:12

下面的1,2,3...8,点了链接后样式不会马上改变，当你点其他地方时样式才会改变，图片切换是正常的

支持(0) 反对(0) 清风君 | 园豆：372 (菜鸟二级) | 2014-06-18 16:16

@轻狂.书生: 额估计是浏览器兼容性问题。我这边都可以。点击对应按钮，切换对应图片的效果实现了

支持(0) 反对(0) 呓语鑫 | 园豆：313 (菜鸟二级) | 2014-06-18 18:02

@轻狂.书生: 应该是你的JS不支持IE8.

支持(0) 反对(0) 呓语鑫 | 园豆：313 (菜鸟二级) | 2014-06-18 18:05

-2

加载样式方法重新调用一下

GrandKai | 园豆：119 (初学一级) | 2014-06-19 10:20

清除回答草稿

您需要登录以后才能回答，未注册用户请先注册。

欢迎，请先 登录 或者 注册 。

坑爹的问题，jquery样式与css样式的神秘问题

欢迎，请先登录或者注册。