首页 > 代码库 > 图片轮播

图片轮播

<!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>         <title>pic player</title>         <script type="text/javascript" src="http://img.jb51.net/jslib/jquery/jquery-1.2.6.js"></script>         <script type="text/javascript" src="http://img.jb51.net/jslib/jquery/tween.js"></script>     </head>     <style type="text/css">     img{border:0;}     </style>     <body>         <div id="picplayer" style="position:relative;overflow:hidden;width:300px;height:300px;clear:none;border:solid 1px #ccc;">             there is a pic-player         </div>         <script>             var p = $(‘#picplayer‘);             var pics1 = [{url:‘http://img.jb51.net/online/picPlayer/1.jpg‘,link:‘http://www.jb51.net/#‘,time:5000},{url:‘http://img.jb51.net/online/picPlayer/2.jpg‘,link:‘http://www.jb51.net/#‘,time:4000},{url:‘http://img.jb51.net/online/picPlayer/3.jpg‘,link:‘http://www.jb51.net‘,time:6000},{url:‘http://img.jb51.net/online/picPlayer/2.jpg‘,link:‘http://www.jb51.net‘,time:6000},{url:‘http://img.jb51.net/online/picPlayer/1.jpg‘,link:‘http://www.jb51.net‘,time:6000}];             initPicPlayer(pics1,p.css(‘width‘).split(‘px‘)[0],p.css(‘height‘).split(‘px‘)[0]);             //             //             function initPicPlayer(pics,w,h)             {                 //选中的图片                 var selectedItem;                 //选中的按钮                 var selectedBtn;                 //自动播放的id                 var playID;                 //选中图片的索引                 var selectedIndex;                 //容器                 var p = $(‘#picplayer‘);                 p.text(‘‘);                 p.append(‘<div id="piccontent"></div>‘);                 var c = $(‘#piccontent‘);                 for(var i=0;i<pics.length;i++)                 {                     //添加图片到容器中                     c.append(‘<a href="http://www.mamicode.com/‘+pics[i].link+‘" target="_blank"><img id="picitem‘+i+‘" style="display: none;z-index:‘+i+‘" src="http://www.mamicode.com/‘+pics[i].url+‘" /></a>‘);                 }                 //按钮容器,绝对定位在右下角                 p.append(‘<div id="picbtnHolder" style="position:absolute;top:‘+(h-25)+‘px;width:‘+w+‘px;height:20px;z-index:10000;"></div>‘);                 //                 var btnHolder = $(‘#picbtnHolder‘);                 btnHolder.append(‘<div id="picbtns" style="float:right; padding-right:1px;"></div>‘);                 var btns = $(‘#picbtns‘);                 //                 for(var i=0;i<pics.length;i++)                 {                     //增加图片对应的按钮                     btns.append(‘<span id="picbtn‘+i+‘" style="cursor:pointer; border:solid 1px #ccc;background-color:#eee; display:inline-block;"> ‘+(i+1)+‘ </span> ‘);                     $(‘#picbtn‘+i).data(‘index‘,i);                     $(‘#picbtn‘+i).click(                         function(event)                         {                             if(selectedItem.attr(‘src‘) == $(‘#picitem‘+$(this).data(‘index‘)).attr(‘src‘))                             {                                 return;                             }                             setSelectedItem($(this).data(‘index‘));                         }                     );                 }                 btns.append(‘ ‘);                 ///                 setSelectedItem(0);                 //显示指定的图片index                 function setSelectedItem(index)                 {                     selectedIndex = index;                     clearInterval(playID);                     //alert(index);                     if(selectedItem)selectedItem.fadeOut(‘fast‘);                     selectedItem = $(‘#picitem‘+index);                     selectedItem.fadeIn(‘slow‘);                     //                     if(selectedBtn)                     {                         selectedBtn.css(‘backgroundColor‘,‘#eee‘);                         selectedBtn.css(‘color‘,‘#000‘);                     }                     selectedBtn = $(‘#picbtn‘+index);                     selectedBtn.css(‘backgroundColor‘,‘#000‘);                     selectedBtn.css(‘color‘,‘#fff‘);                     //自动播放                     playID = setInterval(function()                     {                         var index = selectedIndex+1;                         if(index > pics.length-1)index=0;                         setSelectedItem(index);                     },pics[index].time);                 }             }                      </script>              </body> </html>

  

图片轮播