图片轮播切换

style.css

#header{width:500px;text-align:center;line-height:35px;font-size:12px;color:#fff;background:#ccc;}
#main{width:500px;height:340px;margin:auto;position:relative;border:1px solid #ccc;}
#banner {position:absolute; width:480px; height:272px; border:1px solid #666; overflow:hidden;left:10px;top:56px;}
#bannerList img {border:0px;}
#bannerBg {position:absolute; bottom:0;background-color:#000;height:30px;filter: Alpha(Opacity=30);opacity:0.3;z-index:1000;cursor:pointer; width:478px; }
#bannerInfo{position:absolute; bottom:0; left:5px;height:22px;color:#fff;z-index:1001;cursor:pointer}
#bannerText {position:absolute;width:120px;z-index:1002; right:3px; bottom:3px;}
#banner ul {position:absolute;list-style-type:none;filter: Alpha(Opacity=80);opacity:0.8; border:1px solid #fff;z-index:1002;margin:0; padding:0; bottom:3px; right:5px;}
#banner ul li { padding:0px 8px;float:left;display:block;color:#FFF;border:#e5eaff 1px solid;background:#ccc;cursor:pointer;}
#banner ul li.show { background:#900;}
#bannerList a{position:absolute;} <!-- 让四张图片都可以重叠在一起-->

index.html

<!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>
<link rel="stylesheet" type="text/css" href="style.css">
<style>

</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
    var    t =    0;
    var    n =    0;
    var    count;
    $(document).ready(function(){    
        count=$("#bannerList a").length;//获取用户控制a标签的总数
        $("#bannerList a:not(:first-child)").hide();//除了第一个元素都隐藏
        $("#banner li").click(function(){//给存放图片的列表添加单击事件
            var    i =    $(this).text() - 1;//获取Li元素内的值，即1，2，3，4
            n =    i;//i的值赋值给n
            if (i >= count){//判断是否大于a标签的总数
                return;
            }
            var    $a = $("#bannerList    a").filter(":visible").fadeOut(500);
            $a.parent().children().eq(i).fadeIn(1000);//根据当前li元素的值显示图片
            $("#banner").css("background","");//显示按钮样式
            $(this).toggleClass("show");//当前对象删除类show
            $(this).siblings().removeAttr("class");//当前对象删除类属性
        });
        t =    setInterval("showTime()", 3000);//每隔三秒执行一次方法
        $("#banner").hover(function(){//给按钮添加鼠标滑过事件
            clearInterval(t)},function(){//鼠标滑过停止播放
            t =    setInterval("showTime()", 3000);//鼠标滑出继续播放
        });
    })
    function showTime()
    {
        if(n>=(count-1)){
            n=0;
        }else{
            n=++n;
        }
        $("#banner li").eq(n).trigger('click');
    }
</script>

</head>
<body>

    <div id="main">
    <div id="header">带动画效果的图片轮播</div>
    <div id="banner">    
        <div id="bannerBg"></div>
        <div id="bannerInfo"></div>
            <ul>
                <li    class="show">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
        <div id="bannerList">
            <a href="#"    ><img src="images/img1.jpg"    /></a>
            <a href="#"    ><img src="images/img2.jpg"    /></a>
            <a href="#"    ><img src="images/img3.jpg"    /></a>
            <a href="#"    ><img src="images/img4.jpg"    /></a>
        </div>
    </div>
    </div>
</body>
</html>

 

posted @ 2014-07-15 11:29  壁虎漫步.  阅读(175)  评论(0)  编辑  收藏  举报