zoukankan      html  css  js  c++  java
  • 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;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;'+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>

  • 相关阅读:
    git 使用详解(6) 撤消操作
    git 使用详解(7) 远程仓库的使用
    git 使用详解(8) 分支HEAD
    PHP抓取网页内容的方法
    PHP的feof()方法需要注意的地方
    PHP获取变量的变量名的一段代码的bug
    关于php的unset
    if、while中变量的作用域问题
    codeigniter的url重写问题(去掉index.php路由)
    PHP书写规范 PHP Coding Standard
  • 原文地址:https://www.cnblogs.com/javawebsoa/p/3086088.html
Copyright © 2011-2022 走看看