小练习：图片轮播jQuery版
2011-03-10 11:51
519 查看
学习JS也有一段时间了，这是我花了近一天的时间做的练习，不会的函数就翻翻jQuery的帮助文档，还算做的比较顺利。兼容ie6（有一点点兼容性问题但不影响功能）、7、8和ff，还有一个小问题，就是ie8好像不支持jQuery的fadeIn()方法，因此ie8下没有渐变的切换效果，不知什么原因。
效果预览（预览有问题请把代码拷回本地html预览）：
这是题目
1
2
3
4
// $(document).ready(function(){
var time=2000;//图片延时
var curImgID=0;//当前显示图片的序号
var intervalID=setInterval(imgToggle,time);
$(".img_title a").text($(".cur_img").attr("title"));
$(".img_title a").attr("title",$(".cur_img").attr("title"));
$(".img_title a").attr("href",$(".cur_img").attr("href"));
$(".imgID a").click(function(){
clearInterval(intervalID);//先停止定时器，保证点击了某项的时候该项有足够的时间显示
$(".cur_img").css({display:"none"});//除了cur_img外的其余图片设置为不可见
$(".cur_img").removeClass("cur_img");
$(".imgbox a").eq($(".imgID a").index($(this))).fadeIn("slow");//选择对应的按钮序号的图片显示，this指向你按下的按钮
$(".imgbox a").eq($(".imgID a").index($(this))).addClass("cur_img");
$(".cur_ID").removeClass("cur_ID");
$(this).addClass("cur_ID");
change();//change函数主要是把处理img_title的a标签的相关操作放到一起
intervalID=setInterval(imgToggle,time);
});
$(".img_title a").click(function(){
alert($(this).attr("href"));//响应点击题目
});
$(".imgbox img").click(function(){
alert($(this).parent().attr("href"));//响应点击图片
});
function imgToggle(){
curImgID=$(".imgID a").index($(".cur_ID"));//当前按钮的序号，与当前图片序号对应
$(".imgbox .all").css({display:"none"});//除了cur_img外的其余图片设置为不可见
$(".cur_img").removeClass("cur_img");
if(curImgID==$(".imgID a").length-1){
curImgID=0;
}else{curImgID+=1;}
$(".imgbox a").eq(curImgID).fadeIn("slow");
$(".imgbox a").eq(curImgID).addClass("cur_img");
$(".cur_ID").removeClass("cur_ID");
$(".imgID a").eq(curImgID).addClass("cur_ID");
change();
}
function change(){
$(".img_title a").attr("title",$(".cur_img").attr("title"));
$(".img_title a").text($(".cur_img").attr("title"));
$(".img_title a").attr("href",$(".cur_img").attr("href"));
}
});
// ]]>
代码：
==================================================
作者：绿色花园
出处：/article/5916739.html
==================================================
// if ($ != jQuery) {
$ = jQuery.noConflict();
}
var isLogined = true;
var cb_blogId = 74164;
var cb_entryId = 1977249;
var cb_blogApp = "cos2004";
var cb_blogUserGuid = "8a1e602a-c7a1-df11-8eb9-001cf0cd104b";
var cb_entryCreatedDate = '2011/3/8 14:56:00';
// ]]>
效果预览（预览有问题请把代码拷回本地html预览）：
这是题目
1
2
3
4
// $(document).ready(function(){
var time=2000;//图片延时
var curImgID=0;//当前显示图片的序号
var intervalID=setInterval(imgToggle,time);
$(".img_title a").text($(".cur_img").attr("title"));
$(".img_title a").attr("title",$(".cur_img").attr("title"));
$(".img_title a").attr("href",$(".cur_img").attr("href"));
$(".imgID a").click(function(){
clearInterval(intervalID);//先停止定时器，保证点击了某项的时候该项有足够的时间显示
$(".cur_img").css({display:"none"});//除了cur_img外的其余图片设置为不可见
$(".cur_img").removeClass("cur_img");
$(".imgbox a").eq($(".imgID a").index($(this))).fadeIn("slow");//选择对应的按钮序号的图片显示，this指向你按下的按钮
$(".imgbox a").eq($(".imgID a").index($(this))).addClass("cur_img");
$(".cur_ID").removeClass("cur_ID");
$(this).addClass("cur_ID");
change();//change函数主要是把处理img_title的a标签的相关操作放到一起
intervalID=setInterval(imgToggle,time);
});
$(".img_title a").click(function(){
alert($(this).attr("href"));//响应点击题目
});
$(".imgbox img").click(function(){
alert($(this).parent().attr("href"));//响应点击图片
});
function imgToggle(){
curImgID=$(".imgID a").index($(".cur_ID"));//当前按钮的序号，与当前图片序号对应
$(".imgbox .all").css({display:"none"});//除了cur_img外的其余图片设置为不可见
$(".cur_img").removeClass("cur_img");
if(curImgID==$(".imgID a").length-1){
curImgID=0;
}else{curImgID+=1;}
$(".imgbox a").eq(curImgID).fadeIn("slow");
$(".imgbox a").eq(curImgID).addClass("cur_img");
$(".cur_ID").removeClass("cur_ID");
$(".imgID a").eq(curImgID).addClass("cur_ID");
change();
}
function change(){
$(".img_title a").attr("title",$(".cur_img").attr("title"));
$(".img_title a").text($(".cur_img").attr("title"));
$(".img_title a").attr("href",$(".cur_img").attr("href"));
}
});
// ]]>
代码：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片轮播jQuery版</title>
</head>
<style>
* {margin:0;padding:0;}
body{ background:#fff}
.box {width:400px;height:300px;margin:100px auto;}
.imgbox {border:1px solid #3CF;width:400px;height:300px;position:relative;}
.imgbox img{ border:none}
.imgbox .all{display:none;}
.imgbox a.cur_img {display:inline;}
.title-bg {width:400px;height:30px;background:#000;filter:Alpha(Opacity=40);opacity:0.4;position:absolute;bottom:0;*position:absolute;*left:0;}
.imgID {width:400px;height:20px;position:absolute;bottom:5px;left:5px;}
.imgID ul {height:20px;width:380px;}
.imgID li {display:inline;z-index:9999;list-style:none;width:20px;height:20px;color:#fff;}
.imgID li a {display:inline-block;width:20px;height:20px;border:1px solid #fff;background:#999;color:#fff;font-weight:bold;text-decoration:none;text-align:center;}
.imgID .cur_ID{background:#F0F}
.imgID li a:hover {background:#F0F;}
.img_title{ position:absolute; left:150px; bottom:0px; height:30px; font-weight:bold;font-size:15px; cursor:pointer; z-index:9000;}
.img_title a{color:#FFF;}
#title{ display:block;height:30px; line-height:30px; text-decoration:none}
#title:visited{ color:#fff}
</style>
<body>
<div class="box">
<div class="imgbox"> <a href="#1" title="喜羊羊与灰太狼" class="cur_img all"><img src="https://oscdn.geek-share.com/Uploads/Images/Content/202005/11/ecd76a5102b55a97ec9d9796a1e15402.jpg" /></a> <a href="#2" title="大闹天宫" class="all"><img src="https://oscdn.geek-share.com/Uploads/Images/Content/202005/11/42f22afe2a999b04d42d7c1b374ac954.jpg" /></a> <a href="#3" title="猫和老鼠" class="all"><img src="https://oscdn.geek-share.com/Uploads/Images/Content/202005/11/83712e1ba756b387d94cb1aada0715f5.jpg" /></a> <a href="#4" title="狮子王" class="all"><img src="https://oscdn.geek-share.com/Uploads/Images/Content/202005/11/112f8c839fe0bdb44a891475265f90f7.jpg" /></a>
<div class="title-bg"></div>
<div class="img_title"><a href="#" title="" id="title">这是题目</a></div>
<div class="imgID">
<ul>
<li><a href="javascript:void(0);" class="cur_ID">1</a></li>
<li><a href="javascript:void(0);">2</a></li>
<li><a href="javascript:void(0);">3</a></li>
<li><a href="javascript:void(0);">4</a></li>
</ul>
</div>
</div>
</div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var time=2000;//图片延时
var curImgID=0;//当前显示图片的序号
var intervalID=setInterval(imgToggle,time);
$(".img_title a").text($(".cur_img").attr("title"));
$(".img_title a").attr("title",$(".cur_img").attr("title"));
$(".img_title a").attr("href",$(".cur_img").attr("href"));
$(".imgID a").click(function(){
clearInterval(intervalID);//先停止定时器，保证点击了某项的时候该项有足够的时间显示
$(".cur_img").css({display:"none"});//除了cur_img外的其余图片设置为不可见
$(".cur_img").removeClass("cur_img");
$(".imgbox a").eq($(".imgID a").index($(this))).fadeIn("slow");//选择对应的按钮序号的图片显示，this指向你按下的按钮
$(".imgbox a").eq($(".imgID a").index($(this))).addClass("cur_img");
$(".cur_ID").removeClass("cur_ID");
$(this).addClass("cur_ID");
change();//change函数主要是把处理img_title的a标签的相关操作放到一起
intervalID=setInterval(imgToggle,time);
});
$(".img_title a").click(function(){
alert($(this).attr("href"));//响应点击题目
});
$(".imgbox img").click(function(){
alert($(this).parent().attr("href"));//响应点击图片
});
function imgToggle(){
curImgID=$(".imgID a").index($(".cur_ID"));//当前按钮的序号，与当前图片序号对应
$(".imgbox .all").css({display:"none"});//除了cur_img外的其余图片设置为不可见
$(".cur_img").removeClass("cur_img");
if(curImgID==$(".imgID a").length-1){
curImgID=0;
}else{curImgID+=1;}
$(".imgbox a").eq(curImgID).fadeIn("slow");
$(".imgbox a").eq(curImgID).addClass("cur_img");
$(".cur_ID").removeClass("cur_ID");
$(".imgID a").eq(curImgID).addClass("cur_ID");
change();
}
function change(){
$(".img_title a").attr("title",$(".cur_img").attr("title"));
$(".img_title a").text($(".cur_img").attr("title"));
$(".img_title a").attr("href",$(".cur_img").attr("href"));
}
});
</script>
</html>==================================================
作者：绿色花园
出处：/article/5916739.html
==================================================
// if ($ != jQuery) {
$ = jQuery.noConflict();
}
var isLogined = true;
var cb_blogId = 74164;
var cb_entryId = 1977249;
var cb_blogApp = "cos2004";
var cb_blogUserGuid = "8a1e602a-c7a1-df11-8eb9-001cf0cd104b";
var cb_entryCreatedDate = '2011/3/8 14:56:00';
// ]]>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery实现图片轮播小练习
- jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
- Jquery+css实现图片无缝滚动轮播
- jQuery图片轮播(焦点图)插件
- 12款经典的白富美型—jquery图片轮播插件—前端开发必备
- jQuery右侧选项卡焦点图片轮播特效代码分享
- jquery图片轮播插件开发过程
- 练习：图片轮播（设定自动滚动功能）
- 使用Jquery实现图片轮播效果
- jQuery图片轮播插件 jQuery Cycle Plugin
- Jquery图片轮播和CSS图片轮播
- 使用jQuery做简单的图片轮播效果
- jQuery实现图片轮播
- 简单的jQuery banner图片轮播实例代码
- jQuery 插件 jCarousel Lite 图片横向轮播
- 缩略图图片【原创】jQuery插件之图片轮播
- jquery学习之——图片轮播的代码解释
- jquery 图片轮播
- JQuery 图片滚动轮播的雏形