使用Css,JavaScript实现轮播效果图

   css详细代码：

<style>

        .container {

          width: 980px;

          margin: 0 auto;

          overflow: hidden;

          position: relative;

        }

        .content {

          width: calc(980px*8);

          height: 330px;

          margin-left: 0px;

          transition: margin-left 1s;

        }

    

        .container:hover>.tab {

          opacity: 1;

          transition: opacity 1s;

        }

    

        .content>img {

          float: left;

          width: 980px;

          height: 330px;

        }

    

        .tab {

          position: absolute;

          top: calc(330px/2 - 20px);

          width: 100%;

          opacity: 0;

        }

    

        .tab>span {

          display: block;

          width: 40px;

          height: 40px;

          text-align: center;

          line-height: 40px;

          background-color: rgba(203, 203, 203, 0.47);

          font-size: 30px;

          color: #fff;

          cursor: pointer;

        }

    

        .tab>span:first-child {

          float: left;

        }

    

        .tab>span:last-child {

          float: right;

        }

      </style>

 

html详细代码：

<div class="container">

        <div class="content">

          <img src="1.jpg" />

          <img src="2.jpg" />

          <img src="3.jpg" />

          <img src="4.jpg" />

          <img src="5.jpg" />

          <img src="6.jpg" />

          <img src="7.jpg" />

          <img src="8.jpg" />

        </div>

        <div class="tab">

          <span οnclick="slideImg(0)">&lt;</span>

          <span οnclick="slideImg(1)">&gt;</span>

        </div>

      </div>

 

JS详细代码：

 <script>

    

        /**

         * @method slideImg

         * @param d :direction left 0, right 1.

         */

        function slideImg(d) {

          var oDiv = document.getElementsByClassName("content")[0];

          var mLeft = oDiv.style.marginLeft;

          if (mLeft == "") {

            mLeft = "0px"

          }

          mLeft = parseInt(mLeft);

          // 向左滑动

          if (d === 0) {

            mLeft -= 980;

            if (mLeft < -6860) {

              mLeft = 0;

            }

            oDiv.style.marginLeft = mLeft + "px";

    

          } else {

            // 向右滑动

            mLeft += 980;

            if (mLeft > 0) {

              mLeft = -6860;

            }

            oDiv.style.marginLeft = mLeft + "px";

          }

          //    console.log(mLeft)

        }

      </script>