请问,我如何在轮播图片中加入超链接

王大少 发布于 2014/12/25 15:10
阅读 2K+
收藏 0

这是本人的一个轮播代码

但是在加入超链的时候,只能显示最后一个图片的超链接

怎么改,谢谢



<!DOCTYPE html>

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-1.7.1.min.js"></script>
    <style type="text/css">
        #head_third{
            width:920px;
            height:430px;
            overflow:hidden;
            position:relative;
            margin:10px auto;
            position: relative;
            top: -30px;
        }
        #head_third .box{
            width:820px;
            height:430px;
            box-shadow:0px 0px 5px #ddd;
            margin:0px auto;
            overflow:hidden;
            position:relative;
            top: 30px;
        }
        #head_third .box img{
            width:820px;
            height:430px;
            position:absolute;
            left:0px;top:0px;
            opacity:0;
            filter:alpha(opacity=0);
        }
        #head_third .btnLeft{
            width:35px;
            height:57px;
            position:absolute;
            left:0px;
            top:185px;
            background:url(img/left_ar.png) no-repeat 0px 0px;
        }
        #head_third .btnRight{
            width:35px;
            height:57px;
            position:absolute;
            right:0px;
            top:185px;
            background:url(img/right_ar.png) no-repeat 0px 0px;
        }
        #head_third .page{
            width:176px;
            height:22px;
            position:absolute;
            bottom:15px;
            right:50px;
        }
        #head_third .page a{
            display:inline-block;
            width:22px;
            height:22px;
            background:url(img/num_grey.png) no-repeat 0px 0px;
            margin:0px 11px;
            float:left;
            color:#FFF;
            text-decoration:none;
            text-align:center;
        }
        #head_third .page a.active{
            background:url(img/num_red.png) no-repeat 0px 0px;
        }
    </style>
</head>
<body>
<div class="show_face">
    <div id="head_third">
        <a class="btnLeft" id="btnLeft" href="javascript:void(0);"></a>
        <a class="btnRight" id="btnRight" href="javascript:void(0);"></a>
        <div class="box">
            <a href="1"><img style="opacity:1;filter:alpha(opacity=100);" src="img/index_001.png"/></a>
            <a href="2"><img src="img/index_002.png"/></a>
            <a href="3"><img src="img/index_003.png"/></a>
            <a href="4"><img src="img/index_004.png"/></a>
        </div>
        <div class="page">
            <a class="active" href="javascript:void(0);">1</a>
            <a href="javascript:void(0);">2</a>
            <a href="javascript:void(0);">3</a>
            <a href="javascript:void(0);">4</a>
        </div>
    </div>
</div>


<script type="text/javascript">
    $(function(){
        var aPage = $('#head_third .page a'); //分页按钮
        var aImg = $('#head_third .box img'); //图像集合
        var iSize = aImg.size(); //图像个数
        var index = 0; //切换索引
        var t;
        $('#btnLeft').click(function(){ //左边按钮点击
            index--;
            if(index<0){
                index=iSize-1
            }
            change(index)
        })
        $('#btnRight').click(function(){    //右边按钮点击
            index++;
            if(index>iSize-1){
                index=0
            }
            change(index)
        })
        //分页按钮点击
        aPage.click(function(){
            index = $(this).index();
            change(index)
        });
        //切换过程
        function change(index){
            aPage.removeClass('active');
            aPage.eq(index).addClass('active');
            aImg.stop();
            //隐藏除了当前元素,所以图像
            aImg.eq(index).siblings().animate({
                opacity:0
            },1000)
            //显示当前图像
            aImg.eq(index).animate({
                opacity:1
            },1000)
        }
        function autoshow() {
            index=index+1;
            if(index<=iSize-1){
                change(index);
            }else{
                index=0;
                change(index);
            }
        }
        int=setInterval(autoshow,3000);
        function clearInt() {
            $('#btnLeft,#btnRight,.page a').mouseover(function() {
                clearInterval(int);
            })
        }
        function setInt() {
            $('#btnLeft,#btnRight,.page a').mouseout(function() {
                int=setInterval(autoshow,3000);
            })
        }
        clearInt();
        setInt();
    });
</script>
</body>
</html>
加载中
返回顶部
顶部