轮播图

1 element ui 走马灯实现轮播图
Carousel 在有限空间内，循环播放同一类型的图片、文字等内容
插件属性：

image.png

<template>
<div class="center home-events-box">
  <el-row type="flex" style="height: 56px;line-height: 56px;margin-bottom:37px" justify="space-between" :gutter="10">
    <el-col style="font-size: 24px;" :span="12">赛事活动</el-col>
    <el-col class="text-right" :span="12">
      <el-button size="mini">查看更多</el-button>
    </el-col>
  </el-row>
  <el-carousel class="carousel-chart-box" :interval="4000" type="card" arrow="never" indicator-position="none" :autoplay="false" height="305px">
    <el-carousel-item v-for="(item,key) in images" :key="key">
      <img :src="item.img" alt="">
    </el-carousel-item>
  </el-carousel>
</div>
</template>
<script>
export default {
name: "homeEvents",
data() {
  return {
    images: [
      {
        img: require("@/assets/img/1.png"),
      },
      {
        img: require("@/assets/img/2.png"),
      },
      {
        img: require("@/assets/img/3.png"),
      },
    ],
  };
},
};
</script>
<style lang="less" scoped>
.home-events-box {
height: 460px;
background: #fff;
border-radius: 0px 0px 0px 0px;
opacity: 1;
.el-carousel__item--card.is-active {
  width: 95% !important;
  transform: translateX(30px) scale(1) !important;
}
}
</style>

2 使用swiper插件实现
swiper官网](https://www.swiper.com.cn/usage/index.html%29)
（1）安装依赖 npm i swiper (可以根据需要选择对应版本)
（2）在需要使用轮播图的组件内导入swpier和它的css样式
（3）在组件中创建swiper需要的dom标签（html代码，参考官网代码）
（4）创建swiper实例

<template>
  <!--列表-->
  <div class="list-container">
    <div class="sortList clearfix">
      <div class="center">
        <!--banner轮播-->
        <div class="swiper-container" id="mySwiper">
 
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(carouse,index) in bannerList" :key="carouse.id">
              <img :src="carouse.imgUrl" />
            </div>
          </div>
 
          <!-- 如果需要分页器 -->
          <div class="swiper-pagination"></div>
 
          <!-- 如果需要导航按钮 -->
          <div class="swiper-button-prev" ></div>
          <div class="swiper-button-next"></div>
        </div>
      </div>
      </div>
    </div>
  </div>
</template>
<script>
//引入Swiper
import Swiper from 'swiper'
//引入Swiper样式
import 'swiper/css/swiper.css'
 
import {mapState} from "vuex";
 
export default {
  name: "index",
  //主键挂载完毕，ajax请求轮播图图片
  mounted() {
    this.$store.dispatch("getBannerList")
  },
  computed:{
    ...mapState({
    //从仓库中获取轮播图数据
      bannerList: (state) => {return state.home.bannerList}
    })
  },
  watch:{
    //监听bannerList数据的变化，因为这条数据发生过变化----有空数组变为数组里面的四个元素
    bannerList(newValue,oldValue){
        //执行handler方法，代表组件实例身上这个属性已经有了【数组：四个元素】
        //当前这个函数执行：只能保证bannerList数据已经有了，但是没办法保证v-for已经执行结束了
        //v-for执行完毕，才有结构【你现在在watch当中没办法保证的】
        //nextTick:在下一次DOM更新 循环结束之后执行延迟的回调。在 修改数据之后 立即使用这个方法，获取更新后的DOM
        this.$nextTick(()=>{
          let mySwiper = new Swiper(document.getElementsByClassName("swiper-container"),{
            pagination:{
              el: '.swiper-pagination',
              clickable: true,
            },
            // 如果需要前进后退按钮
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            },
            // 如果需要滚动条
            scrollbar: {
              el: '.swiper-scrollbar',
            },
          })
        })
    }
  }
}
</script>

3 JS+CSS实现滑动轮播图
使用JS加CSS来实现的幻灯片，主要使用的是CSS的transform属性中的translate来实现，适合与用户交互的轮播图，展现轮播图的数量，用户可自由进行选择。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }


    .cardBox {
      width: 600px;
      height: 300px;
      box-shadow: 0 0 10px gray;
      border-radius: 5px;
      margin: 100px auto;
      position: relative;
      overflow: hidden;
    }

    .imgBox {
      width: 3600px;
      height: 300px;
      transition: all 1s;
      transform: translateX(0px);
    }

    .item {
      width: 600px;
      height: 300px;
      float: left;

    }

    .item img {
      width: 100%;
    }

    .btn {
      width: 20px;
      height: 20px;
      top: calc(50% - 20px);
      border-right: solid white;
      border-top: solid white;
      position: absolute;
      z-index: 99;
      opacity: .6;
      cursor: pointer;
    }

    .btn:hover {
      opacity: 1;
    }

    .left {
      left: 15px;
      transform: rotate(-135deg);
    }

    .right {
      right: 15px;
      transform: rotate(45deg);
    }

    .pointBox {
      display: flex;
      width: 50%;
      position: absolute;
      bottom: 15px;
      left: 50%;
      transform: translateX(-50%);
      justify-content: center;
    }

    .pointBox li {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: gray;
      margin: 0 10px;
      opacity: .7;
      cursor: pointer;
    }

    .pointBox li:hover {
      opacity: 1;
      background-color: white;
    }
  </style>
</head>

<body>
  <div class="cardBox">
    <div class="btn left"></div>
    <div class="btn right"></div>
    <ul class="imgBox">
      <li class="item">
        <img src="https://img2.baidu.com/it/u=2988589017,2923917558&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800" alt="">
      </li>
      <li class="item">

        <img src="https://img2.baidu.com/it/u=3867960631,2923014190&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""
          srcset="">
      </li>
      <li class="item">

        <img src="https://img0.baidu.com/it/u=891036130,2043934807&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""
          srcset="">
      </li>
      <li class="item">

        <img src="https://img1.baidu.com/it/u=1304255642,2961408783&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""
          srcset="">
      </li>
      <li class="item">

        <img src="https://img0.baidu.com/it/u=3822016102,3026244821&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281" alt=""
          srcset="">
      </li>
      <li class="item">
        <img src="https://img1.baidu.com/it/u=847956157,2750448390&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt=""
          srcset="">
      </li>
    </ul>
    <ul class="pointBox">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
  <script>
    let card = document.querySelector('.cardBox ul')
    let cardBox = document.querySelector('.cardBox')
    let items = document.querySelectorAll(".item")
    let leftBtn = document.querySelector(".left")
    let rightBtn = document.querySelector(".right")
    let points = document.querySelectorAll(".pointBox li")
    let index = 0
    items.forEach((item, index) => {
      let translateX = index * 600
      item.style.left = `${translateX}px`
    })
    let timer = null
    points[index].style.background = 'white'
    points[index].style.width = '16px'
    points[index].style.borderRadius = '5px'
    const initInterval = () => {
      timer = setInterval(() => {
        index++
        let pointIndex = index;
        points[pointIndex].style.background = 'white'
        points[pointIndex].style.width = '16px'
        points[pointIndex].style.borderRadius = '5px'
        if (pointIndex == 0) {
          points[5].style.background = 'gray'
          points[5].style.width = '8px'
        } else {
          points[pointIndex - 1].style.background = 'gray'
          points[pointIndex - 1].style.width = '8px'
        }


        let translateX = -index * 600
        card.style.transform = `translateX(${translateX}px)`
        if (index >= 5) {
          index = -1
        }
      }, 3000);
    }

    initInterval()
    cardBox.addEventListener("mouseover", () => {
      clearInterval(timer)
    })

    cardBox.addEventListener("mouseout", () => {
      initInterval()
    })
    // btn.addEventListener("mouseout", () => {
    //   initInterval()
    // })
    leftBtn.onclick = function () {
      if (timer) {
        clearInterval(timer)
      }
      if (index <= 0) {
        index = 6
      }
      index--
      let translateX = -index * 600
      card.style.transform = `translateX(${translateX}px)`
    }
    rightBtn.onclick = function () {
      if (timer) {
        clearInterval(timer)
      }
      index++
      let translateX = -index * 600
      card.style.transform = `translateX(${translateX}px)`
      if (index >= 5) {
        index = -1
      }
    }
    points.forEach((item, i) => {
      item.onclick = () => {
        points.forEach(element => {
          element.style.background = 'gray'
          element.style.width = '8px'
          element.style.borderRadius = '50%'
        });
        item.style.background = 'white'
        item.style.width = '16px'
        item.style.borderRadius = '5px'
        index = i;
        let translateX = -index * 600
        card.style.transform = `translateX(${translateX}px)`
      }
    })
  </script>
</body>

</html>

4 纯CSS实现滑动轮播图
主要使用css3的动画属性以及translate来实现，适合不需要和用户交互的广告图轮播图片

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>css3 实现幻灯片效果</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .banner {
      width: 600px;
      height: 400px;
      margin: 100px auto;
      overflow: hidden;
      box-shadow: 0 0 5px rgba(0, 0, 0, 1);
      border-radius: 5px;
    }

    .banner ul {
      width: 2000px;
      height: 100%;
      animation: loops 10s infinite ease;
    }

    .item {
      width: 600px;
      height: 100%;
      float: left;
    }

    .item img {
      width: 600px;
      height: 100%;
    }

    @keyframes loops {
      0% {
        transform: translateX(0);
      }

      50% {
        transform: translateX(-600px);
      }

      100% {
        transform: translateX(-1200px);
      }
    }
  </style>
</head>

<body>
  <div class="banner">
    <ul>
      <li class="item">

        <img src="https://img1.baidu.com/it/u=1304255642,2961408783&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""
          srcset="">
      </li>
      <li class="item">

        <img src="https://img0.baidu.com/it/u=3822016102,3026244821&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281" alt=""
          srcset="">
      </li>
      <li class="item">
        <img src="https://img1.baidu.com/it/u=847956157,2750448390&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt=""
          srcset="">
      </li>
    </ul>
  </div>
</body>

</html>

5 JS+CSS实现浅入浅出轮播图
使用CSS的动画属性以及透明度属性来进行设置，显示轮播图数量，通过点击轮播图中的索引点来切换轮播图。适合需要和用户交互的简单轮播图

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .banner {
      display: none;
    }

    .bannerBox {
      width: 600px;
      margin: 100px auto;
      position: relative;
      height: 300px;
      overflow: hidden;
      border-radius: 5px;
      box-shadow: 0 0 5px gray;
    }

    .item {
      width: 600px;
      height: 300px;
      animation-name: fade;
      animation-duration: 1.5s;
    }

    .item img {
      width: 100%;
    }


    @keyframes fade {
      from {
        opacity: .4
      }

      to {
        opacity: 1
      }
    }

    .points {
      display: flex;
      position: absolute;
      bottom: 10px;
      left: 50%;
      width: 50%;
      transform: translateX(-50%);
      justify-content: center;
    }

    .points p {
      border-radius: 5px;
      margin: 0 10px;
      cursor: pointer;
    }
  </style>
</head>


<body>
  <div class="bannerBox">
    <ul>
      <li class="item banner">
        <img src="https://img2.baidu.com/it/u=2988589017,2923917558&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800" alt="">
      </li>
      <li class="item banner">

        <img src="https://img2.baidu.com/it/u=3867960631,2923014190&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""
          srcset="">
      </li>
      <li class="item banner">

        <img src="https://img0.baidu.com/it/u=891036130,2043934807&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""
          srcset="">
      </li>
      <li class="item banner">

        <img src="https://img1.baidu.com/it/u=1304255642,2961408783&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""
          srcset="">
      </li>
      <li class="item banner">

        <img src="https://img0.baidu.com/it/u=3822016102,3026244821&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281" alt=""
          srcset="">
      </li>
      <li class="item banner">
        <img src="https://img1.baidu.com/it/u=847956157,2750448390&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt=""
          srcset="">
      </li>
    </ul>
    <div class="points">
    </div>

  </div>
  <script>
    let index = 0;
    let pointsBox = document.querySelector(".points")
    let banners = document.querySelectorAll(".banner");
    for (let i = 0; i < banners.length; i++) {
      let p = document.createElement('p')
      pointsBox.appendChild(p)
      p.style.background = 'gray';
      p.style.width = '10px'
      p.style.height = '10px'
    }
    let points = document.querySelectorAll('.points p')

    const initBanber = () => {
      for (let i = 0; i < banners.length; i++) {
        banners[i].style.display = "none";
        points[i].style.background = 'gray';
        points[i].style.width = '10px'
        points[i].style.height = '10px'
      }
      index++;
      if (index > banners.length) {
        index = 1
      }
      points[index - 1].style.background = 'white';
      points[index - 1].style.width = '20px'
      banners[index - 1].style.display = "block";
    }
    let timer = null;
    points.forEach((item, i) => {
      item.onclick = function () {
        index = i
        initBanber();
      }
    });
    const initInterval = () => {
      timer = setInterval(() => {
        initBanber()
      }, 3000);
    }
    pointsBox.addEventListener('mouseover', function () {
      clearInterval(timer)
    })
    pointsBox.addEventListener('mouseout', function () {
      initInterval()
    })
    initBanber();
    initInterval();
  </script>
</body>

</html>

6 JS+CSS实现滑动带遮罩轮播图

主要对CSS中的index属性进行更改，搭配CSS动画属性对轮播图进行设置。支持鼠标悬停，鼠标离开自动播放。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }


    .cardBox {
      width: 600px;
      height: 300px;
      margin: 100px auto;
      position: relative;
      overflow: hidden;
      box-shadow: 0 0 5px black;
      border-radius: 10px;
    }


    .item {
      width: 600px;
      height: 300px;
      cursor: pointer;
      position: absolute;
      right: 0;
      top: 0;
    }

    .ani {
      animation: cover 2s linear;
      z-index: 3 !important;
    }

    .ani::before {
      content: "";
      display: none;
    }

    .item::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      height: 100%;
      width: 600px;
      background-color: rgba(0, 0, 0, .8);
    }

    @keyframes cover {
      from {
        right: 600px;
      }

      to {
        right: 0px;
      }
    }

    .item img {
      width: 100%;
    }
  </style>
</head>

<body>
  <div class="cardBox">
    <ul class="imgBox">
      <li class="item"></li>
      <li class="item ani">
        <img src="https://img2.baidu.com/it/u=2988589017,2923917558&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800" alt="">
      </li>
      <li class="item">

        <img src="https://img2.baidu.com/it/u=3867960631,2923014190&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""
          srcset="">
      </li>
      <li class="item">

        <img src="https://img0.baidu.com/it/u=891036130,2043934807&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""
          srcset="">
      </li>
      <li class="item">

        <img src="https://img1.baidu.com/it/u=1304255642,2961408783&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""
          srcset="">
      </li>
      <li class="item">

        <img src="https://img0.baidu.com/it/u=3822016102,3026244821&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281" alt=""
          srcset="">
      </li>
      <li class="item">
        <img src="https://img1.baidu.com/it/u=847956157,2750448390&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt=""
          srcset="">
      </li>
    </ul>
  </div>
  <script>
    let items = document.querySelectorAll(".item")
    let imgBox = document.querySelector(".imgBox")
    let index = 1
    let timer = null
    const initInterval = () => {
      timer = setInterval(() => {
        items.forEach((item, index) => {
          let translateX = index * 600
          item.style.zIndex = `-1`
          item.classList.remove('ani')
        })
        items[index].classList.add('ani')
        let pre = index - 1
        items[pre].style.zIndex = '2'
        index++
        if (index >= 7) {
          index = 1
        }
      }, 4000);
    }

    initInterval()
    imgBox.addEventListener("mouseover", () => {
      clearInterval(timer)
    })

    imgBox.addEventListener("mouseout", () => {
      initInterval()
    })
  </script>
</body>

</html>

7 JS+CSS实现卡片式轮播图

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }



    .bannerBox {
      position: relative;
      width: 900px;
      height: 300px;
      box-shadow: 0 0 10px gray;
      margin: 10% auto 0 auto;
      border-radius: 5px;
      overflow: hidden;
      background-color: rgb(0, 0, 0, .8);


    }

    #banner {
      list-style: none;
      position: absolute;
      padding: 0;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      width: 800px;
      height: 200px;
    }


    #banner:hover {
      cursor: pointer;
    }


    #banner li {
      float: left;
      position: absolute;
      left: 0px;
      transition-duration: 1s;
    }

    #btn {
      opacity: 0;
      transition: all .5s;
    }

    #btn li {
      position: absolute;
      top: 50%;
      width: 18px;
      height: 18px;
      border-top: 3px solid rgba(255, 255, 255, .6);
      border-right: 3px solid rgba(255, 255, 255, .6);
      z-index: 100;
      cursor: pointer;

    }

    .bannerBox:hover #btn {
      opacity: 1;
    }

    #btn li:Hover {
      border-color: white;
    }

    .prev {
      left: 15px;
      transform: rotate(-135deg);
    }

    .next {
      right: 15px;
      transform: rotate(45deg);
    }
  </style>
</head>

<body>
  <div class="bannerBox">
    <ul id="banner"></ul>
    <ul id="btn">
      <li class="prev"></li>
      <li class="next"></li>
    </ul>
  </div>
  <script>
    let timer = setInterval(get_next, 3000)
    let liArr = new Array();
    var cur_ul = document.querySelector("#banner");
    let bannerBox = document.querySelector('.bannerBox')
    let imgArr = [
      "https://img2.baidu.com/it/u=2988589017,2923917558&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800",
      "https://img2.baidu.com/it/u=3867960631,2923014190&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
      "https://img0.baidu.com/it/u=891036130,2043934807&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
      "https://img1.baidu.com/it/u=1304255642,2961408783&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
      "https://img0.baidu.com/it/u=3822016102,3026244821&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281",
      "https://img1.baidu.com/it/u=847956157,2750448390&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
    ]
    let imgLen = imgArr.length - 1;
    for (let i = 1; i <= imgLen; i++) {
      var cur_li = document.createElement("li");
      var cur_img = document.createElement("img");

      cur_img.src = imgArr[i];
      cur_img.style.width = "400px";
      cur_img.style.height = "200px";
      cur_li.appendChild(cur_img);

      if (i != imgLen) {
        cur_li.id = imgLen - i;
      } else {
        cur_li.id = imgLen;
      }
      cur_ul.appendChild(cur_li)
      liArr.push(cur_li);
      liArr[liArr.length - 1].style.left = "0px";
    }
    let len = liArr.length - 1;
    liArr[len - 2].style.left = "0px";
    liArr[len - 1].style.zIndex = 50;
    liArr[len - 1].style.left = "200px";
    liArr[len - 1].style.transform = "scale(1.3)";
    liArr[len].style.left = "400px";

    function get_pre() {
      let give_up = liArr[0];
      liArr.shift()
      liArr.push(give_up)
      for (let i = 0; i <= len; i++) {
        liArr[i].style.zIndex = i;
        liArr[i].style.transform = "scale(1)"

      }
      liArr[len - 2].style.left = "0px";
      liArr[len - 1].style.zIndex = 50
      liArr[len - 1].style.left = "200px";
      liArr[len - 1].style.transform = "scale(1.3)"
      liArr[len].style.left = "400px";
    }

    function get_next() {
      let give_up = liArr[len];
      liArr.pop()
      liArr.unshift(give_up)
      for (let i = 0; i <= len; i++) {
        liArr[i].style.zIndex = i;
        liArr[i].style.transform = "scale(1)"

      }
      liArr[len - 2].style.left = "0px";
      liArr[len - 1].style.zIndex = 50
      liArr[len - 1].style.left = "200px";
      liArr[len - 1].style.transform = "scale(1.3)"
      liArr[len].style.left = "400px";
    }


    let prev = document.querySelector(".prev")
    prev.onclick = function () {
      get_pre();
    }
    let next = document.querySelector(".next")
    next.onclick = function () {
      get_next();
    }
    bannerBox.addEventListener("mouseover", () => {
      clearInterval(timer);
    })
    bannerBox.addEventListener("mouseout", () => {
      timer = setInterval(get_next, 3000)
    })
  </script>
</body>

</html>

参考资料：
1 https://blog.csdn.net/weixin_51033461/article/details/130113054
2 https://blog.csdn.net/weixin_57677300/article/details/128665740
3 https://element.eleme.cn/#/zh-CN/component/carousel

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

轮播图

推荐阅读更多精彩内容