自己写的1个简单但易懂实用的广告幻灯片切换代码

代码比较简单,可操作性较强,可以自己组合。主要使用的是jquery的自有功能实现,我把代码贴出来,有空的可以参考1下:

<!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>无标题文档</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>

<style>
* {font-family: "Lucida Grande" , "微软雅黑" , "宋体" , "黑体" , "幼圆" , "隶书" , "华文行楷", Verdana, Lucida, Arial, Helvetica, sans-serif;}
body {
    font-size:12px;
    border:0px;
    font-variant: normal;
    color: #bcbcbc;
    text-decoration: none;
    margin: 0px;
    padding: 0px;
    background-color: #fff;
    width:100%;
}
ul,li,ol,dl,dt,dd,form{padding:0px;margin:0px;}
li{ list-style:none}
form,img { border:none;}
.left{ float:left;}
.right{ float:right}
.clear{ clear:both}
.buttons li a {width:100px;height:50px; background:#069; display:block}
.buttons li a:hover{ background:#CCC}
.buttons li a.mouseover{background:#CCC}  /* 定义鼠标移上的效果*/
</style>

<script type="text/javascript">
//焦点图功能
$(function(){
    var ad_img = $("#imgs"); //定义幻灯图片组的id,可以根据实际情况修改
    var ad_button = $("#buttons"); //定义幻灯按钮组的id,可以根据实际情况修改
    var ad_imgs = ad_img.find("li");  //图片组的li集合
    var ad_buttons = ad_button.find("li") //按钮组的li集合
    var ad_mouseoverCls="mouseover" //定义鼠标移上的class的名称,可以根据实际情况修改
    ad_imgs.hide() //默认将图片组隐藏
    ad_imgs.eq(0).show() //默认将第1张图片显示
    var ad_i = 1; //计数器,默认从第2张图片开始淡入
    ad_buttons.mouseover(function(){
        ad_i = ad_buttons.index(this); //鼠标移上的是第几个
        ad_imgs.hide()
        ieFilter(ad_imgs[ad_i]); //执行滤镜
        ad_imgs.eq(ad_i).show(); //将对应的图片显示
        ad_buttons.find("a").removeClass(ad_mouseoverCls);
        ad_buttons.eq(ad_i).find("a").addClass(ad_mouseoverCls);
        })

    //如果是ie浏览器则执行滤镜
    var ieFilter = function(o){
        if($.browser.msie){
            $(o).css("filter","progid:DXImageTransform.Microsoft.RevealTrans(Duration=1, Transition=23)") //设置滤镜
            o.filters[0].apply();
            o.filters[0].    transition=23; //每次出现不同样式
            o.filters[0].play();
            }
        }
    var ad_autoMarquee = function(){
        if(ad_i<ad_imgs.length){
            ad_imgs.hide()
            ieFilter(ad_imgs[ad_i]); //执行滤镜
            ad_imgs.eq(ad_i).show(); //将对应的图片显示
            ad_buttons.find("a").removeClass(ad_mouseoverCls);
            ad_buttons.eq(ad_i).find("a").addClass(ad_mouseoverCls);
            ad_i++; //将计数器增1
            }else{
                ad_i=0; //重置计数器
                }
        }
    var focusAd = setInterval(ad_autoMarquee,3000)
    })    
</script>
</head>

<body>
<div >
<div id="imgs">
    <ul>
    <li><img src="Chrysanthemum.jpg" /></li>
    <li><img src="Desert.jpg" /></li>
    <li><img src="Hydrangeas.jpg" /></li>
    </ul>
</div>
<div     class="right buttons" id="buttons">
    <ul>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    </ul>
</div>
</div>
<div     class="clear"></div>
<h1><a href="http://zhuoyue.me">卓越.Me</a></h1>
</body>
</html>

你也可以看1下在线演示的效果:http://demo.zhuoyue.me/js/Ad/zi-ji-bian-xie-de-jian-dan-yi-dong-de-huan-deng/
当然你可以把源代码和图片下载下来:自己编写的简单易懂实用的广告幻灯代码

Leave a Reply

Your email address will not be published. Required fields are marked *