标签：
<!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>
标签：
原文地址：http://www.cnblogs.com/wulianghai/p/4287859.html
