jQuery常用的焦点图代码，可做选项卡切换_图片特效

jQuery常用的焦点图代码，可做选项卡切换: 发布时间：2020-06-03编辑：脚本学堂

jQuery常用的焦点图代码，可做选项卡切换，鼠标滑入时停止动画，滑出时开始动画。Js图片切换。

<!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>
<title><a href=http://www.jb200.com/jb/jquery/ target=_blank class=infotextkey>jquery</a>常用焦点图</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
h1,h2,h3,h4,h5,h6,ol,ul,li,dl,dt,dd{padding:0;margin:0;}
li{list-style:none;}
img{border:none;}
u{text-decoration:none;}
em{font-style:normal;}
a{color:#0064B1;text-decoration:none;outline:none;blr:expression(this.onFocus=this.blur());}
a:hover{color:#ff6700;text-decoration:underline;}
body{font-size:12px;color:#444;font-family:Arial,Verdana, Helvetica, sans-serif;word-<a href=http://www.jb200.com/zt/break/ target=_blank class=infotextkey>break</a>:break-all;}
.clear{height:0;overflow:hidden;clear:both;}
h1{font:bold 18px microsoft yahei; color:#ff6700;margin-bottom:20px;}
h2{ position:absolute;top:12px;right:20px;}
h2 a{ text-indent:-9999px; background:url() no-repeat; height:55px;width:130px; display:block;}
</style>
<script type="text/<a href=http://www.jb200.com/js/ target=_blank class=infotextkey>javascript</a>" src="/source/js/jquery1.3.2.js"></script>
</head>
<body>
<h1>jQuery常用焦点图，选项卡切换</h1>
<style type="text/css">
.demo{ width:450px; height:200px; position:relative; overflow:hidden; border:#ddd 1px solid;padding:5px;}
.num{ position:absolute;right:10px; top:10px; z-index:10;}
.num a{ width:16px; height:16px; display:inline-block; text-align:center; margin:0 3px; cursor:pointer;}
.num a.cur{ background:#ff6700;color:#fff;}
.demo ul{ position:relative; z-index:5;}
.demo ul li{ position:absolute; display:none;}
</style>
<div class="demo">
    <div class="num"><a class="cur">1</a><a>2</a><a>3</a></div>
	<ul>
        <li style="display:block;"><a href="#/" target="_blank"><img src="/source/images/201207/fj001.jpg" /></a></li>
        <li><a href="#" target="_blank"><img src="/source/images/201207/fj002.jpg" /></a></li>
        <li><a href="#" target="_blank"><img src="/source/images/201207/fj003.jpg" /></a></li>
    </ul>
</div>
<script type="text/javascript">
$(function(){
	var sw = 0;
	$(".demo .num a").mouseover(function(){
		sw = $(".num a").index(this);
		myShow(sw);
	});
	function myShow(i){
		$(".demo .num a").eq(i).addClass("cur").siblings("a").removeClass("cur");
		$(".demo ul li").eq(i).stop(true,true).fadeIn(600).siblings("li").fadeOut(600);
	}
	//滑入停止动画，滑出开始动画
	$(".demo").hover(function(){
		if(myTime){
		   clearInterval(myTime);
		}
	},function(){
		myTime = setInterval(function(){
		  myShow(sw)
		  sw++;
		  if(sw==3){sw=0;}
		} , 3000);
	});
	//自动开始
	var myTime = setInterval(function(){
	   myShow(sw)
	   sw++;
	   if(sw==3){sw=0;}
	} , 3000);
})
</script>
</body>
</html>

提示：可修改代码后再运行!

上一篇：javascript实现的横向图片无缝滚动代码
下一篇：返回列表

与 jQuery常用的焦点图代码，可做选项卡切换有关的文章

本文标题：jQuery常用的焦点图代码，可做选项卡切换
本页链接：http://www.jb200.com/tx/132.html

浏览排行

栏目分类

热点文章

jQuery常用的焦点图代码，可做选项卡切换