建議，在當(dāng)前輪播圖的div添加類active，設(shè)置.active {display：block；}，.ban{display:none;};這樣可以通過添加或移除active就可以了；這樣以下就比較方便很多，要不然又要做循環(huán)，麻煩（swiper插件做輪播效果不錯(cuò)）
目前創(chuàng)新互聯(lián)公司已為近1000家的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬空間、網(wǎng)站托管、服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計(jì)、岢嵐網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。
$(".left").click(function(){
var $index = $(".ban").hasClass("active").index();//獲取當(dāng)前輪播圖的下標(biāo)
if($index === 0 ) {//當(dāng)前為第一張輪播圖
$(".ban").eq($(".ban").length-1).addClass("active)
.siblings(".ban").removeClass("active");
//這里寫成你自動(dòng)切換的代碼，我這里只是一個(gè)無動(dòng)態(tài)切換效果的方法
}else {
$(".ban").eq($index-1).addClass("active)
.siblings(".ban").removeClass("active");
})
$(".right").click(function(){
var $index = $(".ban").hasClass("active").index();//獲取當(dāng)前輪播圖的下標(biāo)
if($index === ($(".ban").length-1) ) {//當(dāng)前為最后一張輪播圖
$(".ban").eq($(".ban").length-1).addClass("active)
.siblings(".ban").removeClass("active");
//這里寫成你自動(dòng)切換的代碼，我這里只是一個(gè)無動(dòng)態(tài)切換效果的方法
}else {
$(".ban").eq($index+1).addClass("active)
.siblings(".ban").removeClass("active");
})
//大體思路是這樣了，代碼可能有個(gè)別字母寫得不對，畢竟是手敲的，但是大概思路是這樣了
假定場景：左邊的表格id為：lefttab，右邊表格id為righttab，向右按鈕id：toright，向左按鈕id：toleft，可以移動(dòng)的行都在表格的tbody中(防止將表頭也給移動(dòng)嘍)
$(function () {
$("#toright").click(function () {//向右按鈕點(diǎn)擊事件
$.each($("#lefttab tbody tr"), function (i, n) {//遍歷左側(cè)table的tr，判斷是否有選中的行
if ($(this).find("input[type=checkbox]").attr("checked") == true) {//如果是選中的行
$(this).insertAfter($("#righttab tbody tr:last"));強(qiáng)行插入(別多想，此插入非彼插入)右側(cè)table最后一行的下方
}
});
});
$("#toleft").click(function () {//向左按鈕點(diǎn)擊事件
$.each($("#righttab tbody tr"), function (i, n) {
if ($(this).find("input[type=checkbox]").attr("checked") == true) {
$(this).insertAfter($("#lefttab tbody tr:last"));
}
});
});
});
用jquery使一個(gè)按鈕讓div左右移動(dòng)方法如下：
就是點(diǎn)擊“#anniu”，然后"#caozuo"div左右移動(dòng)，我的代碼左移了就不能移動(dòng)回來了 ?div class="bottom textstyle" id="caozuo" a href="#" id="anniu"img src="jiantou2.png" width="20" id="tanchu" //a /div ?$(document).ready(function()... 就是點(diǎn)擊“#anniu”，然后"#caozuo"div左右移動(dòng)，我的代碼左移了就不能移動(dòng)回來了。
div class="bottom textstyle" id="caozuo"
a href="#" id="anniu"img src="jiantou2.png" width="20" id="tanchu" //a
/div
$(document).ready(function() {
$("#anniu").click(function(event){
event.preventDefault();
if($('#caozuo').is({right:'0em'})){
$('#caozuo').animate({right:'-8.5em'},"fast");}
else{
$('#caozuo').animate({right:'0em'},"fast");
}
});
});
jQuery是一套跨瀏覽器的JavaScript庫，簡化HTML與JavaScript之間的操作。由John Resig在2006年1月的BarCamp NYC上發(fā)布第一個(gè)版本。目前是由 Dave Methvin 領(lǐng)導(dǎo)的開發(fā)團(tuán)隊(duì)進(jìn)行開發(fā)。全球前10000個(gè)訪問最高的網(wǎng)站中，有59%使用了jQuery，是目前最受歡迎的JavaScript庫。
$("#pic").hover(function(){
$(this).show();
},function(){
$(this).hide();
})
!doctype?html
html?lang="en"
head
meta?charset="UTF-8"
titleDocument/title
style
#box?{
width:?796px;
margin:?50px?auto;
position:?relative;
height:?296px;
}
#img-box?img?{
position:?absolute;
width:?796px;
height:?305px;
}
#uls?{
position:?absolute;
width:?100%;
text-align:?center;
bottom:?0px;
list-style:?none;
margin:?0;
padding:?0;
}
#uls?li?{
width:?30px;
height:?30px;
line-height:?30px;
background:?white;
border-radius:?10px;
display:?inline-block;
}
#uls?li:first-child?{
background:?red;
}
button?{
position:?absolute;
top:?50%;
display:?none;
}
button#prev?{
left:?10px;
}
button#next?{
right:?10px;
}
/style
/head
body
div?id="box"
div?id="img-box"
img?src=""?alt=""
img?src=""?alt=""
img?src=""?alt=""
img?src=""?alt=""
img?src=""?alt=""
/div
ul?id="uls"
li1/li
li2/li
li3/li
li4/li
li5/li
/ul
button?id="prev"/button
button?id="next"/button
/div
script?src=""/script
script
var?time,?len;
var?index?=?0
len?=?$('#uls?li').length;
time?=?setInterval(slide,?1000);
$('#box').hover(function()?{
clearInterval(time);
$('#prev,#next').css('display',?'block');
},?function()?{
time?=?setInterval(slide,?1000);
$('#prev,#next').css('display',?'none');
});
$('#prev').click(function()?{
clearInterval(time);
var?len?=?$('#uls?li').length?-?1;
var?imgshowindex?=?$("#img-box?img:visible").index();
if?(imgshowindex?=?0)?{
index?=?len;
}?else?{
index?=?--imgshowindex;
}
showindeximg(index);
});
$('#next').click(function()?{
clearInterval(time);
var?imgshowindex?=?$("#img-box?img:visible").index();
index?=?++imgshowindex;
if?(index?==?len)?index?=?0;
showindeximg(index);
});
function?slide()?{
index++;
if?(index?==?len)?index?=?0;
$('#uls?li').css('background',?'white').eq(index).css('background',?'red');
$('#img-box?img').fadeOut();
$('#img-box?img').eq(index).fadeIn();
}
function?showindeximg(index)?{
$("#img-box?img").hide().eq(index).show();
$("#uls?li").css("background",?"white").eq(index).css("background",?"red");
}
/script
/body
/html
具體實(shí)現(xiàn)，你可以復(fù)制下來運(yùn)行下。
重慶分公司
重慶分公司
