选项卡动态轮换banner图片路径 _Web前端

选项卡动态替换banner图片路径

选项卡动态替换banner图片路径(www.dayday28.com)

许多网站都有banner模板块，大多数的banner都需要切换的的，也是有这样的一个需求，今天下午就写了个选项卡的效果，实现了动态替换图片的路径，这样就实现了动态替换图片的路径实现了切换效果，我把它封装成函数了，这样就可以多次调用，非常方便。我也就是前天开始用函数式来开发的，调用函数只需设置下参数，非常的方便。在开源中国可以下载。Demo下载地址

效果图：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>选项卡动态替换banner图片路径</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
        hoverFn($("ul li"),"hover_css",$("p img"),"big");//调用函数     
        /*
            定义鼠标滑过替换图片路径的
            函数 2012.8.24  
            作者 zoowar  
            参数说明
            obj 当前触发事件的对象
            hc 当前选中元素的类名
            content 选择需要替换路径的图片
            url 为图片的路径
        */
        function hoverFn(obj,hc,content,url){
        obj.hover(function(){
                var h_css=hc;               
                $(this).addClass(h_css).siblings().removeClass(h_css);
                var imgUrl=$(this).attr(url);
                content.attr("src",imgUrl);             
            });
        }
})
</script>
<style type="text/css">
div{width:1024px;height:768px;margin:0 auto;}
ul{width:1024px;height:40px;margin:0;padding:0;}
ul li{width:254px;line-height:40px;border-bottom:solid 2px #FB066F;text-align:center;list-style-type:none;float:left;margin-right:2px;background:#fff;}
ul li.hover_css{border-bottom:solid 2px #06F;background:#f0f0f0;}
p{margin:0;padding:0;text-align:center;padding-top:20px;}
</style>
</head>
             
<body>
<div>
<ul><li class="hover_css" big="img/1.jpg">风景</li><li big="img/2.jpg">美女</li><li big="img/3.jpg">帅锅</li><li big="img/4.jpg">恶搞</li></ul>
<p>
<img src="img/1.jpg" />
</p>
</div>
</body>
</html>