js实现图片轮播

<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> 
<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="'+pics .link+'" target="_blank"><img id="picitem'+i+'" style="display: none;z-index:'+i+'" src="'+pics.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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值