一个js轮播器,可以用用但是性能差

html------------------------

 <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style/main.css">
    <script src="jquery-1.11.2.js" ></script>
    <script src="demo.js"></script> 
</head>
<body>
<div class="banner">
    <img src="" alt="第一张轮播器" class="first">
    <img src="" alt="第二张轮播器" class="second">
    <img src="" alt="第三张轮播器" class="third">
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <span></span>
    <strong></strong>
</div>
</body>
</html>
css--------------------------------
    *{padding: 0;margin: 0;}

ul{list-style-type: none;}
.first{
    width: 800px;
    height: 400px;
    background: red;
}
.second{
    width: 800px;
    height: 400px;
    background: green;
}
.third{
    width: 800px;
    height: 400px;
    background: yellow;
}
.banner{
    width: 800px;
    height: 400px;
    position: relative;
    margin: 0 auto;
}
img{
    position: absolute;
    top: 0;
    left: 0;
    z-index:1;
}
ul{
    position: absolute;
    top:380px;
    left: 300px;
    z-index: 4;
}
ul li{
    float: left;
    width: 30px;
    height: 20px;
    display: block;
    border: 1px solid #000;
    margin-left: 20px;
    text-align: center;
    line-height: 20px;
    cursor:pointer; 

}
span{
    width: 800px;
    height: 20px;
    display: block;
    position: absolute;
    top: 380px;
    left: 0;
    background: #ccc;
    z-index:3;
    opacity:0.6;
}
strong{
    width: 800px;
    height: 20px;
    display: block;
    position: absolute;
    top: 380px;
    left: 0;
    z-index: 4;
}

js----------------------------------

 $(function  () {
        $("img").css("display","none");
        $("img").eq(0).css("display","block");
        $(".banner ul li").eq(0).css("background","red");
        $(".banner strong").html($("img").eq(0).attr("alt"));
        $("ul li").hover(
            function() {
                $("img").css("display","none");
                $("img").eq($(this).index()).css("display","block");
                $("ul li").css("background","#fff");
                $("ul li").eq($(this).index()).css("background","red");
                $(".banner strong").html($("img").eq($(this).index()).attr("alt"))
            },function(){

            })
})

我看视频做的一个轮播器,用是可以用。不过性能很低,要很久才能反应过来。求大婶指教。

不知道你的html文档结构是什么,还有你的jquery代码里有很多操作样式的代码,可以把多次用到的选择器赋给一个变量,

var img=$("img");
虽然性能不会马上提高,但是是一个好的习惯。
当页面加载完毕时,你用jquery加了样式,是不是可以写到css里面去呢。

你的样式有问题,strong的z-index和ul同级盖住li了,提高ul的z-index就行

 ul{
    position: absolute;
    top:380px;
    left: 300px;
    z-index: 1111;
}

$("ul li").hover最好改为$("ul li").mouseover