浅谈jQuery实现轮播

来源：互联网发布：php api接口开发 json 编辑：程序博客网时间：2024/06/05 21:56

<!DOCTYPE html><html><head><style type="text/css">#frame{width:700px;height:300px;position:relative;}#img2,#img3{display:none;}.box{position:absolute;width:50px;height:50px;line-height:50px;text-align:center;color:white;font-family:Microsoft-Yahei;background:grey;}#move1{bottom:0;right:100px;}#move2{bottom:0;right:50px;}#move3{bottom:0;right:0;}</style><script src="js/jquery-1.8.2.min.js"></script><script>$(document).ready(function() {n = 1;interval = setInterval(function(){$("img").hide();$("#img"+n).show();$(".box").css("background","grey");$("#move"+n).css("background","red");n = n % 3 + 1;}, 2000);$(".box").bind("click",function() {clearInterval(interval);n = $(this).attr("id").slice(4);interval = setInterval(function(){$("img").hide();$("#img"+n).show();$(".box").css("background","grey");$("#move"+n).css("background","red");n = n % 3 + 1;}, 2000);});});</script></head><body><div id="frame"><div id="photos"><img id="img1" src="images/background1.png"><img id="img2" src="images/background2.png"><img id="img3" src="images/background3.png"></div><div class="box" id="move1">1</div><div class="box" id="move2">2</div><div class="box" id="move3">3</div></div></body></html>

1 0