<!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资源评论
易小侠
- 粉丝: 6633
- 资源: 9万+
最新资源
- 基于flask和bootstrap的实验室预约系统全部资料+详细文档.zip
- 基于Python+Flask开发的Web应用防火墙全部资料+详细文档.zip
- 基于Python3 + Flask 编写的物业信息管理系统全部资料+详细文档.zip
- 机械设计双层结构摇匀机（sw16可编辑+工程图+BOM）全套设计资料100%好用.zip
- 光伏MPPT仿真-模糊控制
- 储能的削峰填谷作用，如下图所示的削峰填谷数学模型，利用cplex求解混合整数规划可得结果
- 企业网络搭建及应用竞赛模拟答题卡-网络配置与安全管理方案
- 基于Java web高校学生综合管理系统的设计与开发全部资料+详细文档.zip
- 基于Java的大学社团管理系统，高校社团管理全部资料+详细文档.zip
- 基于jsp+javabean+servlet模式的高校学生党员信息管理系统全部资料+详细文档.zip
- 基于java的高校排课教务系统全部资料+详细文档.zip
- 基于Springboot+layui+mybatis+shiro等框架高校教务管理系统全部资料+详细文档.zip
- 基于Springboot+Vue3+MySql搭建高校社团管理系统全部资料+详细文档.zip
- 基于Springboot+Vue高校学科竞赛平台毕业源码案例设计全部资料+详细文档.zip
- 基于SpringBoot+Vue实现的高校毕业生就业服务平台全部资料+详细文档.zip
- 基于Springboot的高校学科竞赛管理系统全部资料+详细文档.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
