建站
咨詢
售后
建站咨詢
新聞中心
Jquery 點擊切換，按10秒鐘自動切換到下一個，依資助循環(huán)，點擊按鈕也可以切換
!DOCTYPE?html
目前創(chuàng)新互聯(lián)建站已為上1000家的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬主機、網(wǎng)站托管運營、企業(yè)網(wǎng)站設(shè)計、大觀網(wǎng)站維護等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。
html
head
meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312"?/
title點擊切換，按時間循環(huán)自動切換/title
style
*?{
padding:?0;
margin:?0;
}
body?{
margin:?0;
padding:?0;
font:?12px/1.5?\5b8b\4f53,?Arial,?sans-serif;
}
ol,ul,li?{
list-style:?none;
}
a?{
color:?#252525;
text-decoration:?none;
}
a:hover?{
color:?#ba2636;
text-decoration:?underline;
}
.clearfix:after?{
visibility:?hidden;
display:?block;
font-size:?0;
content:?"?";
clear:?both;
height:?0;
}
.clearfix?{
*zoom:?1;
}
.tui2?{
margin:?auto;
overflow:?hidden;
height:?108px;
width:?648px;
position:?relative;
border-top-width:?3px;
border-right-width:?1px;
border-bottom-width:?1px;
border-left-width:?1px;
border-top-style:?solid;
border-right-style:?solid;
border-bottom-style:?solid;
border-left-style:?solid;
border-color:?#37B3D5;
}
.tui2?.tit?{
line-height:?32px;
padding-left:?12px;
height:?32px;
}
.tui2?.tit?h2?{
float:?left;
font-size:?14px;
}
.focus?{
height:?16px;
line-height:?16px;
overflow:?hidden;
float:?right;
position:?relative;
right:?8px;
top:?50%;
margin-top:?-8px;
}
.focus?li?{
float:?left;
width:?16px;
height:?16px;
text-align:?center;
background-color:?#A1A1A1;
display:?block;
color:?#FFFFFF;
margin-left:?5px;
cursor:?pointer;
}
.focus?li.on?{
background-color:?#68A4DE;
}
.con?{
padding-right:?15px;
padding-bottom:?15px;
padding-left:?15px;
width:?9999em;
overflow:?hidden;
position:?relative;
}
.txt?{
width:?628px;
float:?left;
margin-right:?8px;
}
.txt?li?{
float:?left;
height:?25px;
width:?148px;
overflow:?hidden;
line-height:?25px;
margin-right:?8px;
}
.txt?li?a?{
font-size:?13px;
color:?#3333FF;
font-family:?Microsoft?YaHei;
}
.yun?{
right:?12px;
position:?absolute;
bottom:?3px;
}
.ml?{
margin-left:?-628px;
}
/style
script?src="../jquery-1.8.0.min.js"/script
script
jQuery?(function?($)
{
var?con?=?$?('div.con'),?len?=?con.children?("ul").length,?w?=?$?(".txt").width?()?+?5;
var?lis?=?$?('.focus?li'),?INDEX?=?lis.filter?(".on").index?();
lis.click?(function?()
{
var?me?=?$?(this);
me.addClass?("on").siblings?("li").removeClass?("on");
con.stop?().animate?(
{
left?:?-w?*?(INDEX?=?me.index?())?+?"px"
},?"fast");
});
$?(".tui2").hover?(function?()
{
stop?();
},?function?()
{
run?(lis,?INDEX);
});
run?(lis,?INDEX);
});
var?INTERVAL?=?null,?SLEEP?=?1000,?INDEX?=?-1;
var?run?=?function?(lis,?INDEX)
{
if?(!INTERVAL)
{
INTERVAL?=?setInterval?(function?()
{
INDEX++;
INDEX?=?INDEX??lis.length?-?1???0?:?INDEX;
lis.eq?(INDEX).triggerHandler?("click");
},?SLEEP);
}
};
var?stop?=?function?()
{
if?(!!INTERVAL)
{
clearInterval?(INTERVAL);
INTERVAL?=?null;
}
};
/script
/head
body
?
/body
/html
jquery實現(xiàn)圖片自動切換和點擊切換
需要js+css配合，我給您找段代碼吧。
JS代碼
$(function?()?{
$(".dummy").click(function?()?{?return?false;?});
var?flipDelay?=?5500;
var?flipCount?=?$("div.banner_footer?a").size();?//?圖片總數(shù)
var?flipId?=?1;
var?flipId1?=?0;
var?flipTimer?=?null;
var?flipTimer1?=?null;
var?i?=?0;
var?flip?=?function?()?{
if?(flipCount??2)?return;
$("div.banner_footer?a").removeClass("current");
$($("div.banner_footer?a").get(flipId)).addClass("current");
$($("div.banner_footer?a").get(flipId)).css("current");
$("div.banner??a:visible").fadeOut();
$($("div.banner?a").get(flipId)).fadeIn("slow");
flipId?=?(flipId?+?1)?%?flipCount;
flipTimer?=?window.setTimeout(flip,?flipDelay);
}
flipTimer?=?window.setTimeout(flip,?flipDelay);
$("div.banner_footer?a").click(function?()?{
clearTimeout(flipTimer);
flipId?=?$("div.banner_footer?a").index(this);
flip();
return?false;
});
var?flipserver?=?function?()?{
$("div.index_server_box??a:visible").fadeOut();
$($("div.index_server_box?a").get(flipId1)).fadeIn("slow");
}
$("a.index_server_left").click(function?()?{
flipId1?=?(flipId1?-?1)?%?3;
flipserver();
return?false;
});
$("a.index_server_right").click(function?()?{
flipId1?=?(flipId1?+?1)?%?3;
flipserver();
return?false;
});
var?documentWidth?=?$(window).width();
var?left?=?(documentWidth?-?310)?/?2;
var?right?=?left?+?306;
$("div.services_box?div.left").css("width",?left?+?"px");
$("div.services_box?div.right").css("width",?right?+?"px");
$(window).resize(function?()?{
var?documentWidth?=?$(window).width();
var?left?=?(documentWidth?-?310)?/?2;
var?right?=?left?+?306;
$("div.services_box?div.left").css("width",?left?+?"px");
$("div.services_box?div.right").css("width",?right?+?"px");
});
});
html樣式
div?class="banner_box"
div?class="banner"
a?href=""?class="banner1"img?src="img/banner1.jpg"?alt="視覺為您解決網(wǎng)站建設(shè)中企業(yè)品牌形象問題"?//a
a?href=""?class="banner2"img?src="img/banner2.jpg"?alt="獨具匠心的網(wǎng)頁設(shè)計讓您的網(wǎng)站與總部同"?//a
a?href=""?class="banner3"img?src="img/banner3.jpg"?alt="針對用戶需求，提供高品質(zhì)網(wǎng)站設(shè)計服務(wù)"?//a
a?href=""?class="banner4"img?src="img/banner4.jpg"?alt="網(wǎng)站建設(shè)公司團隊的力量"?//a
a?href=""?class="banner5"img?src="img/banner5.jpg"?alt="招聘網(wǎng)頁設(shè)計師"?//a
div?class="banner_footer"
a?class="a1?current"img?src="img/a13.jpg"?alt=""?//a
a?class="a2"?img?src="img/a14.jpg"?alt=""?//a
a?class="a3"img?src="img/a15.jpg"?alt=""?//a
a?class="a4"img?src="img/a16.jpg"?alt=""?//a
a?class="a5"img?src="img/a17.jpg"?alt=""?//a
/div
/div
/div
css樣式
div.banner_box{height:430px;?overflow:hidden;?background:url(../img/b1.jpg)?repeat-x;}
div.banner_box?div.banner{width:990px;?height:430px;?overflow:hidden;?margin:auto;?position:relative;}
div.banner_box?div.banner?a{border:0;}
div.banner_box?div.banner?a.banner1?img{margin-left:200px;}
div.banner_box?div.banner?a.banner2?img{margin-left:236px;}
div.banner_box?div.banner?a.banner3?img{margin-left:250px;}
div.banner_box?div.banner?a.banner4?img{margin-left:231px;}
div.banner_box?div.banner?a.banner5?img{margin-left:245px;}
div.banner_box?div.banner?div.banner_footer{position:absolute;width:120px;height:20px;top:30px;?right:0;z-index:100;??}
div.banner_box?div.banner?div.banner_footer?a{float:left;?width:19px;?height:19px;?cursor:pointer;?}
div.banner_box?div.banner?div.banner_footer?a.current{background:url(../img/a13_1.jpg)?center?center?no-repeat;}
div.banner_box?div.banner?div.banner_footer?a?img{border:0;?margin:3px?0?0?3px;}
希望能幫到您！祝您好運！
JQUERY的TAB標(biāo)簽，我想實現(xiàn)5秒鐘自動切換的效果，怎么做
下面這段代碼替換你原來的js代碼，親測可用……
原理：
1.設(shè)置了一個定時器，每2秒觸發(fā)。
2.如果用戶自己切換，停止定時器。當(dāng)用戶鼠標(biāo)離開區(qū)域時，再次進入定時切換。
不懂再問~????
$(function(){
var?i=0;//初始記錄用戶鼠標(biāo)經(jīng)過是第幾個li
var?canmove=true;
$('.menu?li').mouseenter(function(){
canmove=false;
clearInterval(li_timer);
i=$(this).index();
$(this).addClass('off').siblings().removeClass('off');
$('.menudiv?div').hide();
$('.menudiv?div').eq(i).show();?
});
$("#tab1").mouseenter(function(){//只要用戶鼠標(biāo)在這個tab1區(qū)域內(nèi)，就不自動跳轉(zhuǎn)
canmove=false;
}).mouseleave(function(){
clearInterval(li_timer);
setTimeout(function(){canmove=true;},2000);//兩秒后自動切換
});
function?li_timer(){
if(canmove){
i++;
if(i==$('.menu?li').length){
i=0;
}
$('.menu?li').eq(i).addClass('off').siblings().removeClass('off');
$('.menudiv?div').hide();
$('.menudiv?div').eq(i).show();?
}
}
setInterval(li_timer,2000);//每兩秒切換
});
jquery 圖片自動切換
需要js+css配合，我給您找段代碼吧。
JS代碼
$(function () { $(".dummy").click(function () { return false; }); var flipDelay = 5500; var flipCount = $("div.banner_footer a").size(); // 圖片總數(shù) var flipId = 1; var flipId1 = 0; var flipTimer = null; var flipTimer1 = null; var i = 0; var flip = function () { if (flipCount 2) return; $("div.banner_footer a").removeClass("current"); $($("div.banner_footer a").get(flipId)).addClass("current"); $($("div.banner_footer a").get(flipId)).css("current"); $("div.banner a:visible").fadeOut(); $($("div.banner a").get(flipId)).fadeIn("slow"); flipId = (flipId + 1) % flipCount; flipTimer = window.setTimeout(flip, flipDelay); } flipTimer = window.setTimeout(flip, flipDelay); $("div.banner_footer a").click(function () { clearTimeout(flipTimer); flipId = $("div.banner_footer a").index(this); flip(); return false; }); var flipserver = function () { $("div.index_server_box a:visible").fadeOut(); $($("div.index_server_box a").get(flipId1)).fadeIn("slow"); } $("a.index_server_left").click(function () { flipId1 = (flipId1 - 1) % 3; flipserver(); return false; }); $("a.index_server_right").click(function () { flipId1 = (flipId1 + 1) % 3; flipserver(); return false; }); var documentWidth = $(window).width(); var left = (documentWidth - 310) / 2; var right = left + 306; $("div.services_box div.left").css("width", left + "px"); $("div.services_box div.right").css("width", right + "px"); $(window).resize(function () { var documentWidth = $(window).width(); var left = (documentWidth - 310) / 2; var right = left + 306; $("div.services_box div.left").css("width", left + "px"); $("div.services_box div.right").css("width", right + "px"); });});
html樣式
div class="banner_box" div class="banner" a href="" class="banner1"img src="img/banner1.jpg" alt="視覺為您解決網(wǎng)站建設(shè)中企業(yè)品牌形象問題" //a a href="" class="banner2"img src="img/banner2.jpg" alt="獨具匠心的網(wǎng)頁設(shè)計讓您的網(wǎng)站與總部同" //a a href="" class="banner3"img src="img/banner3.jpg" alt="針對用戶需求，提供高品質(zhì)網(wǎng)站設(shè)計服務(wù)" //a a href="" class="banner4"img src="img/banner4.jpg" alt="網(wǎng)站建設(shè)公司團隊的力量" //a a href="" class="banner5"img src="img/banner5.jpg" alt="招聘網(wǎng)頁設(shè)計師" //a div class="banner_footer" a class="a1 current"img src="img/a13.jpg" alt="" //a a class="a2" img src="img/a14.jpg" alt="" //a a class="a3"img src="img/a15.jpg" alt="" //a a class="a4"img src="img/a16.jpg" alt="" //a a class="a5"img src="img/a17.jpg" alt="" //a /div /div /div
css樣式
div.banner_box{height:430px; overflow:hidden; background:url(../img/b1.jpg) repeat-x;}div.banner_box div.banner{width:990px; height:430px; overflow:hidden; margin:auto; position:relative;}div.banner_box div.banner a{border:0;}div.banner_box div.banner a.banner1 img{margin-left:200px;}div.banner_box div.banner a.banner2 img{margin-left:236px;}div.banner_box div.banner a.banner3 img{margin-left:250px;}div.banner_box div.banner a.banner4 img{margin-left:231px;}div.banner_box div.banner a.banner5 img{margin-left:245px;}div.banner_box div.banner div.banner_footer{position:absolute;width:120px;height:20px;top:30px; right:0;z-index:100; }div.banner_box div.banner div.banner_footer a{float:left; width:19px; height:19px; cursor:pointer; }div.banner_box div.banner div.banner_footer a.current{background:url(../img/a13_1.jpg) center center no-repeat;}div.banner_box div.banner div.banner_footer a img{border:0; margin:3px 0 0 3px;}
希望能幫到您！祝您好運！
這樣可以么？
急求一個用jquery實現(xiàn)圖片自動切換效果的代碼，簡單詳細(xì)點的，謝謝。
推薦一個給你，這是代碼，詳細(xì)的你可以看參考資料
$.fn.iFadeSlide = function(iSet){
/*
* iSet可選參數(shù)說明:
* iSet.field==幻燈區(qū)域內(nèi)的圖片集
* iSet.ico==按鈕鉤子
* iSet.high==按鈕高亮樣式
* iSet.interval==圖片切換時間
* iSet.leaveTime==不觸發(fā)鼠標(biāo)劃入事件的最大時間值
* iSet.fadeInTime==淡入時間
* iSet.fadeOutTime==淡出時間
* 調(diào)用方式$(document).iFadeSlide({field:'...',ico:'...',...})
*/
iSet = $.extend({high:'high',interval:3000,leaveTime:150,fadeOutTime:400,fadeInTime:400},iSet);
var imgField = $(iSet.field || '#slideimg');
var icoField = $(iSet.ico || '#ico');
var curIndex = 0;
var slideInterval = iSet.interval || 3000;
var hoverTime = iSet.leaveTime || 150;
var fadeOutTime = iSet.fadeOutTime || 400;
var fadeInTime = iSet.fadeInTime || 400;
var icos=null, fastHoverFun = null, autoSlideFun = null, hasIcoHighCls = null, changeFun = null,max=null;;
var icoHtml = 'ul';
max=imgField.size();
//按圖片傳入對應(yīng)的按鈕
imgField.each(function(i){
icoHtml += 'li' + (i + 1) + '/li';
});
icoHtml += '/ul';
icoField.append(icoHtml);
//淡入淡出函數(shù)
changeFun = function(n){
imgField.filter(':visible').fadeOut(fadeOutTime, function(){
imgField.eq(n).fadeIn(fadeInTime)
icos.eq(n).addClass(iSet.high).siblings().removeClass(iSet.high);
});
}
icos = icoField.find('ulli');
//為第一個按鍵初始化高亮
icos.first().addClass(iSet.high);
//按鈕鼠標(biāo)劃入劃出事件
icos.hover(function(){
clearInterval(autoSlideFun);
curIndex = icos.index(this);
hasIcoHighName = $(this).hasClass(iSet.high);
//setTimeout避免用戶快速(無意識性劃過)劃過時觸發(fā)事件
fastHoverFun = setTimeout(function(){
//鼠標(biāo)劃入當(dāng)前圖片按鈕時不閃爍
if (!hasIcoHighName) {
changeFun(curIndex);
}
}, hoverTime);
}, function(){
clearTimeout(fastHoverFun);
//自動切換
autoSlideFun = setInterval(function(){
curIndex++;
changeFun(curIndex);
if (curIndex ==max ) {
changeFun(0);
curIndex = 0;
}
}, slideInterval)
}).eq(0).trigger('mouseleave');
//當(dāng)鼠標(biāo)劃入圖片區(qū)域時停止切換
imgField.hover(function(){
curIndex = imgField.index(this);
clearInterval(autoSlideFun);
}, function(){
icos.eq(curIndex).trigger('mouseleave');
});
}
標(biāo)題名稱：jquery自動切換,jquery切換效果
網(wǎng)頁網(wǎng)址：http://fisionsoft.com.cn/article/dsehdco.html
