jquery自动切换,jquery切换效果

Jquery 点击切换，按10秒钟自动切换到下一个，依资助循环，点击按钮也可以切换

!DOCTYPE html

目前创新互联建站已为上1000家的企业提供了网站建设、域名、虚拟主机、网站托管运营、企业网站设计、大观网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

html

head

meta http-equiv="Content-Type" content="text/html; charset=gb2312" /

title点击切换，按时间循环自动切换/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实现图片自动切换和点击切换

需要js+css配合，我给您找段代码吧。

JS代码

$(function () {

$(".dummy").click(function () { return false; });

var flipDelay = 5500;

var flipCount = $("div.banner_footer a").size(); // 图片总数

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="视觉为您解决网站建设中企业品牌形象问题" //a

a href="" class="banner2"img src="img/banner2.jpg" alt="独具匠心的网页设计让您的网站与总部同" //a

a href="" class="banner3"img src="img/banner3.jpg" alt="针对用户需求，提供高品质网站设计服务" //a

a href="" class="banner4"img src="img/banner4.jpg" alt="网站建设公司团队的力量" //a

a href="" class="banner5"img src="img/banner5.jpg" alt="招聘网页设计师" //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标签，我想实现5秒钟自动切换的效果，怎么做

下面这段代码替换你原来的js代码，亲测可用……

原理：

1.设置了一个定时器，每2秒触发。

2.如果用户自己切换，停止定时器。当用户鼠标离开区域时，再次进入定时切换。

不懂再问~    

$(function(){

var i=0;//初始记录用户鼠标经过是第几个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(){//只要用户鼠标在这个tab1区域内，就不自动跳转

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(); // 图片总数 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="视觉为您解决网站建设中企业品牌形象问题" //a a href="" class="banner2"img src="img/banner2.jpg" alt="独具匠心的网页设计让您的网站与总部同" //a a href="" class="banner3"img src="img/banner3.jpg" alt="针对用户需求，提供高品质网站设计服务" //a a href="" class="banner4"img src="img/banner4.jpg" alt="网站建设公司团队的力量" //a a href="" class="banner5"img src="img/banner5.jpg" alt="招聘网页设计师" //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实现图片自动切换效果的代码，简单详细点的，谢谢。

推荐一个给你，这是代码，详细的你可以看参考资料

$.fn.iFadeSlide = function(iSet){

/*

* iSet可选参数说明:

* iSet.field==幻灯区域内的图片集

* iSet.ico==按钮钩子

* iSet.high==按钮高亮样式

* iSet.interval==图片切换时间

* iSet.leaveTime==不触发鼠标划入事件的最大时间值

* iSet.fadeInTime==淡入时间

* iSet.fadeOutTime==淡出时间

* 调用方式$(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();

//按图片传入对应的按钮

imgField.each(function(i){

icoHtml += 'li' + (i + 1) + '/li';

});

icoHtml += '/ul';

icoField.append(icoHtml);

//淡入淡出函数

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);

//按钮鼠标划入划出事件

icos.hover(function(){

clearInterval(autoSlideFun);

curIndex = icos.index(this);

hasIcoHighName = $(this).hasClass(iSet.high);

//setTimeout避免用户快速(无意识性划过)划过时触发事件

fastHoverFun = setTimeout(function(){

//鼠标划入当前图片按钮时不闪烁

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');

//当鼠标划入图片区域时停止切换

imgField.hover(function(){

curIndex = imgField.index(this);

clearInterval(autoSlideFun);

}, function(){

icos.eq(curIndex).trigger('mouseleave');

});

}