自己东手写个jquery图片轮换效果

过年换个新环境，离家超近，开车10分钟就搞定，可以天天回家，爽歪歪。

话说，过来很忙，10几个java，就咱一个前端，天天苦逼的命。

新的项目上线，首页里面啥都搞好了，差个图片轮换效果，用网上现成插件，我了去，不兼容。

一打听，那哥们居然是jQuery 1.3.2，那哥哥既然用了3年了，无语，佩服中。。。。

给那哥们普及了下jquery发展势头，换成最新的1.7.1，反正新项目就用新版本吧。

那插件不用了，不知道哪边有问题，老是显示出错，纠结啊。

还是自己东东手吧，不然都冻僵了。

先给个效果图看看

 

大致效果就是 图片自动轮换，或者点击右下角那几个小图也会去相应的。

后端催命似的，代码写的不是很完善，就图个实现，兼容IE6 IE7 IE8 firefox chrome safari浏览器，IE9没条件测试，还是xp中，大家帮忙提点意见，感激啊。

丑代码出来见人咯。

<!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>
<style type="text/css">
body,div,ul,li,a,img{margin:0;padding:0}
img{border:none}
ul,li{list-style-type:none}
body{margin:0 auto;font:12px/1.5 tahoma,arial,\5b8b\4f53;color:#828282;background:#fff}
.boxx{width:750px;height:400px;margin:0 auto;position:relative}
    .boxx_con{width:100%;position:absolute;z-index:10}
    .boxx_title{width:200px;height:50px;position:absolute;top:365px;left:510px;z-index:100;}
        .boxx_title li{width:32px;height:32px;float:left;margin-left:10px;display:inline;cursor:pointer}
            .boxx_title li img{width:32px;height:32px;float:left;}
            .bks{border:1px #ccc solid}
</style>
</head>

<body>
<div class="boxx">
    <ul class="boxx_con" id="boxx_con">
        <li><a href="http://www.cnblogs.com/"><img src="http://img02.taobaocdn.com/imgextra/i2/388921303/T249ylXXNaXXXXXXXX_!!388921303.jpg" width="750" height="400"/></a></li>
        <li style="display:none"><a href="http://www.cnblogs.com/divcss/"><img src="http://img01.taobaocdn.com/imgextra/i1/388921303/T2r.elXhhXXXXXXXXX_!!388921303.jpg" width="750" height="400"/></a></li>
        <li style="display:none"><a href="http://www.cnblogs.com/"><img src="http://img03.taobaocdn.com/imgextra/i3/388921303/T2gEilXgXXXXXXXXXX_!!388921303.jpg" width="750" height="400"/></a></li>
        <li style="display:none"><a href="http://lifesky.taobao.com"><img src="http://img03.taobaocdn.com/imgextra/i3/T223VnXfFNXXXXXXXX-72683792.gif" width="750" height="400"/></a></li>
    </ul>
    <ul class="boxx_title" id="boxx_title">
        <li><img src="http://img02.taobaocdn.com/imgextra/i2/388921303/T249ylXXNaXXXXXXXX_!!388921303.jpg" width="32" height="32"/></li>
        <li><img src="http://img01.taobaocdn.com/imgextra/i1/388921303/T2r.elXhhXXXXXXXXX_!!388921303.jpg" width="32" height="32"/></li>
        <li><img src="http://img03.taobaocdn.com/imgextra/i3/388921303/T2gEilXgXXXXXXXXXX_!!388921303.jpg" width="32" height="32"/></li>
        <li><img src="http://img03.taobaocdn.com/imgextra/i3/T223VnXfFNXXXXXXXX-72683792.gif" width="32" height="32" /></li>
    </ul>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("a").attr("target","_blank");
    var p=0;
    var timeInterval=3000;
    var $bli=$("#boxx_con li");
    var $pli=$("#boxx_title li");
    
    $bli.hide();
    $($bli[0]).show();
    function play(){
        p<$bli.length-1?p++:p=0;
        $bli.eq(p).show().siblings().hide(); 
        $pli.eq(p).addClass("bks").siblings().removeClass("bks");   
    }
    set = window.setInterval(play,timeInterval);
    $pli.mouseover(function(){
            window.clearInterval(set);
            p=$(this).index();
            $bli.eq(p).show().siblings().hide(); 
            $pli.eq(p).addClass("bks").siblings().removeClass("bks"); 
            set = window.setInterval(play,timeInterval);  
        });   
})
</script>
</body>
</html>

 

提供个下载地址 猛击此处

posted @ 2012-02-16 09:55  遗失的天空  阅读(2150)  评论(8)  编辑  收藏  举报