jQuery实现焦点图播放效果

` Title .div1{ width: 470px; height: 150px; position: relative; margin: 0 auto; overflow: hidden;} .div{ width: 470px; height: 150px; position: absolute; left: 0; top: 0;} ol{ position: relative; top: 100px; left: 30%; list-style: none;} ol li{ float: left; cursor: pointer; width: 20px; height: 20px; margin-right: 5px; border-radius: 10px; color: #fff; background: #6a6a6a; line-height: 20px; text-align: center;} (function(){
            //定义一个索引
            var index  = 0;
            //设置第一个li按钮的颜色("li").eq(0).css("background","orange"); //设置所有的div图片隐藏，第0个显示 (".div").hide().eq(0).show();
            //封装一个图片播放动画
            function toFun(){
                index = (index == $(".div").length - 1)? 0 : index + 1;
                $(".div").fadeOut().eq(index).fadeIn();
                $("li").css("background","#6a6a6a").eq(index).css("background","orange")
            }
            //鼠标移入li按钮，图片切换("li").mouseover(function(){ index = ("li").index(this);(".div").fadeOut().eq(index).fadeIn(); ("li").css("background","#6a6a6a").eq(index).css("background","orange")
            })
            //鼠标移入div自动播放暂停，鼠标移出开始播放(".div1").hover(function(){ clearInterval(timer); },function(){ timer = setInterval(toFun,2000); } ); var timer = setInterval(toFun,2000); })

1. 1
2. 2
3. 3
4. 4
5. 5

`