<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="JS代码,图片轮播,幻灯片,图片切换,幻灯展示,jQuery" />
<meta name="description" content="jQuery实现的超牛图片轮播效果，更多图片轮播,幻灯片,图片切换,幻灯展示,jQuery请访问脚本之家JS代码频道。" />
<title>jQuery实现的超牛图片轮播效果_脚本之家</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var total = $("#img_box img").length;
$("#imglink1 img").css({
"border-color": "#0099cc",
"top": "-5px"
});
$(".thumblink").click(function() {
var imgnumber = parseInt($(this).attr('id').replace("imglink", ""));
var move = -($("#img"+imgnumber).width() * (imgnumber - 1));
$("#img_box").animate({
left: move
}, 500);
$("#imgthumb_box").find("img").removeAttr("style");
$(this).find("img").css({
"border-color": "#0099cc",
"top": "-5px",
"border-top-width": "-5px"
});
return false;
});
$("#navigate a").click(function() {
var imgwidth = $("#img1").width();
var box_left = $("#img_box").css("left");
var el_id = $(this).attr("id");
var move, imgnumber;
if (box_left == 'auto') {
box_left = 0;
} else {
box_left = parseInt(box_left.replace("px", ""));
}
// if prev
if (el_id == 'linkprev') {
if ((box_left - imgwidth) == -(imgwidth)) {
move = -(imgwidth * (total - 1));
} else {
move = box_left + imgwidth;
}
imgnumber = -(box_left / imgwidth);
if (imgnumber == 0) {
imgnumber = total;
}
} else if (el_id == 'linknext') {
// if in the last image, move to first
if (-(box_left) == (imgwidth * (total - 1))) {
move = 0;
} else {
move = box_left - imgwidth;
}
imgnumber = Math.abs((box_left / imgwidth)) + 2;
if (imgnumber == (total + 1)) {
imgnumber = 1;
}
} else if (el_id == 'linkfirst') {
move = 0;
imgnumber = 1;
} else if (el_id == 'linklast') {
move = -(imgwidth * (total - 1));
imgnumber = total;
}
// styling selected image
$("#imgthumb_box").find("img").removeAttr("style");
$("#imglink"+imgnumber).find("img").css({
"border-color": "#0099cc",
"top": "-5px",
"border-top-width": "-5px"
});
$("#navigate a").hide();
$("#navigate span").show();
$("#img_box").animate({
left: move+'px'
}, 400, function() {
$("#navigate a").show();
$("#navigate span").hide();
});
return false;
});
});
</script>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: Arial, "Free Sans";
}
#main {
background: #0099cc;
margin-top: 0;
padding: 2px 0 4px 0;
text-align: center;
}
#main a {
color: #ffffff;
text-decoration: none;
font-size: 12px;
font-weight: bold;
font-family: Arial;
}
#main a:hover {
text-decoration: underline;
}
#container {
margin-top: 40px;
}
#navigate {
text-align: center;
}
#navigate a, span {
position: relative;
top: 3px;
background: #0099cc;
text-decoration: none;
color: #fff;
padding: 4px 8px 0 8px;
font-size: 20px;
font-weight: bold;
-webkit-border-radius: .3em .3em 0 0;
-moz-border-radius: .3em .3em 0 0;
border-radius: .3em .3em 0 0;
}
#navigate a:hover {
color: #d3d3d3;
}
#navigate span {
display: none;
color: #999;
}
#img_container {
overflow: hidden;
width: 500px;
margin: 0 auto;
border: 8px solid #0099cc;
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
}
#img_box {
position: relative;
width: 3000px;
margin: 0;
}
#img_box img {
float: left;
}
#imgthumb_box {
text-align: center;
}
#imgthumb_box a {
margin-left: 4px;
}
#imgthumb_box a img {
border: 6px solid #e3e3e3;
position: relative;
top: 10px;
-webkit-border-radius: .3em;
-moz-border-radius: .3em;
border-radius: .3em;
}
#imgthumb_box a img:hover {
border-color: #666;
}
</style>
</head>
<body>
<div id="main">
<a href="http://superdit.com">Superdit.com</a>
<a href="http://superdit.com/2011/04/18/simple-images-slideshow-with-jquery">Back To Post</a>
<a href="http://www.box.net/shared/a53ldhpthf">Download Source</a>
</div>
<div id="container">
<div id="navigate">
<a href="" id="linkfirst">« first</a>
<span id="spanfirst">« first</span>
<a href="" id="linkprev">‹ prev</a>
<span id="spanprev">‹ prev</span>
<a href="" id="linknext">next ›</a>
<span id="spannext">next ›</span>
<a href="" id="linklast">last »</a>
<span id="spanlast">last »</span>
</div>
<div id="img_container">
<div id="img_box">
<img id="img1" src="img/original/01.jpg"/>
<img id="img2" src="img/original/02.jpg"/>
<img id="img3" src="img/original/03.jpg"/>
<img id="img4" src="img/original/04.jpg"/>
<div style="clear:both;"></div>
</div>
</div>
<div id="imgthumb_box">
<a href="" class="thumblink" id="imglink1"><img src="img/thumb/01.jpg"/></a>
<a href="" class="thumblink" id="imglink2"><img src="img/thumb/02.jpg"/></a>
<a href="" class="thumblink" id="imglink3"><img src="img/thumb/03.jpg"/></a>
<a href="" class="thumblink" id="imglink4"><img src="img/thumb/04.jpg"/></a>
</div>
</div>
<div style="text-align:center;clear:both">
<p>来源：<a href="http://www.jb51.net" target="_blank">aditia rahman</a> 代码整理：<a href="http://www.jb51.net" target="_blank">脚本之家</a> 感谢：<a href="http://www.jb51.net" target="_blank">弗拉纳根</a></p>
<p>转载请注明出处，此代码仅供学习交流，请勿用于商业用途。</p>
</div>
</body>
</html>
jQuery实现的超牛图片轮播左右滑动效果.zip （9个子文件） 
132689925703222045 img thumb 
01.jpg 3KB 04.jpg 3KB 03.jpg 3KB 02.jpg 3KB original 01.jpg 92KB 04.jpg 111KB 03.jpg 156KB 02.jpg 160KB
index.html 8KB资源评论
易小侠
- 粉丝: 6606
- 资源: 9万+
最新资源
- 学校课程软件工程常见10道题目以及答案demo
- javaweb新手开发中常见的目录结构讲解
- 新手小白的git使用的手册入门学习demo
- 基于Java观察者模式的info-express多对多广播通信框架设计源码
- 利用python爬取豆瓣电影评分简单案例demo
- 机器人开发中常见的几道问题以及答案demo
- 基于SpringBoot和layuimini的简洁美观后台权限管理系统设计源码
- 实验报告五六代码.zip
- hdw-dubbo-ui基于vue、element-ui构建开发，实现后台管理前端功能.zip
- （Grafana + Zabbix + ASP.NET Core 2.1 + ECharts + Dapper + Swagger + layuiAdmin）基于角色授权的权限体系.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
