jQuery焦点效果

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>

HTML结构：

<div id="wrap">
  <ul class="img">
    <li class="cur">a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
  </ul>
  <ul class="btn">
    <li class="cur">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
</div>

CSS代码：

<style type="text/css">
    body{padding:30px;font-size:12px;}
    #wrap{width:250px;height:250px;position:relative;border:1px solid #000; margin:100px auto 0;}
    *{padding:0;margin:0; list-style:none}
    .img{width:246px;margin:1px auto;overflow:hidden;_zoom:1;height:246px;background:#efefef}
    .img li{display:none; font-size:40px; line-height:220px; text-align:center; color:#FF0000;}
    .img li.cur{display:block;}
    .btn{position:absolute;bottom:10px;right:10px;}
    .btn li{float:left;width:16px;height:16px;line-height:16px;background:#000;color:#fff;text-align:center;margin-left:1px;font-family:Arial;}
    .btn li.cur{background:#930;}
</style>

jQuery代码：

<script type="text/javascript">
$(function() {
    var len = $(".btn li").css({cursor:'pointer'}).length;
    var playIndex = 0;
    var pic = 0;
    var timmer;
    $(".btn li").hover(function() {
        pic = $(".btn li").index(this);
        clearInterval(timmer);
        playIndex = pic;
        showPic(pic);
    },
    function(){
        auto();
    });
    
    function showPic(pic) {
        $(".img li").fadeOut("fast").eq(pic).fadeIn("fast");
        $(".btn li").removeClass("cur").eq(pic).addClass("cur");
    }
    
    function auto(){
        timmer = setInterval(function(){
            playIndex++;
            if (playIndex>=len){
                playIndex=0;
            }
            showPic(playIndex);
        },3000)
    }
    //
    auto();
});
</script>

 

转载于:https://www.cnblogs.com/pqw1991/archive/2012/09/05/2671607.html