你的位置:首页 > Java教程

[Java教程]jquery实现图片切换和js实现图片切换


jquery实现图片切换:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html ="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <title></title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script> <script>  $(function(){    var num2=6;//用于设置当前选中ol li的z-index值    $('ol li').mouseover(function(e){      $(this).attr('class','current');      $(this).siblings().attr('class','');      num2++;      var num=$(this).index();//存ol li的序列号      $('ul li').eq(num).css('z-index',num2);      $('ul li').eq(num).css('left','600px');//修改ul li对应的序列号的样式,先把它的位置绝对定位到div外面      //$('ul li').eq(num).css('left','0');这句是静态css,下一句是动态css      $('ul li').eq(num).animate({left:'0'},50);//然后把它的位置又重新绝对定位到父元素上面 这样就实现了一个动画的效果    });  }); </script> <style>  *{    padding:0;margin:0;border:0;  }  .all{/*div的宽高设置成和五张图片的宽高一样*/    width:600px;    height:300px;    margin:100px auto;/*div居中*/    position:relative;/*相对定位,便于子元素使用绝对定位*/    overflow:hidden;/*隐藏超出部分的图片*/  }  .all ul{    position:relative;    z-index:1;  }  .all ul li{    position:absolute;    left:0;    top:0;  }  .all ol{    position:absolute;    z-index:2;/*显示在ul上面*/    right:10px;    bottom:10px;  }  .all ol li{    width:20px;    height:20px;    background:#333;    border:1px solid #ccc;    font-weight:bold;    text-align:center;/*左右居中*/    line-height:20px;/*文本上下居中*/    float:left;    list-style:none;    margin-left:10px;    color:#ccc;    margin-top:10px;/*让放大的li和没有放大的li下边框对其*/  }  .all ol .current{    width:30px;    height:30px;    line-height:30px;    border:1px solid #f60;    color:#f60;    margin-top:0;/*让放大的li和没有放大的li下边框对其*/    cursor:pointer;/*增强用户体验 变小手*/  } </style> </head> <body> <div class="all">  <ul>    <li><img src="01.jpg" width="600" height="300"/></li>    <li><img src="02.jpg" width="600" height="300"/></li>    <li><img src="03.jpg" width="600" height="300"/></li>    <li><img src="04.jpg" width="600" height="300"/></li>    <li><img src="05.jpg" width="600" height="300"/></li>  </ul>  <ol>    <li>1</li>    <li>2</li>    <li>3</li>    <li>4</li>    <li class="current">5</li>  </ol> </div> </body></html>

 

 

 

javascript实现图片切换:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html ="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <title></title> <style>  *{    margin:0;    padding:0;  }  .all{    width:600px;    height:350px;    position:relative;    overflow:hidden;    margin:100px auto;  }  .all ul{    z-index:1;    position:relative;  }  .all ul li{    position:absolute;    top:0;    left:0;  }  .all ol{    position:absolute;    right:10px;    bottom:10px;    z-index:2;  }  .all ol li{    width:20px;    height:20px;    border:1px solid #fff;    background-color:#333;    float:left;    overflow:hidden;    margin-right:10px;    text-align:center;    line-height:20px;    color:#fff;    margin-top:10px;    font-weight:bold;  }  .all ol .current{    width:30px;    height:30px;    border:1px solid #f60;    color:#f60;    line-height:30px;    margin-top:0;    cursor:pointer;  } </style>  <script>  //通过id值获得元素的函数  function $(id){    return document.getElementById(id);  }    //初始化函数  function initial(){    olLi=document.getElementsByTagName('ol')[0].getElementsByTagName('li');//获取ol下的li    ol=$('tab');//获取ol元素    theImg=$('theImg');    //五张图片的地址    addressPic=['01.jpg','02.jpg','03.jpg','04.jpg','05.jpg'];        //遍历ol下的li    for(var i=0;i<olLi.length;i++){      //依次给每个li绑定mouseover事件,该事件执行切换图片的函数      olLi[i].addEventListener('mouseover',changePicture,false);      olLi[i].index=i;//设置ol li的index序列号          }  }      //切换图片  function changePicture(e){    e.target.className="current";//将选中的ol下的li的class属性设置为current,e.target代表选中的li        //清除ol里的空白节点    cleanWhitespace(ol);        //删除除当前选中的li外其他li的class属性值    nextNode=e.target.nextSibling;//当前节点的下一个节点    lastNode=e.target.previousSibling;//当前节点的前一个节点    while(nextNode){//将当前节点后所有的兄弟节点的class属性清除      nextNode.setAttribute('class','');      nextNode=nextNode.nextSibling;    }    while(lastNode){//将当前节点前面所有的兄弟节点的class属性清除      lastNode.className='';      lastNode=lastNode.previousSibling;    }        //实现切换图片的功能      theImg.src=addressPic[this.index];  }      //清除ol下的空白节点  function cleanWhitespace(oElement)  {    for(var i=0;i<oElement.childNodes.length;i++){      var node=oElement.childNodes[i];      if(node.nodeType==3 && !/\S/.test(node.nodeValue)){           node.parentNode.removeChild(node)      }  }}  //给窗体绑定load事件,执行初始化函数initial()  window.addEventListener('load',initial,false); </script> </head> <body> <div class="all">  <ul>    <li><img id="theImg" src="01.jpg" width="600px" height="350px"/></li>  </ul>  <ol id="tab">    <li>1</li>    <li>2</li>    <li>3</li>    <li>4</li>    <li class="current">5</li>  </ol> </div> </body></html>