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

最新推荐文章于 2025-09-13 09:06:35 发布

weixin_34010949

最新推荐文章于 2025-09-13 09:06:35 发布

阅读量93

点赞数

文章标签： xhtml javascript ViewUI

本文介绍了一个使用jQuery实现的焦点图轮播效果及选项卡切换功能，通过鼠标悬停停止轮播并高亮当前选项，实现了平滑过渡动画。代码中详细展示了HTML结构、CSS样式和JavaScript交互逻辑。

<!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></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
</head>
<body>
<h1>jQuery常用焦点图，可做选项卡切换</h1>

<style type="text/css">
* { margin:0; padding:0; }
ul { list-style:none; }
img { border:none; }
.demo{ width:640px; 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="http://www.daqianduan.com/web-design-30-html5/" target="_blank"><img src="http://www.daqianduan.com/wp-content/uploads/2010/06/html5.png" /></a></li>
        <li><a href="http://www.daqianduan.com/wp-content/uploads/2010/06/ipad.png" target="_blank"><img src="http://www.daqianduan.com/wp-content/uploads/2010/06/ipad.png" /></a></li>
        <li><a href="http://www.daqianduan.com/css-efficiency-browsers-render-speed/" target="_blank"><img src="http://www.daqianduan.com/wp-content/uploads/2010/06/css.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>