首页 > 代码库 > jqeury之平移轮播
jqeury之平移轮播
<!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>
<link href="http://www.mamicode.com/yangshi/css.css" rel="stylesheet" type="text/css" />
<script src="http://www.mamicode.com/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var timer; //定时器
var curno = 1;
var length = $(".lunbo ul li").length; //有几张图片
$(".lunbo ul").css("width", length * 137 + "px");
$(".topimg").hover(function () {
//鼠标移上去执行的内容
clearInterval(timer);
}, function () {
//鼠标移走时执行的内容
timer = setInterval(scroll, 3000);
}).trigger("mouseover"); //trigger("mouseover")窗体加载的时候就触发一次mouseover事件
$(".lunbo").hover(function () {
//鼠标移上去执行的内容
clearInterval(timer);
}, function () {
//鼠标移走时执行的内容
timer = setInterval(scroll, 3000);
})
$(".lunbo .bl").click(function () {
if (curno == 0) {
}
else {
curno--;
}
$(".lunbo .thumb .li ul li").eq(curno).fadeTo(1000, 1).siblings().fadeTo(1000, 0.3);
var src = http://www.mamicode.com/$(".lunbo .thumb .li ul li:eq(" + curno + ") img").attr("src");
$(".topimg img").attr("src", src); //上面图片显示
if (curno == 0) {
$(‘.lunbo ul‘).stop(true, false).animate({ left: "0px" }, 1000);
}
else if (curno > 2 && curno + 2 < length) {
$(".lunbo ul").css("margin-left", 0);
var nowLeft = -(curno - 2) * "137" + "px";
$(‘.lunbo ul‘).stop(true, false).animate({ left: nowLeft }, 1000);
}
})
$(".lunbo .br").click(function () {
if (curno == 0) {
}
else {
curno++;
}
$(".lunbo .thumb .li ul li").eq(curno).fadeTo(1000, 1).siblings().fadeTo(1000, 0.3);
var src = http://www.mamicode.com/$(".lunbo .thumb .li ul li:eq(" + curno + ") img").attr("src");
$(".topimg img").attr("src", src); //上面图片显示
if (curno == 0) {
$(‘.lunbo ul‘).stop(true, false).animate({ left: "0px" }, 1000);
}
else if (curno > 2 && curno + 2 < length) {
$(".lunbo ul").css("margin-left", 0);
var nowLeft = -(curno - 2) * "137" + "px";
$(‘.lunbo ul‘).stop(true, false).animate({ left: nowLeft }, 1000);
}
})
function scroll() {
//轮播图高亮显示
$(".lunbo .thumb .li ul li").eq(curno).fadeTo(1000, 1).siblings().fadeTo(1000, 0.3);
var src = http://www.mamicode.com/$(".lunbo .thumb .li ul li:eq(" + curno + ") img").attr("src");
$(".topimg img").attr("src", src); //上面图片显示
if (curno == 0) {
$(‘.lunbo ul‘).stop(true, false).animate({ left: "0px" }, 1000);
}
else if (curno > 2 && curno + 2 < length) {
$(".lunbo ul").css("margin-left", 0);
var nowLeft = -(curno - 2) * "137" + "px";
$(‘.lunbo ul‘).stop(true, false).animate({ left: nowLeft }, 1000);
}
curno++;
if (curno == length) {
curno = 0;
}
}
})
</script>
</head>
<body>
<div class="topimg"><img src="http://www.mamicode.com/image/1.jpg" /></div>
<div class="lunbo">
<div class="thumb">
<div class="b bl"></div>
<div class="li">
<ul>
<li><img src="http://www.mamicode.com/image/1.jpg" /></li>
<li><img src="http://www.mamicode.com/image/2.jpg" /></li>
<li><img src="http://www.mamicode.com/image/3.jpg" /></li>
<li><img src="http://www.mamicode.com/image/4.jpg" /></li>
<li><img src="http://www.mamicode.com/image/5.jpg" /></li>
<li><img src="http://www.mamicode.com/image/6.jpg" /></li>
<li><img src="http://www.mamicode.com/image/7.jpg" /></li>
</ul>
</div>
<div class="b br"></div>
</div>
</div>
</body>
</html>
jqeury之平移轮播
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。