您的位置：首页 > Web前端 > JQuery

使用javascript,jquery实现的图片轮播功能

2014-09-18 21:14 1026 查看
使用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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航