[HTML] 纯文本查看 复制代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jquery内容左右切换效果</title>
<style type="text/css">
.wrap { float: left; position: relative; width: 247px; height: 150px; z-index: 1; overflow: hidden; }
.cc { height: 140px; position: absolute; top: 0px; left: -494px; z-index: 2; overflow: hidden; }
.btn { float: left; width: 11px; margin-top: 70px; z-index: 3; }
.cc p.con { width: 238px; height: 135px; background: #ffecc4; }
</style>
<script src="dummy-images/jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
var leftsize = -494;
$(document).ready(function () {
$("#btn_l").click(function () {
if (leftsize > -247) {
leftsize = leftsize - 247;
$(".cc").animate({ "left": leftsize });
}
else if (leftsize = -247) {
leftsize = leftsize - 247;
$(".cc").animate({ "left": leftsize });
}
else { $(".cc").css('left', '0px'); }
});
$("#btn_r").click(function () {
if (leftsize < -247) {
leftsize = leftsize + 247;
$(".cc").animate({ "left": leftsize });
}
else if (leftsize = -247) {
leftsize = leftsize + 247;
$(".cc").animate({ "left": leftsize });
}
else { $(".cc").css('left', '-494px'); }
});
});
var i = 1;
var f = true;
function auto() {
if (f) {
$("#btn_r").click();
i++;
if (i == 4) {
f = false;
i = 1;
}
} else {
$("#btn_l").click();
i++;
if (i == 4) {
f = true;
i = 1;
}
}
setTimeout("auto()", 1000);
}
auto();
</script>
</head>
<body>
<div id="btn_l" class="btn">
<</div>
<div class="wrap">
<div class="cc" style="width: 741px;">
<div style="float: left; width: 241px; padding: 5px 3px;">
<p class="con">
111</p>
</div>
<div style="float: left; width: 241px; padding: 5px 3px;">
<p class="con">
222</p>
</div>
<div style="float: left; width: 241px; padding: 5px 3px;">
<p class="con">
333</p>
</div>
</div>
</div>
<div id="btn_r" class="btn">
></div>
</body>
</html>
[JavaScript] 纯文本查看 复制代码
var i = 1;
var f = true;
function auto() {
if (f) {
$("#btn_r").click();
i++;
if (i == 4) {
f = false;
i = 1;
}
} else {
$("#btn_l").click();
i++;
if (i == 4) {
f = true;
i = 1;
}
}
setTimeout("auto()", 1000);
}
auto();