首页 > 代码库 > 使用javascript,jquery实现的图片轮播功能
使用javascript,jquery实现的图片轮播功能
使用javascript,jquery实现的图片轮播功能
本功能采用最基础的javascript和一些简单的jquery技术实现，易理解，以修改使用，代码简易，适合刚开始接触到网站开发的朋友们参考。可以直接把代码copy下来，放入一个html 文件即可，然后把jquery文件放在同一个文件夹下就可以了。
文件下载地址：http://download.csdn.net/detail/xyytcs/5037545
<!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></title> <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script><style type="text/css">#picplayer{overflow:hidden;clear:none;margin:0px;width:754px; height:380px; z-index:0;}#piccontent img{display:none;width:100%;height:100%;}#picbtnHolder{position:absolute;top:360px; left:138px;height:20px;z-index:1;}#picbtns span{cursor:pointer; width:80px;text-align:center; border:solid 1px #ccc;background-color:#eee; display:inline-block;}</style><script type="text/javascript"> function initImg() { $("#piccontent img").css("display", "none"); $("#picbtns span").css("background-color", "#eee"); $("#picbtns span").css("color", "Black"); } function showImg(index) { $("#piccontent img:eq(" + index + ")").css("display", "block"); $("#picbtns span:eq(" + index + ")").css("background-color", "Black"); $("#picbtns span:eq(" + index + ")").css("color", "#fff"); } var index = 1; setInterval(changeImg, 3000); function changeImg() { initImg(); var imgSum = $("#picbtns >span").length; if (index == imgSum) { index = 0; } showImg(index); index++; } $(function () { $("#picbtns span").each( function (index) { $("#picbtns span:eq(" + index + ")").hover( function (oEvent) { initImg(); showImg(index); }, function (oEvent) { } ); } ); });</script></head><body><div id="picplayer"> <div id="piccontent"><!--要保留一个图片默认显示，以免设定的时间没有到之前图片会空白显示--> <a href="http://www.baidu.com" target="_blank"><img id="picitem1" style="display: block;" src="http://image.xzyd.net/66/image/ad/20121221/20121221123200.jpg" /></a> <a href="http://www.baidu.com" target="_blank"><img id="picitem2" src="http://image.xzyd.net/66/image/ad/20121221/20121221123028.jpg" /></a> <a href="http://www.baidu.com" target="_blank"><img id="picitem3" src="http://image.xzyd.net/66/image/ad/20121221/20121221123143.jpg" /></a> <a href="http://www.baidu.com" target="_blank"><img id="picitem4" src="http://img04.taobaocdn.com/imgextra/i4/822486065/T2ueijXipcXXXXXXXX_!!822486065.jpg" /></a> <a href="http://www.baidu.com" target="_blank"><img id="picitem5" src="http://img02.taobaocdn.com/imgextra/i2/822486065/T2iH0vXjVNXXXXXXXX_!!822486065.jpg" /></a> <a href="http://www.baidu.com" target="_blank"><img id="picitem6" src="http://img04.taobaocdn.com/imgextra/i4/822486065/T2vI2bXnFXXXXXXXXX_!!822486065.jpg" /></a> </div> <div id="picbtnHolder"> <div id="picbtns"> <!--增加图片对应的按钮--> <span id="picbtn1" style="background-color:Black;color:#fff;">1 </span> <span id="picbtn2">2 </span> <span id="picbtn3">3 </span> <span id="picbtn4">4</span> <span id="picbtn5">5 </span> <span id="picbtn6">6 </span> </div> </div> </div></body></html>
使用javascript,jquery实现的图片轮播功能
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。