制作一个建议的爱奇艺首页 为什们没有想要的效果呢？

Question

<style type="text/css">

*{
    margin: 0;
    padding: 0;
}




li{
    /* 删除黑点 */
    list-style: none;
}

#box{
    width: 100%;
    height: 410px;
}


.img ul li{
    width: 100%;
    height: 500px;
    display: none;
    /* 使之不显示 只为了设置一下宽高 因为只显示一张图片*/
}

/* 设置为块元素*/
.img li.curr {
    display: block;
    width: 100%;
    height: 500px;
}

/*  */
.bg{
    background: url(素材/beijing.jpeg);
    width: 250px;
    height: 400px;
    float: right;
    position: absolute;
    top:40px;
    right:20px;
    
}

.nav{
    width: 220px;
    height: 460px;
}

.nav li{
    font-size:14px ;
    line-height: 34px;
    color: #cccccc;
}
/* 给文字设置绝对位置*/



</style>

<script src="js/jquery.js"></script>
<script>

$(function(){
    $('.nav li').hover(function(){
        var index = $(this).index();
        $(this).addClass('first').siblings().removeClass('first')
        
        $('img ul li').eq(index).css({'display':'block'}).animate({'opacity': 1},500).siblings().css({'display':'none'})
    })
})
</script>

    <div id="box">
        
        <div class="img">
            <!-- 所有图片1 -->
            <ul>
                <li style="background: url(素材/1.jpeg);" class="curr" ></li>
                <li style="background: url(素材/2.jpeg);"></li>
                <li style="background: url(素材/3.jpeg);"></li>
                <li style="background: url(素材/4.jpeg);"></li>
                <li style="background: url(素材/5.jpeg);"></li>
                  <li style="background: url(素材/6.jpeg);"></li>
                <li style="background: url(素材/7.jpeg);"></li>
                <li style="background: url(素材/8.jpeg);"></li>
                <li style="background: url(素材/9.jpeg);"></li>
                <li style="background: url(素材/10.jpeg);"></li>
                
            
            </ul>

            
        </div>
        <div class="bg">
            <div class="nav">
               <!-- 所有文字1 -->
               <ul>
                 <li class="first">满月之下请相爱</li>
                 <li>周生如故</li>
                 <li>恋恋剧中人</li>
                 <li>理想之城</li>
                 <li>一剪芳华</li>
                 <li>奇异剧本鲨</li>
                 <li>你好生活3</li>
                 <li>火线突围</li>
                 <li>只好背叛地球了</li>
                 <li>暗黑大天使</li>
               </ul>

             
            </div>
            
        </div>
    
</div>

<title>爱奇艺</title>

<style type="text/css">

*{
    margin: 0;
    padding: 0;
}




li{
    /* 删除黑点 */
    list-style: none;
}

#box{
    width: 100%;
    height: 410px;
}


.img ul li{
    width: 100%;
    height: 500px;
    display: none;
    /* 使之不显示 只为了设置一下宽高 因为只显示一张图片*/
}

/* 设置为块元素*/
.img li.curr {
    display: block;
    width: 100%;
    height: 500px;
}

/*  */
.bg{
    background: url(素材/beijing.jpeg);
    width: 250px;
    height: 400px;
    float: right;
    position: absolute;
    top:40px;
    right:20px;
    
}

.nav{
    width: 220px;
    height: 460px;
}

.nav li{
    font-size:14px ;
    line-height: 34px;
    color: #cccccc;
}
/* 给文字设置绝对位置*/



</style>

<script src="js/jquery.js"></script>
<script>

$(function(){
    $('.nav li').hover(function(){
        var index = $(this).index();
        $(this).addClass('first').siblings().removeClass('first')
        
        $('img ul li').eq(index).css({'display':'block'}).animate({'opacity': 1},500).siblings().css({'display':'none'})
    })
})
</script>

    <div id="box">
        
        <div class="img">
            <!-- 所有图片1 -->
            <ul>
                <li style="background: url(素材/1.jpeg);" class="curr" ></li>
                <li style="background: url(素材/2.jpeg);"></li>
                <li style="background: url(素材/3.jpeg);"></li>
                <li style="background: url(素材/4.jpeg);"></li>
                <li style="background: url(素材/5.jpeg);"></li>
                  <li style="background: url(素材/6.jpeg);"></li>
                <li style="background: url(素材/7.jpeg);"></li>
                <li style="background: url(素材/8.jpeg);"></li>
                <li style="background: url(素材/9.jpeg);"></li>
                <li style="background: url(素材/10.jpeg);"></li>
                
            
            </ul>

            
        </div>
        <div class="bg">
            <div class="nav">
               <!-- 所有文字1 -->
               <ul>
                 <li class="first">满月之下请相爱</li>
                 <li>周生如故</li>
                 <li>恋恋剧中人</li>
                 <li>理想之城</li>
                 <li>一剪芳华</li>
                 <li>奇异剧本鲨</li>
                 <li>你好生活3</li>
                 <li>火线突围</li>
                 <li>只好背叛地球了</li>
                 <li>暗黑大天使</li>
               </ul>

             
            </div>
            
        </div>
    
</div>

Answer 1

这样少了个.，应该是.img样式，有帮助麻烦点个采纳【本回答右上角】，谢谢~~

    $(function () {
        $('.nav li').hover(function () {
            var index = $(this).index();
            $(this).addClass('first').siblings().removeClass('first')
            $('.img ul li').eq(index).css({ 'display': 'block' }).animate({ 'opacity': 1 }, 500).siblings().css({ 'display': 'none' })
        })
    })