焦点图(轮播图)

案例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>京东轮播效果</title>
<style>
*{padding:0; margin:0;}
ul{ list-style:none;}
.out{ width:730px; height:454px;  margin:50px auto; position:relative;}
.out .img li{ position:absolute; top:0;left:0; display:none;}

.out .num{ position:absolute; bottom:20px;left:0; font-size:0px; text-align:center; width:100%;}

.out .num li{ width:20px; height:20px; background:#666; color:#fff; text-align:center; line-height:20px; border-radius:50%; display:inline-block; font-size:16px; margin:0 3px; cursor:pointer;}
.out .num li.active{ background:#a00}


.out .btn{ position:absolute; top:50%; margin-top:-30px;width:30px; height:60px; background:rgba(0,0,0,0.5); color:#fff; text-align:center; line-height:60px; font-size:40px; display:none; cursor:pointer;}
.out:hover .btn{ display:block;}
.out .left{ left:0}
.out .right{ right:0;}
</style>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function(){
    //代码初始化
    var size=$(".img li").size();
    
    for(var i=1; i<=size; i++){
        var li="<li>"+i+"</li>";
        $(".num").append(li);
    }
    
    
    
    
    //手动控制轮播图
    $(".img li").eq(0).show();
    $(".num li").eq(0).addClass("active");
    $(".num li").mouseover(function(){
        $(this).addClass("active").siblings().removeClass("active");        
        var index=$(this).index();  
        i=index;
        $(".img li").eq(index).stop().fadeIn(300).siblings().stop().fadeOut(300);   
    })
    
    
    
    //自动轮播
    var i=0;
    var t=setInterval(move,1500);
    
    
    //核心向左运动函数
    function moveL(){
        i--;
        if(i==-1){
            i=size-1;   
        }
        
        $(".num li").eq(i).addClass("active").siblings().removeClass("active");
        $(".img li").eq(i).fadeIn(300).siblings().fadeOut(300);
        
    }
    
    
    //核心向右运动函数
    function move(){
        i++;
        if(i==size){
            i=0;    
        }
        
        $(".num li").eq(i).addClass("active").siblings().removeClass("active");
        $(".img li").eq(i).fadeIn(300).siblings().fadeOut(300);
        
    }
    
    
    //左边按钮点击事件
    $(".out .left").click(function(){
        moveL();
    })
    
    //右边按钮点击事件
    $(".out .right").click(function(){
        move()
        
    })
    
    
    //定时器的开始于结束
    $(".out").hover(function(){
        clearInterval(t)
    },function(){
        t=setInterval(move,1500);
    })
    
    
    
})



</script>

</head>

<body>
<div class="out">
    <ul class="img">
        <li><a href="/go.html?url=#"><img src="images/1.jpg" alt=""></a></li>
        <li><a href="/go.html?url=#"><img src="images/2.jpg" alt=""></a></li>
        <li><a href="/go.html?url=#"><img src="images/3.jpg" alt=""></a></li>
        <li><a href="/go.html?url=#"><img src="images/4.jpg" alt=""></a></li>
        <li><a href="/go.html?url=#"><img src="images/5.jpg" alt=""></a></li>
        <li><a href="/go.html?url=#"><img src="images/6.jpg" alt=""></a></li>
    </ul>
    
    
    <ul class="num">
        
    </ul>
    
    <div class="left btn"><</div>
    <div class="right btn">></div>


</div>


</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//
jQuery制作焦点图(轮播图)

焦点图(轮播图)

案例
