jQuery实现轮播图--入门

jQuery是一个前台的框架。

主要函数: setInterval

  语法:setInterval(code,millisec[,"lang"])

    cdoe:需要执行的代码或者要调用的函数。

    millisec:周期性的调用函数或代码,以毫秒计算。

jQuery代码:

<script type="text/javascript">
var timer = setInterval("right()", 1000);
var i = 1;

$(function() {

$("#img").attr("src",
"${pageContext.request.contextPath}/img/" + i + ".jpg");

})

function left() {

i--;

if (i < 1) {
i = 3;
}
$("#img").attr("src",
"${pageContext.request.contextPath}/img/" + i + ".jpg");
}

function right() {

i++;

if (i > 3) {
i = 1;
}
$("#img").attr("src",
"${pageContext.request.contextPath}/img/" + i + ".jpg");
}
</script>

jsp页面:

<input type="button" value="上一个" onclick="left()">

<img id="img">

<input type="button" value="下一个" onclick="right()">

猜你喜欢

转载自www.cnblogs.com/niexinlei/p/9691179.html