upp

index.css

@@ -41,6 +41,16 @@ body {
 .loding .loding2 {
   color: #fff;
 }
+.gunDongDom {
+  position: absolute;
+  z-index: 10;
+  right: 2px;
+  top: 0;
+  height: 50px;
+  width: 4px;
+  background-color: #ddc136;
+  border-radius: 2px;
+}
 #container {
   width: 100%;
   height: 100%;

index.html

@@ -17,6 +17,10 @@
  
   </div>
 
+  <!-- 右侧滚动条 -->
+  <div class="gunDongDom">
+  </div>
+
 </body>
 
 <script>

index.less

@@ -47,6 +47,18 @@ body {
 
 }
 
+// 滚动条
+.gunDongDom{
+  position: absolute;
+  z-index: 10;
+  right: 2px;
+  top: 0;
+  height: 50px;
+  width: 4px;
+  background-color: #ddc136;
+  border-radius: 2px;
+}
+
 #container{
   width: 100%;
   height: 100%;

js/main.js

@@ -297,9 +297,9 @@ $(window).resize(function () {
                 // console.log('----',myJinDu);
 
                 // 总数 
-               const baiFenBi= (myJinDu /imgCounts)*100+'%'
+                const baiFenBi = (myJinDu / imgCounts) * 100 + '%'
 
-               document.querySelector('.lodingJindu').style.width=baiFenBi
+                document.querySelector('.lodingJindu').style.width = baiFenBi
 
                 return resolve(img);
               }
@@ -318,13 +318,13 @@ $(window).resize(function () {
             // 邵根
             console.log('加载完成！！！！');
 
-            const titDom =document.createElement('img')
-            titDom.setAttribute('id','hand')
-            titDom.setAttribute('class','hand')
+            const titDom = document.createElement('img')
+            titDom.setAttribute('id', 'hand')
+            titDom.setAttribute('class', 'hand')
 
             // oss路径问题
 
-            titDom.setAttribute('src','/project/videoDemo/img/hand.png')
+            titDom.setAttribute('src', `${envUrl}img/hand.png`)
 
             document.querySelector('body').appendChild(titDom)
 
@@ -672,7 +672,7 @@ $(window).resize(function () {
                 _this.centerY = _this.recordY + event.touches[0].clientY - _this.mouse.y;
               }
 
-              console.log(_this.centerX);
+              // console.log(_this.centerX);
 
               _this.mouse._x = event.changedTouches[0].clientX;
               _this.mouse._y = event.changedTouches[0].clientY;
@@ -798,8 +798,8 @@ $(window).resize(function () {
         key: 'render',
         value: function render() {
 
-          // 当前滑动的图片是第几张
-          // console.log('-------', this.currentFrame, this.count);
+          // 邵根 -- 当前滑动的图片是第几张
+          // console.log('----当前滑动的图片---', this.currentFrame, this.count);
 
           var _this6 = this;
 
@@ -859,12 +859,45 @@ $(window).resize(function () {
             return;
 
           if (dir.left && this.mouseState.down && this.detai < 2) {
-            this.currentFrame--;
+
+            // console.log('左滑倒退', this.currentFrame);
+
+            if (this.currentFrame <= 0) this.currentFrame = 0
+            else this.currentFrame--;
+
           }
           if (dir.right && this.mouseState.down && this.detai < 2) {
-            this.currentFrame++;
+
+            // console.log('右滑前进', this.currentFrame);
+
+            if (this.currentFrame >= imgCounts - 1) this.currentFrame = imgCounts - 1
+            else this.currentFrame++;
+
           }
           // this.currentFrame >= this.count ? this.currentFrame = 0 : (this.currentFrame < 0 ? this.currentFrame = imgCounts : this.currentFrame);
+
+
+          // 邵根 -滚动条
+          
+          // 滚动条本身的高度占多少百分比
+          let oldBai = (50 / window.innerHeight) * 100
+          
+          oldBai = Math.round(oldBai)
+          
+          const nowImgNum = this.currentFrame + 1
+
+          console.log('-当前滚动到的图片：',nowImgNum);
+
+          let nowGunBai = (nowImgNum / imgCounts) * 100
+
+          // 最大滚动百分比
+          const maxBai =nowGunBai - oldBai
+
+          if(nowGunBai>maxBai) nowGunBai=maxBai
+          if(nowGunBai<=0) nowGunBai=0
+
+          document.querySelector('.gunDongDom').style.top = nowGunBai + '%'
+
         },
 
         //轮滑缩放

js/my.js

@@ -33,22 +33,21 @@ const m_info = m_obj[param];
 if (!m_info) alert("参数错误!");
 
 
-let imgURL =''
 
- // oss路径问题
 
-if(window.location.href.includes('http://127.0.0.1:')) {
-  // 本地环境
-  imgURL = `/image/${param}`
-}else {
-  // oss环境
-  imgURL = `/project/videoDemo/image/${param}`;
-}
+// 静态文件路径
 
+let envUrl = window.location.href.split('?m=')[0]
+
+envUrl = envUrl.replace('index.html', '')
+
+const imgURL = `${envUrl}image/${param}`
+
+console.log('-----静态文件路径', envUrl);
 
 
 // 图片数量
 let imgCounts = m_info.counts;
 
-// 图片后最
+// 图片后缀
 let imgLastStr = m_info.houzui;