jquery图片翻页

最新推荐文章于 2021-12-10 07:43:44 发布

1990_super

最新推荐文章于 2021-12-10 07:43:44 发布

阅读量1.7k

点赞数 1

分类专栏： jQuery

本文链接：https://blog.youkuaiyun.com/runbat/article/details/80775803

版权

jQuery 专栏收录该内容

5 篇文章

订阅专栏

一个简单的图片翻页效果，代码只需替换image数组即可使用.

思路：使用img标签展示图片，在图片下方提供上一页和下一页按钮，点击时候触发时间，使用$('#id').attr('src',image url)实现图片翻页，整体效果如下图，效果一般，后台系统使用对美没要求。

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
    .left {
        width: 40%;
        height: 560px;
        background: green;
        margin: 0px auto;
        float: left;
    }

    .right {
        width: 60%;
        height: 600px;
        float: left;
        margin: 0px auto;
    }

    .bottom {
        width: 100%;
        margin: 0px auto;
        clear: both;
    }

    .button a {
        display: inline-block;
        width: 140px;
        height: 40px;
        line-height: 40px;
        text-decoration: none;
        text-align: center;
        border-radius: 4px;
        margin: 40px;
    }

    .div{
        width:250px;
        float:left;
        padding:5px 5px;
    }
    .div img{
        width:100%;
    }
    .thumbnail {
        float:left;
        width:220px;
        min-height:1px;
        padding-right:5px;
    }
    .clearfix {
        zoom: 1;
    }

    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        visibility: hidden;
        clear: both;
    }
    .iframe_btn {
        height:40px;
        text-align:center;
    }
</style>
<body>
<div class="main" style="width: 1100px; margin: 0 auto;background: #fff;padding: 40px;overflow:hidden;margin-top:40px;">

    <div class="left">
        <img id="view_iframe" width="100%" height="560px;">
        </img>
        <div class="iframe_btn">
            <input id="prePage" οnclick="changeSrc(-1)" disabled="true" type="button" value="上一页">
            <input id="nextPage" οnclick="changeSrc(1)" type="button" value="下一页">
            <h6 id="pageCount" style="display:inline">1/1</h6>
        </div>
    </div>
    <div class="right">
        <div style="padding-left:40px;"><h1 id="title"></h1></div>
    </div>
<div>
</body>
<script src="./js/vendor/jquery-1.12.0.min.js"></script>
<script>
    var indexImage = 0;
    var image = new Array();

    image.push('img/sky.jpg');
    image.push('img/timg.jpg');
    image.push('img/lj.jpg');

    $("#view_iframe").attr('src', image[indexImage]);
    pageCount();
    if(image.length <= 1) {
        $('#prePage,#nextPage').attr('disabled', true);
    }
    function changeSrc(val) {
        indexImage = indexImage + val;
        $('#prePage,#nextPage').attr('disabled', false);
        if(indexImage == 0) {
            $('#prePage').attr('disabled', true);
        }
        if(indexImage == image.length - 1) {
            $('#nextPage').attr('disabled', true);
        }
        pageCount();
        $("#view_iframe").attr('src', image[indexImage]);
    }
    function pageCount() {
        $('#pageCount').text('第' + (indexImage+1) + '/' + image.length + '页');
    }
</script>
</html>