动态图js

js部分：

<script src="js/jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){
    var curr=0;
    var s =$(".tabNav a").length;
    var timer = setInterval(function(){
        var todo =(++curr) % s;    
        $(".tabNav a").eq(todo).click();
    },3000);
    
    $(".tabNav a").hover(function(){
        clearInterval(timer);
    },function(){
        timer = setInterval(function(){
            var t =(++cur) % s;    
            $(".tabNav a").eq(t).click();
        },3000);
    });
    
    $(".tabNav a").each(function(i){
        $(this).click(function(){
            cur = i;        
            $(this).addClass("on").siblings().removeClass("on");    
$(".tabview img").eq(i).fadeIn().siblings("img").fadeOut();

            $(".img_link li").eq(i).show().siblings().hide();    
        });    
    });    
});    
</script>

 

 

页面部分：

<style>
.tabview {
    border-color: #7B7B7B;
    border-style: solid;
    border-width: 1px;
    height: 175px;
    overflow: hidden;
    position: relative;
    width: 230px;
}
.tabNav {
    background: url("../temp/tabNav.png") no-repeat scroll left top transparent;
    bottom: 0;
    color: #FFFFFF;
    height: 17px;
    left: 0;
    line-height: 17px;
    position: absolute;
    text-align: right;
    width: 230px;
}
.tabNav A {
    color: #FFFFFF;
    display: inline-block;
    text-align: center;
    width: 25px;
}
.tabNav .on {
    color: #FF0000;
}
.img_link {
    border-bottom: 1px solid #8E8D8D;
    height: 22px;
    margin-bottom: 0;
}
.img_link LI {
    height: 22px;
    line-height: 22px;
    padding-left: 22px;
}    
    
</style>

<div class="tabview" >
                <img οnclick="javascript:window.open('/resu/news/154/00154.html','_blank');" style="cursor:pointer" src="temp/p_1326766363_7963886.jpg" width="230" height="175" />
                <img οnclick="javascript:window.open('/resu/news/153/00153.html','_blank');" style="cursor:pointer" src="temp/p_1326766335_7935495.jpg" width="230" height="175" style="display:none;"/>
                <img οnclick="javascript:window.open('/resu/news/152/00152.html','_blank');" style="cursor:pointer" src="temp/p_1326766363_7963886.jpg " width="230" height="175" style="display:none;"/>
                <img οnclick="javascript:window.open('/resu/news/151/00151.html','_blank');" style="cursor:pointer" src="temp/p_1326766385_7985245.jpg" width="230" height="175" style="display:none;"/>
                <img οnclick="javascript:window.open('/resu/news/143/00143.html','_blank');" style="cursor:pointer" src="temp/p_1326766209_7809244.JPG" width="230" height="175" style="display:none;"/>
        <div class="tabNav">
                        <a href="javascript:;" class="on">1</a>
                        |<a href="javascript:;">2</a>
                        |<a href="javascript:;">3</a>
                        |<a href="javascript:;">4</a>
                        |<a href="javascript:;">5</a>
                        </div>
                    </div>
                    <ul class="img_link">
                <li style="display:block;"><a href="/resu/news/154/00154.html">召开工作研讨会</a></li>
                <li style="display:none;"><a href="/resu/news/153/00153.html">图书馆大楼</a></li>
                <li style="display:none;"><a href="/resu/news/152/00152.html">接受老同志赠书</a></li>
                <li style="display:none;"><a href="/resu/news/151/00151.html">工会赴山东微山湖考察</a></li>
                <li style="display:none;"><a href="/resu/news/143/00143.html">参加高校图书馆运动会</a></li>
                    </ul>

转载于:https://www.cnblogs.com/weipeng/archive/2012/10/24/2737343.html