JQuery焦点图幻灯片问题
图中图片轮播弄好了，但是是参照别人的JS文件的。目前需要加右下角的5个小图片按钮，实在不懂怎么整合进去，求高手发一份类似的实现这种功能的代码，最好是JQuery的。谢谢...
图中图片轮播弄好了，但是是参照别人的JS文件的。目前需要加右下角的5个小图片按钮，实在不懂怎么整合进去，求高手发一份类似的实现这种功能的代码，最好是JQuery的。谢谢
展开
2个回答
展开全部
有问题再追问把。
希望我的回答能帮到你哈，有问题可以追问，觉得好就点个赞，有用就采纳！
更多追问追答
追问
我这个还要实现左右按钮切换图片，你还有相关类似的吗？
追答
明天再看一下
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE html>
<html xmlns="
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="Scripts/jquery-1.7.1.min.js"></script>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
li
{
float:left;
margin:0;
padding:5px;
}
li img
{
width:100px;
height:80px;
}
.li_border
{
border:5px solid #0094ff;
padding:0;
}
</style>
<script>
$(function () {
imgTranstion.transtion();
});
var imgTranstion = {
timer: undefined,
transtion: function () {
var ul = $("#imgtran").children("ul");
var div = $("#imgtran").children("div");
var tmp = function () {
imgTranstion.timer = window.setInterval(function () {
var li = ul.children("li.li_border").removeClass("li_border").next();
if (li.length) {
li.addClass("li_border");
} else {
li = ul.children("li").eq(0).addClass("li_border");
}
div.children("img").fadeOut(200, function () {
$(this).attr("src", li.children("img").attr("src")).fadeIn(200);
});
}, 3000);
}
ul.find("img").hover(function () {
window.clearInterval(imgTranstion.timer);
ul.children("li").removeClass("li_border");
$(this).parent("li").addClass("li_border");
var me = this;
div.children("img").fadeOut(200, function () {
$(this).attr("src", $(me).attr("src")).fadeIn(200);
});
}, function () {
tmp();
});
tmp();
}
};
</script>
</head>
<body>
<div style="border:1px solid red; width:550px;" id="imgtran">
<div>
<img src="imgs/1.JPG" style="width:550px; height:413px;"/>
</div>
<ul>
<li class="li_border">
<img src="imgs/1.JPG" /></li>
<li>
<img src="imgs/2.JPG" /></li>
<li>
<img src="imgs/3.JPG" /></li>
<li>
<img src="imgs/4.JPG" /></li>
<li>
<img src="imgs/5.JPG" /></li>
</ul>
<br style="clear:both" />
</div>
</body>
</html>
自己运行看看吧，原理很简单，记得加入jquery引用
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
