簡單的jq輪播需求，可以如下實現：
引入jq庫：
加入樣式：
<style>
ul{
list-style: none;
position: absolute;
bottom: 0;
left: 175px;
}
ul li{
float: left;
}
ul li a{
display: block;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #ffbeaa;
margin-left: 5px;
opacity: 0.6;
}
ul li a.active{
background-color: red;
}
.inner{
width: 3000px;
height: 400px;
}
.inner img{
display: block;
float: left;
}
.pic{
width: 600px;
overflow: hidden;
position: relative;
margin:0 auto;
}
.prev,.next{
position: absolute;
top: 190px;
opacity: 0.6;
}
.next{
right: 0;
}
jsp code:
<script>
var num=0;
var timer=null;
var timeout=null;
// 設置鼠標懸浮在按鈕切換事件
$("ul li a").mouseenter(function(event){
//設置定時器前應先判斷有沒有定時器，有就清除
if(timeout){
clearTimeout(timeout);
timeout=null;
}
num=$(this).parent().index();
//設置懸浮時500毫秒時切換，不足500毫秒時不會切換
timeout=setTimeout(changgeMg,500);
return false;
})
//懸浮在窗口時停止輪播
$(".pic").mouseenter(function(){
//清除定時器
clearInterval(timer);
})
//鼠標移除窗口時開始輪播
$(".pic").mouseleave(function(){
//設置一個3秒的自動輪播定時器
timer=setInterval(changeTab,1000);
})
//點擊next切換
$(".next").click(function(){
//設置定時器前應先判斷有沒有定時器，有就清除
if(timeout){
clearTimeout(timeout);
timeout=null;
}
if(num<4){
num++;
}else{
num=0;
}
//設置點擊後500毫秒去切換，如果點擊間隔小於500毫秒不停點擊則不會切換
timeout=setTimeout(changgeMg,500);
//不讓a元素去默認跳轉
return false;
})
//點擊prev切換
$(".prev").click(function(){
if(timeout){
clearTimeout(timeout);
timeout=null;
}
if(num>0){
num--;
}else{
num=4;
}
//設置點擊後500毫秒去切換，如果點擊間隔小於500毫秒不停點擊則不會切換
timeout=setTimeout(changgeMg,500);
return false;
})
//輪播定時器
timer=setInterval(changeTab,1000);
//移動盒子和給當前索引上色
function changgeMg(){
var movePx=num*-600+"px";
$(".inner").animate({"marginLeft":movePx},500);
$("ul li").eq(num).find("a").addClass("active").parent().siblings().find("a").removeClass("active");
}
//定時器函數
function changeTab(){
if (num<4){
num++;
}else{
num=0;
}
changgeMg();
}
閱讀更多 oLoStudio 的文章
