<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script language="javascript" src="https://www.jb51.net/inc/jquery-1.4.2.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <style type="text/css"> #butt div{ width:122px; height:32px; float:left; text-align:center; } </style> <script language="javascript"> function tab_q(now_id) { if(now_id == null) { //alert($("#butt").find("div:visible").attr("id")) c_show_id = $("#cont").find("div:visible").attr("id"); //此时显示按钮的ID名称 nums_id = c_show_id.substring(1,3); //截取B1后面的1，作为字符串放到C后面 b_show_id = "b"+ nums_id; //此时显示内容的ID名称 nums_next = parseInt(nums_id)+1 //alert(nums_next) if(nums_next<=8) //如果到最后一个的话，那么就要跳回第一个 { } else { nums_next = 1 } }else { nums_next = now_id.substring(1,3); } $("#cont div").hide(); //让所有的上面的div中的图片消失。 //是为了罗出地方让下一张图片出现的。 $("#butt div").css({border:'#FF0000 0px solid'}); //让所有按钮的边框消失。是为了让下一个按钮有边框， //alert("#"+"c"+nums_next) $("#c"+nums_next).fadeIn() //让上面的图片淡出来 $("#b"+nums_next).css({border:'#FF0000 1px solid'}); //给下面对应的按钮加上边框，当然这里也可以做其他的效果 //加边框只是为了测试 } $(function(){ //当页面加载完成 auto = setInterval("tab_q()",2000); //这里修改切换的时间的 $("#cont div").each(function(i,n){ $(n).hover( function(){ clearInterval(auto) }, function(){auto=setInterval("tab_q()",2000); } ) }) $("#butt div").each(function(i,n){ $(n).hover( function(){ clearInterval(auto); tab_q($(this).attr("id")) },function(){auto=setInterval("tab_q()",2000); } ) }) }) </script> <body> <div> <div> <div><img src="https://www.jb51.net/images/xmjz.jpg"/> </div> <div> <img src="https://www.jb51.net/images/4037.jpg"/> </div> <div><img src="https://www.jb51.net/images/4041.jpg"/></div> <div> <img src="https://www.jb51.net/images/xmjz.jpg"/> </div> <div> <img src="https://www.jb51.net/images/xmjz.jpg"/> </div> <div> <img src="https://www.jb51.net/images/xmjz.jpg"/> </div> <div> <img src="https://www.jb51.net/images/xmjz.jpg"/> </div> <div> <img src="https://www.jb51.net/images/xmjz.jpg"/> </div> </div> <div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> </div> </div> </body> </html>
jquery图片切换实例分析
内容版权声明：除非注明，否则皆为本站原创文章。