jquery仿淘宝焦点图

浏览数：153 / 时间：2015年06月09日

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery仿淘宝焦点图</title>
<script src="../jquery-1.7.2.min.js"></script>
<style>
*{ margin:0; padding:0;}
ul,ul li{ list-style:none;}
ol,ol li{ list-style:none;}
#pic_wrap{ width:520px;overflow:hidden; height:280px; position:relative;}
#pic_wrap ul{ position:absolute;}
#pic_wrap ul li{ width:520px; float:left; font-family:"微软雅黑";}
#pic_wrap ol{ position:absolute; z-index:9999; bottom:10px; left:42%; background:rgba(0,0,0,.5);border-radius:20px; padding:2px 0}
#pic_wrap ol li{ width:8px; height:8px; background:#f1f1f1; border-radius:50%; float:left; margin:0px 5px; font-size:12px; text-align:center; line-height:16px; cursor:pointer;}
#pic_wrap ol li.active{ background:#f60; color:#fff;}
</style>
</head>

<body>

<script>
$(function(){
    
    //图片数据
    var imgData = [‘images/01.jpg‘,‘images/02.png‘,‘images/03.jpg‘,‘images/04.gif‘];
    var iNow = 0;
    var timer = null;
    //动态创建节点
    $.each(imgData,function(index,val){
        var oLi = ‘<li> <img src=" ‘+imgData[index]+‘ " /> </li>‘;
        var oLi2 = ‘<li></li>‘;
        $(‘#pic_wrap‘).find(‘ol‘).append(oLi2);
        $(‘#pic_wrap‘).find(‘ul‘).append(oLi);
    })
    
    var oUl = $(‘#pic_wrap‘).find(‘ul‘);
    var imgLenth = oUl.children(‘li‘).length;
    var imgOneWidth = oUl.children(‘li‘).width();
    var $oLi = $(‘ol li‘);
    
    //计算ul的总宽度
    oUl.css({‘width‘:imgLenth*imgOneWidth});
    
    //初始第一个按钮添加激活状态
    $(‘#pic_wrap‘).find(‘ol‘).find(‘li‘).first(‘li‘).addClass(‘active‘);
    
    //控制按钮点击图片切换
    $(‘#pic_wrap‘).find(‘ol‘).find(‘li‘).bind(‘click mouseover‘,function(){
        var index = $(this).index();
        $(this).attr(‘class‘,‘active‘).siblings(‘li‘).attr(‘class‘,‘‘);
        oUl.stop().animate({‘left‘:index*-imgOneWidth},1000);
    })
    
    //自动播放
    timer = setInterval(autoplay,2000);
    function autoplay(){
        if(iNow == $oLi.length-1){
            iNow = 0;
        }
        else{
            iNow++;
        }
        $oLi.attr(‘class‘,‘‘);
        $oLi.eq(iNow).attr(‘class‘,‘active‘);
        oUl.stop().animate({left : -imgOneWidth * iNow},1000);
    }
    
    $(‘#pic_wrap‘).mouseover(function(){
        clearInterval(timer);
    }).mouseout(function(){
        timer = setInterval(autoplay,2000);
    })
})

</script>

<div id="pic_wrap">
   <ul>
   </ul>
    
   <ol>
   </ol>
</div>

</body>
</html>