jquery实现图片切换代码

本文实例为大家分享了jquery实现图片切换的方法，供大家参考，具体内容如下

<html> <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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。