轮播

zhaipanyu · May 28, 2017 · f7e0dc4 · f7e0dc4
1 parent d10486d
commit f7e0dc4
Show file tree

Hide file tree

Showing 6 changed files with 10,448 additions and 0 deletions.
diff --git a/jQuery/jq_轮播/img/1.jpg b/jQuery/jq_轮播/img/1.jpg
diff --git a/jQuery/jq_轮播/img/2.jpg b/jQuery/jq_轮播/img/2.jpg
diff --git a/jQuery/jq_轮播/img/3.jpg b/jQuery/jq_轮播/img/3.jpg
diff --git a/jQuery/jq_轮播/img/4.jpg b/jQuery/jq_轮播/img/4.jpg
diff --git a/jQuery/jq_轮播/index.html b/jQuery/jq_轮播/index.html
@@ -0,0 +1,195 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>JS Bin</title>
+    <style>
+        ul,
+        li {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+        }
+
+        body {
+            box-sizing: border-box;
+            margin: 0 auto;
+            /*width:800px;*/
+            position: relative;
+        }
+
+        a {
+            text-decoration: none;
+        }
+
+        .ct {
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 900px;
+            /*height: 600px;*/
+            overflow: hidden;
+        }
+
+        .img-ct {
+            position: relative;
+            width: 3600px;
+            /*height: 600px;*/
+        }
+
+        .img-ct li {
+            float: left;
+        }
+
+        .clearfix:after {
+            content: '';
+            display: block;
+            clear: both;
+        }
+
+        img {
+            width: 900px;
+            height: 600px;
+        }
+
+        .btn {
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            border-radius: 50%;
+            width: 30px;
+            height: 30px;
+            display: block;
+            background: #ccc;
+            line-height: 30px;
+            text-align: center;
+        }
+
+        .pre-btn {
+            left: 5px;
+            /*左*/
+        }
+
+        .next-btn {
+            right: 5px;
+        }
+
+        .bullet {
+            height: 20px;
+            width: 150px;
+            text-align: center;
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            bottom: 5%;
+        }
+
+        .bullet li {
+            float: left;
+            margin-left: 5px;
+            width: 30px;
+            height: 10px;
+            border: 1px solid #fff;
+            border-radius: 4px;
+        }
+
+        .active {
+            background: #ccc;
+        }
+    </style>
+
+</head>
+
+<body>
+    <div class='ct clearfix'>
+        <ul class='img-ct clearfix'>
+            <li data-index='0'><a href="#"><img src="img/1.jpg" alt=""></a></li>
+            <li data-index='1'><a href="#"><img src="img/2.jpg" alt=""></a></li>
+            <li data-index='2'><a href="#"><img src="img/3.jpg" alt=""></a></li>
+            <li data-index='3'><a href="#"><img src="img/4.jpg" alt=""></a></li>
+        </ul>
+
+        <a class='pre-btn btn' href="#">&lt</a>
+        <a class='next-btn btn' href="#">&gt</a>
+
+        <ul class='bullet clearfix'>
+            <li class='active'><a href="#"></a></li>
+            <li><a href="#"></a></li>
+            <li><a href="#"></a></li>
+            <li><a href="#"></a></li>
+        </ul>
+    </div>
+    <script src="jquery.js"></script>
+    <script>
+        var $imgCt = $(".img-ct");
+        var $btnPre = $(".pre-btn");
+        var $btnNext = $(".next-btn");
+        var $bullet = $(".bullet");
+        var $curIndex = 0;//-1,0123,4
+        var $imgLock = true;
+        var $last = $imgCt.children("li").last().clone();
+        var $first = $imgCt.children("li").first().clone();
+        var $imgWidth = $imgCt.children("li").first().width();
+        var $imgLen = $imgCt.children("li").length;//4
+
+        $imgCt.prepend($last);
+        $imgCt.append($first);
+       $imgCt.css({
+            width: $imgWidth * ($imgLen + 2),//加了2张,序号是:412341
+            left: -$imgWidth//左移一个宽度,显示原先的第一张
+        })
+        $btnPre.on("click", function () {
+            if ($imgLock === false) return;
+            $imgLock = false;
+            pre(1);
+        })
+        $btnNext.on("click", function () {
+            if ($imgLock === false) return;
+            $imgLock = false;
+            next(1);
+        })
+        $bullet.on("click", "li", function () {
+            var $bulletIndex = $(this).index()
+
+            if ($imgLock === false) return;
+            next($bulletIndex - $curIndex)//
+            // console.log('bullet_index'+$bulletIndex);
+            // console.log('curIndex'+$curIndex);
+            $imgLock = false;
+
+        })
+        function next(idx) {
+            $imgCt.animate({
+                left: "-=" + idx * $imgWidth//左移动一格,
+            }, function () {
+                $curIndex += idx;
+                if ($curIndex >= $imgLen) {//在第四张图片显示时点击下一张
+                    $imgCt.css({ left: -$imgWidth });
+                    $curIndex = 0;
+                }
+                $imgLock = true;
+                setBullet()
+            })
+        }
+        function pre(idx) {
+            $imgCt.animate({
+                left: "+=" + idx * $imgWidth//图片右移,left增加
+            }, function () {
+                $curIndex -= idx;
+                if ($curIndex < 0) {//在第一张时点击上一张
+                    $imgCt.css({ left: -$imgWidth * $imgLen });//迅速左移图片
+                    $curIndex = $imgLen - 1;
+                }
+                $imgLock = true;
+                setBullet()
+            })
+        }
+        function setBullet() {
+            $bullet.children("li").removeClass("active");
+            $bullet.children("li").eq($curIndex).addClass("active")
+        }
+    </script>
+</body>
+
+</html>