jquery輪換,jquery輪播
Jquery的Tabs內(nèi)容輪換效果實現(xiàn)代碼,幾行搞定
本篇文章主要是對Jquery的Tabs內(nèi)容輪換效果的實現(xiàn)代碼進行了介紹。幾行代碼輕松搞定
公司主營業(yè)務(wù)：網(wǎng)站設(shè)計制作、做網(wǎng)站、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)建站是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)建站推出卓資免費做網(wǎng)站回饋大家。
代碼如下:
!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
""
html
xmlns=""
head
titleJquery的Tabs內(nèi)容輪換效果實現(xiàn)代碼,幾行搞定/title
script
language="javascript"
type="text/javascript"
src="/Scripts/jquery-1.4.4.min.js"/script
style
type="text/css"
*
{
margin:0;
padding:0;}
body
{
font:12px
Verdana,
Geneva,
sans-serif;
color:#404040;}
.tabs
{
margin:10px
20px;
width:360px;
position:relative;
overflow:hidden;
height:1%;
height:160px;}
.tabs
span
{
z-index:2;
font-size:12px;
border:1px
solid
#d5d5d5;
width:95px;
height:25px;
line-height:25px;
text-align:center;
float:left;
margin-right:5px;
cursor:pointer;}
span.active
{
background-position:0
-25px;
background-color:#d5d5d5;}
#tab-01,
#tab-02,
#tab-03
{
position:absolute;
top:26px;
left:0;
width:338px;
padding:10px;
height:93px;
border:1px
solid
#d5d5d5;
z-index:1;}
#tab-02,
#tab-03
{
display:none;}
/style
script
type="text/javascript"
$(document).ready(function
()
{
$('.tabs
span').mouseover(function
()
{
//div隱藏
$('.tabs
div').hide();
//查找.tabs
span同輩元素span
后面緊鄰的同輩元素div顯示
$(this).siblings('span').removeClass('active').end().addClass('active').next('div').show();
});
});
/script
/head
body
div
class="tabs"
!--
默認第一個tab為激活狀態(tài)
--
span
class="active"熱點新聞/span
div
id="tab-01"news/div
span娛樂新聞/span
div
id="tab-02"enteriment/div
span就業(yè)形勢/span
div
id="tab-03"jobs/div
/div
/body
/html
如何用jquery寫出一段圖片輪換效果？
試試這個圖片切換
有12345數(shù)字一起切換
有小圖大圖一起切換
里面有教程和源碼
jquery 層fadeout輪換問題
注意問題應(yīng)該在stop的使用，修改如下
script
var locked=false;
var i=0;
$(document).ready(function(){
var timeout;
$("#tb").hover(
function(){
var $this = $(this);
$("div:eq("+(i%4)+")", $this).stop(true, true);
var u = Getindex();
locked = true;
$("div", $this).each(function(){
$(this).show();
});
if(timeout){
clearTimeout(timeout);
}
},
function(){
locked = false;
var $this = $(this);
var y = Getindex();
var n = 4;
for(var z = 0; z4; z++){
if($("div:eq("+(z + y)%4+")", $this)){
$("div:eq("+(z + y)%4+")", $this).css("z-index", n);
n = n - 1;
}
}
i = y;
timeout=window.setTimeout(changeit, 1000);
}
);
function changeit(){
if(locked){
return;
}
$("#tbdiv:eq("+(i%4)+")").fadeOut(1000,function(){
$(this).css("z-index",0).show();
$("#tbdiv").each(function(){
$(this).css("z-index",parseInt($(this).css("z-index"))+1);
});
i=i+1;
$("#msg1").html("font style='font-weight:bold; color:green;'"+(i%4)+"/font");
timeout = setTimeout(changeit,1000);
});
}
function Getindex(){
var value=0;
var r=0;
for(var x=0; x4; x++){
if($("#tbdiv:eq("+x+")").css("z-index")==4){
value=x;
r=1;
}
}
if(r==0){
for(var u=0; u4; u++){
$("#tbdiv:eq("+u+")").css("z-index",parseInt($(this).css("z-index"))+1);
}
for(var x=0; x4; x++){
if($("#tbdiv:eq("+x+")").css("z-index")==4){
value=x;
r=1;
}
}
}
return value;
}
changeit();
});
/script
網(wǎng)頁標題：jquery輪換,jquery輪播
當前地址：http://m.jiaotiyi.com/article/dsgidsi.html