轮播实现方法

1、单个非无缝滚动轮播

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>27-1无限轮播</title>
    <style>
        ul,li{
            list-style: none;
        }
        *{
            margin: 0;
            padding: 0;
        }
        .ct-img>li{
            float: left;
            width: 310px;
            height: 210px;
            display: none;
        }
        li img{
            width: 310px;
            height: 210px;
        }

        .clearfix:after{
            content: "";
            display: block;
            clear: both;
        }
        .ct-bottom>li{
            border-bottom: 5px solid #555;
            float: left;
            cursor: pointer;
            width: 20px;
            margin: 0 5px;
            border-radius: 2px;
        }
        .ct-bottom{
            position: absolute;
            top: 180px;
            left: 95px;
        }
        body{
            position: relative;
        }
        a.change{
            text-decoration: none;
            font-size: larger;
            font-weight: 900;
            background-color: #666;
            color: #fff;
            display: inline-block;
            vertical-align: middle;
            padding: 15px;
            width: 10px;
            height: 10px;
            line-height: 10px;
            border-radius: 25px;
            opacity: 0.7;
        }
        a.pre{
            position: absolute;
            left: 10px;
            top: 80px;
        }
        a.next{
            position: absolute;
            left: 250px;
            top: 80px;
        }
        a.change:hover{
            background-color: #444;
        }

    </style>
</head>
<body>
    <div class="ct">
        <ul class="clearfix ct-img">
            <li data-nub="0"><a href="#">![](http://upload-images.jianshu.io/upload_images/2166980-fa29da09e1abe792.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
            <li data-nub="1"><a href="#">![](http://upload-images.jianshu.io/upload_images/2166980-0ed4f2fd9ea0b571.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
            <li data-nub="2"><a href="#">![](http://upload-images.jianshu.io/upload_images/2166980-e181309822223f13.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
            <li data-nub="3"><a href="#">![](http://upload-images.jianshu.io/upload_images/2166980-beeaa45457e1cc51.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
        </ul>
        <ul class="ct-bottom clearfix">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <a href="####" class="pre change"> < </a>
        <a href="####" class="next change"> > </a>

    </div>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>

        var clock=false;
        show(0);
        setInterval(function () {
            playNext()
        },2000);


        function show(num) {
            if (clock){return;}
            clock=true;
            $(".ct-img").children().eq(num).siblings().css("display","none");
            $(".ct-bottom").children().eq(num).css("border-bottom-color","white");
            $(".ct-bottom").children().eq(num).siblings().css("border-bottom-color","#555");
            $(".ct-img").children().eq(num).fadeOut(500);
            $(".ct-img").children().eq(num).fadeIn(500,function () {
                clock=false
            });
             cur=num;
            return cur;
        }
        function playNext() {
            var nextNum=cur+1;
            if (nextNum===4){
                show(0)
            }
            else show(nextNum)
        }

        $(".next").on("click",function () {
            playNext();
        });

        $(".pre").on("click",function () {
            playPre();
        });

        function playPre() {
            var preNum=cur-1;
            if (preNum===-1){
                show(3)
            }
            else show(preNum)
        }
        $(".ct-bottom>li").on("click",function () {
            var $cur=$(this),
                indexNum=$cur.index();
                show(indexNum);
        })

    </script>

</body>
</html>

预览地址：http://htmlpreview.github.io/?https://github.com/have-not-BUG/task/blob/master/renwu/renwu27/renwu27-1.html

2、多个个非无缝滚动轮播

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>27-1无限轮播</title>
    <style>
        ul,li{
            list-style: none;
        }
        *{
            margin: 0;
            padding: 0;
        }
        .ct-img>li{
            float: left;
            width: 310px;
            height: 210px;
            display: none;
        }
        li img{
            width: 310px;
            height: 210px;
        }

        .clearfix:after{
            content: "";
            display: block;
            clear: both;
        }
        .ct-bottom>li{
            border-bottom: 5px solid #555;
            float: left;
            cursor: pointer;
            width: 20px;
            margin: 0 5px;
            border-radius: 2px;
        }
        .ct-bottom{
            position: absolute;
            top: 180px;
            left: 95px;
        }
        .ct{
            position: relative;
        }
        a.change{
            text-decoration: none;
            font-size: larger;
            font-weight: 900;
            background-color: #666;
            color: #fff;
            display: inline-block;
            vertical-align: middle;
            padding: 15px;
            width: 10px;
            height: 10px;
            line-height: 10px;
            border-radius: 25px;
            opacity: 0.7;
        }
        a.pre{
            position: absolute;
            left: 10px;
            top: 80px;
        }
        a.next{
            position: absolute;
            left: 250px;
            top: 80px;
        }
        a.change:hover{
            background-color: #444;
        }

    </style>
</head>
<body>
<div id="wrap">
    <div class="ct">
        <ul class="clearfix ct-img">
            <li data-nub="0"><a href="#">![](http://upload-images.jianshu.io/upload_images/2166980-fa29da09e1abe792.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
            <li data-nub="1"><a href="#">![](http://upload-images.jianshu.io/upload_images/2166980-0ed4f2fd9ea0b571.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
            <li data-nub="2"><a href="#">![](http://upload-images.jianshu.io/upload_images/2166980-e181309822223f13.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
            <li data-nub="3"><a href="#">![](http://upload-images.jianshu.io/upload_images/2166980-beeaa45457e1cc51.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
        </ul>
        <ul class="ct-bottom clearfix">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <a href="####" class="pre change"> < </a>
        <a href="####" class="next change"> > </a>

    </div>
    <div class="ct">
        <ul class="clearfix ct-img">
            <li data-nub="0"><a href="#">![](http://upload-images.jianshu.io/upload_images/2166980-e181309822223f13.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
            <li data-nub="1"><a href="#">![](http://upload-images.jianshu.io/upload_images/2166980-0ed4f2fd9ea0b571.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
            <li data-nub="2"><a href="#">![](http://upload-images.jianshu.io/upload_images/2166980-fa29da09e1abe792.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
            <li data-nub="3"><a href="#">![](http://upload-images.jianshu.io/upload_images/2166980-beeaa45457e1cc51.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
        </ul>
        <ul class="ct-bottom clearfix">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <a href="####" class="pre change"> < </a>
        <a href="####" class="next change"> > </a>

    </div>
    <div class="ct">
        <ul class="clearfix ct-img">
            <li data-nub="0"><a href="#">![](http://upload-images.jianshu.io/upload_images/2166980-fa29da09e1abe792.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
            <li data-nub="1"><a href="#">![](http://upload-images.jianshu.io/upload_images/2166980-0ed4f2fd9ea0b571.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
            <li data-nub="2"><a href="#">![](http://upload-images.jianshu.io/upload_images/2166980-e181309822223f13.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
            <li data-nub="3"><a href="#">![](http://upload-images.jianshu.io/upload_images/2166980-beeaa45457e1cc51.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
        </ul>
        <ul class="ct-bottom clearfix">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <a href="####" class="pre change"> < </a>
        <a href="####" class="next change"> > </a>

    </div>
</div>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script>


/* 自定义jQuery方法(开发jQuery插件常用此方法) 其实 $.fn === $.prototype */
    $.fn.allGo = function() {
        var $me=$(this),
            $ctImg=$me.find(".ct-img"),
            $ctBottom=$me.find(".ct-bottom"),
            $next=$me.find(".next"),
            $pre=$me.find(".pre"),
            $ctBottomLi=$me.find(".ct-bottom>li"),
            clock=false,
            cur=0;
        show(0);
        setInterval(function () {
            playNext()
        }, 2000);

        function show(num) {
            if (clock) {
                return;
            }
            clock = true;
            $ctBottom.children().eq(num).css("border-bottom-color", "white");
            $ctBottom.children().eq(num).siblings().css("border-bottom-color", "#555");
            $ctImg.children().eq(num).siblings().css("display", "none");
            $ctImg.children().eq(num).fadeOut(500);
            $ctImg.children().eq(num).fadeIn(500, function () {
                clock = false
            });
            cur = num;
            return cur;
        }

        function playNext() {
            var nextNum = cur + 1;
            if (nextNum === 4) {
                show(0)
            }
            else show(nextNum)
        }

        $next.on("click", function () {
            playNext();
        });

        $pre.on("click", function () {
            playPre();
        });

        function playPre() {
            var preNum = cur - 1;
            if (preNum === -1) {
                show(3)
            }
            else show(preNum)
        }

        $ctBottomLi.on("click", function () {
            var $cur = $(this),
                indexNum = $cur.index();
                show(indexNum);
        });

    };

    $(".ct").each(function () {
        $(this).allGo();
    });
</script>

</body>
</html>

预览地址：http://htmlpreview.github.io/?https://github.com/have-not-BUG/task/blob/master/renwu/renwu27/renwu27-2.html

3、无缝轮播

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>27-1无限轮播</title>
    <style>
        ul,li{
            list-style: none;
        }

        *{
            margin: 0;
            padding: 0;
        }

        .ct-img>li{
            float: left;
            width: 310px;
            height: 210px;


        }
        .ct-img{
            position: absolute;

        }
        img{
            width: 310px;
            height: 210px;
        }

        .clearfix:after{
            content: "";
            display: block;
            clear: both;
        }
        .ct-bottom>li{
            border-bottom: 5px solid #555;
            float: left;
            cursor: pointer;
            width: 20px;
            margin: 0 5px;
            border-radius: 2px;
        }
        .ct-bottom{
            position: absolute;
            top: 180px;
            left: 95px;
        }
        .ct{
            position: relative;
            height: 210px;
            width: 310px;
            overflow: hidden;

        }
        a.change{
            text-decoration: none;
            font-size: larger;
            font-weight: 900;
            background-color: #666;
            color: #fff;
            display: inline-block;
            vertical-align: middle;
            padding: 15px;
            width: 10px;
            height: 10px;
            line-height: 10px;
            border-radius: 25px;
            opacity: 0.7;
        }
        a.pre{
            position: absolute;
            left: 10px;
            top: 80px;
        }
        a.next{
            position: absolute;
            left: 250px;
            top: 80px;
        }
        a.change:hover{
            background-color: #444;
        }

    </style>
</head>
<body>
<div class="ct">
    <ul class="clearfix ct-img">
        <li data-nub="0"><a href="#">![](http://upload-images.jianshu.io/upload_images/2166980-6ab5d1205bf5e648.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
        <li data-nub="1"><a href="#">![](http://upload-images.jianshu.io/upload_images/2166980-4a650bbc5c4aa561.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
        <li data-nub="2"><a href="#">![](http://upload-images.jianshu.io/upload_images/2166980-3f5ed4941a5622a1.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
        <li data-nub="3"><a href="#">![](http://upload-images.jianshu.io/upload_images/2166980-5e9ce2909a791c90.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
    </ul>
    <ul class="ct-bottom clearfix">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <a href="####" class="pre change"> < </a>
    <a href="####" class="next change"> > </a>

</div>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
    var imgWidth=$(".ct-img").children().width(),
            clock=false,
            nextClock=false,
           $liImg=$(".ct-img").children(),
           imgCount=$liImg.size();

    $(".ct-img").append($liImg.first().clone());
    $(".ct-img").prepend($liImg.last().clone());
    imgTrueCount=$(".ct-img").children().length;
    $(".ct-img").css({"left":0-imgWidth,"width":imgTrueCount*imgWidth});




    function showMe(num) {
        if (clock){return}
        clock=true;
        if (-1<num<imgCount){
            $(".ct-bottom").children().eq(num).css("border-bottom-color","white");
            $(".ct-bottom").children().eq(num).siblings().css("border-bottom-color","#555");
            $(".ct-img").animate({left:"-"+imgWidth*(num+1)});
        }
        if (num===imgCount){
            $(".ct-img").animate({"left":"-"+imgWidth*(imgCount+1)},function () {
                $(".ct-img").css("left",0-imgWidth);
            });
            $(".ct-bottom").children().eq(0).css("border-bottom-color","white");
            $(".ct-bottom").children().eq(0).siblings().css("border-bottom-color","#555");

        }
        if (num===-1){
            $(".ct-img").animate({"left":"0"},function () {
                $(".ct-img").css("left",0-imgWidth*imgCount);

            });
            $(".ct-bottom").children().eq(imgCount-1).css("border-bottom-color","white");
            $(".ct-bottom").children().eq(imgCount-1).siblings().css("border-bottom-color","#555");

        }

        myIndex=num;
        clock=false;
        nextClock=false;
        return myIndex;
    }

    function playNext() {
        if (myIndex===imgCount){
            myIndex=0;
            showMe(myIndex+1);
            return ;
        }
        showMe(myIndex+1);

    }

    function playPre() {

        if (myIndex===-1){
            myIndex=imgCount-2;
            showMe(myIndex);
            return ;
        }
        showMe(myIndex-1)
    }


    $(".next").on("click",function () {

           clearTimeout(timing);
            playNext();
            circulate();
    });

    $(".pre").on("click",function () {
        clearTimeout(timing);
        playPre();
        circulate();

    });

    showMe(0);

    circulate();

    function circulate() {
        timing=setTimeout(function () {
            playNext();
            circulate();
        },3000);
    }


    $(".ct-bottom").children().on("click", function () {
        clearTimeout(timing);
        var $cur = $(this),
                indexNum = $cur.index();
        if (indexNum===0){
            showMe(imgCount);
        }
        else   showMe(indexNum);
        circulate();
    });


</script>

</body>
</html>

预览地址：http://htmlpreview.github.io/?https://github.com/have-not-BUG/task/blob/master/renwu/renwu27/renwen27-3.html

4、全屏无缝轮播

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>27-4无限轮播</title>
    <style>
        ul,li{
            list-style: none;
        }

        *{
            margin: 0;
            padding: 0;
        }
        body,html,.wrap,.ct-bg{
            width: 100%;
            height: 100%;
        }
        .wrap{
            position: relative;
            overflow: hidden;

        }
        .ct-bg{
            position: absolute;

        }

        .ct-bg>li{
            float: left;
            height: 100%;
            width: 100%;
            text-align: center;
            position: relative;
        }
        .bg{
            background-image:url("http://cdn.jirengu.com/book.jirengu.com/img/6.jpg");
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
            height: 100%;
            width: 100%;
            position: absolute;

        }

        .clearfix:after{
            content: "";
            display: block;
            clear: both;
        }

        .ct-bg .ct-text{
            position: absolute;
            top:50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .ct-text>h1{
            padding-bottom: 20px;
        }

        .ct-bottom{
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
        }

        .ct-bottom>li{
            border-bottom: 5px solid #555;
            float: left;
            cursor: pointer;
            width: 20px;
            margin: 0 5px;
            border-radius: 2px;
        }


        a.change{
            text-decoration: none;
            font-size: larger;
            font-weight: 900;
            background-color: #666;
            color: #fff;
            display: inline-block;
            vertical-align: middle;
            padding: 15px;
            width: 10px;
            height: 10px;
            line-height: 10px;
            border-radius: 25px;
            opacity: 0.7;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
        a.pre{
            left: 50px;
        }
        a.next{
            right: 50px;
        }
        a.change:hover{
            background-color: #444;
        }

    </style>
</head>
<body>
<div class="wrap">
    <ul class="clearfix ct-bg">
        <li>
            <div class="bg" data-bg="http://cdn.jirengu.com/book.jirengu.com/img/6.jpg"></div>
            <div class="ct-text">
            <h1>我是第一张</h1>
            <h3>我是标题</h3>
            </div>
        </li>
        <li>
            <div class="bg" data-bg="http://cdn.jirengu.com/book.jirengu.com/img/7.jpg"></div>
            <div class="ct-text">
                <h1>我是第二张</h1>
                <h3>我是标题</h3>
            </div>
        </li>
        <li>
            <div class="bg" data-bg="http://cdn.jirengu.com/book.jirengu.com/img/8.jpg"></div>
            <div class="ct-text">
                <h1>我是第三张</h1>
                <h3>我是标题</h3>
            </div>
        </li>
        <li>
            <div class="bg" data-bg="http://cdn.jirengu.com/book.jirengu.com/img/9.jpg"></div>
            <div class="ct-text">
                <h1>我是第四张</h1>
                <h3>我是标题</h3>
            </div>
        </li>

    </ul>
    <ul class="ct-bottom clearfix">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <a href="####" class="pre change"> < </a>
    <a href="####" class="next change"> > </a>

</div>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script>

    var bgLiWidth=$(".ct-bg").children().width(),
            clock=false,
            nextClock=false,
            $bgLi=$(".ct-bg").children(),
            bgCount=$bgLi.size();

    $(".ct-bg").append($bgLi.first().clone());
    $(".ct-bg").prepend($bgLi.last().clone());
    bgTrueCount=$(".ct-bg").children().length;
    $(".ct-bg").css({"left":0-bgLiWidth,"width":bgTrueCount*bgLiWidth});
    $(".ct-bg").children().width(bgLiWidth);


    function showMe(num) {
        if (clock){return}
        clock=true;
        if (-1<num<bgCount){
            $(".ct-bottom").children().eq(num).css("border-bottom-color","white");
            $(".ct-bottom").children().eq(num).siblings().css("border-bottom-color","#555");
            $(".ct-bg").animate({left:"-"+bgLiWidth*(num+1)});

            isSetBgUrl();
            function isSetBgUrl() {
                if ($(".bg").eq(num+1).data("setBgUrl"))  {return;}
                else {trueBgUrl=$(".ct-bg .bg").eq(num+1).attr("data-bg");
                    $(".bg").eq(num+1).css("background-image",'url('+trueBgUrl+')');
                    $(".bg").eq(num+1).data("setBgUrl",true) ;
                }
            }



        }
        if (num===bgCount){
            $(".ct-bg").animate({"left":"-"+bgLiWidth*(bgCount+1)},function () {
                $(".ct-bg").css("left",0-bgLiWidth);
            });
            $(".ct-bottom").children().eq(0).css("border-bottom-color","white");
            $(".ct-bottom").children().eq(0).siblings().css("border-bottom-color","#555");

        }
        if (num===-1){
            $(".ct-bg").animate({"left":"0"},function () {
                $(".ct-bg").css("left",0-bgLiWidth*bgCount);

            });
            $(".ct-bottom").children().eq(bgCount-1).css("border-bottom-color","white");
            $(".ct-bottom").children().eq(bgCount-1).siblings().css("border-bottom-color","#555");

        }

        myIndex=num;
        clock=false;
        nextClock=false;
        return myIndex;
    }

    function playNext() {
        if (myIndex===bgCount){
            myIndex=0;
            showMe(myIndex+1);
            return ;
        }
        showMe(myIndex+1);

    }

    function playPre() {

        if (myIndex===-1){
            myIndex=bgCount-2;
            showMe(myIndex);
            return ;
        }
        showMe(myIndex-1)
    }


    $(".next").on("click",function () {

        clearTimeout(timing);
        playNext();
        circulate();
    });

    $(".pre").on("click",function () {
        clearTimeout(timing);
        playPre();
        circulate();

    });

    showMe(0);

    circulate();

    function circulate() {
        timing=setTimeout(function () {
            playNext();
            circulate();
        },3000);
    }


    $(".ct-bottom").children().on("click", function () {
        clearTimeout(timing);
        var $cur = $(this),
                indexNum = $cur.index();
        if (indexNum===0){
            showMe(bgCount);
        }
        else   showMe(indexNum);
        circulate();
    });


</script>

</body>
</html>

预览地址：http://htmlpreview.github.io/?https://github.com/have-not-BUG/task/blob/master/renwu/renwu27/renwu27-4.html

**本文版权归本人即简书笔名：该账户已被查封所有，如需转载请注明出处。谢谢！ *

最后编辑于：2018.01.27 10:04:14

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 159,835评论 4赞 364
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 67,598评论 1赞 295
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 109,569评论 0赞 244
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 44,159评论 0赞 213
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 52,533评论 3赞 287
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 40,710评论 1赞 222
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 31,923评论 2赞 313
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,674评论 0赞 203
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,421评论 1赞 246
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,622评论 2赞 245
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 32,115评论 1赞 260
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,428评论 2赞 254
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 33,114评论 3赞 238
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,097评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,875评论 0赞 197
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 35,753评论 2赞 276
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,649评论 2赞 271

轮播实现方法

推荐阅读更多精彩内容