當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
前端JavaScripts基础知识点轮播图
生活随笔
收集整理的這篇文章主要介紹了
前端JavaScripts基础知识点轮播图
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1、index.html
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>$美少女戰士$</title><link rel="stylesheet" href="index.css"> </head> <body> <!--相框--> <div class="Photo-frame"><!--照片條--><ul class="picBox clearFix" style="left: 0"><li><a href="#"><img src="zhutu1.jpg" alt=""></a></li><li><a href="#"><img src="zhutu3.jpg" alt=""></a></li><li><a href="#"><img src="zhutu4.jpg" alt=""></a></li><li><a href="#"><img src="zhutu5.jpg" alt=""></a></li><li><a href="#"><img src="zhutu6.jpg" alt=""></a></li></ul><!--指示 小圓圈--><div class="circles"><span in="0" style=" box-shadow: 0 0 10px 5px rgba(255,255,255,.7) inset"></span><span in="1"></span><span in="2"></span><span in="3"></span><span in="4"></span></div><!--箭頭 next 右箭頭--><div class="arrow" id="next"> > </div><!--左箭頭--><div class="arrow" id="prev"> < </div> </div> <!--不能互換順序--> <script src="獲取元素.js"></script> <script src="index.js"></script> </body> </html>2、index.css
@charset "UTF-8"; * {padding: 0;margin: 0; } img {display: block; /*轉換塊級元素*/ } ul li {list-style: none; } /*清浮動的衣服*/ .clearFix::after,.clearFix::before {content: '';display: block;line-height: 0;clear: both;} .Photo-frame {position: relative;width: 590px;height: 470px;border: 1px solid #ccc;margin: 100px auto;/*溢出隱藏*/overflow: hidden; } /*照片條*/ .picBox {/*定位*/position: absolute;width: 2950px;height: 470px;top:0;} .picBox > li {float: left;} .arrow {position: absolute;top:50%;margin-top: -20px;width: 24px;height: 40px;background-color: rgba(45,45,45,.3);color: #fff;line-height: 40px;text-align: center;font-size: 25px;cursor: pointer;/*鼠標小手樣式*/} #next {right: 0; } #prev {left: 0; } .arrow:hover {background-color: rgba(45,45,45,.7); } /*小圓點*/ .circles {position: absolute;bottom:20px;left: 50%;margin-left:-76px ;height: auto;} .circles span {display: inline-block;box-sizing: border-box;width: 14px;height: 14px;border: 3px solid rgba(255,255,255,.3);border-radius: 50%;margin-left: 10px;cursor: pointer;background-color: darkblue;} /* .circles span:hover {box-shadow: 0 0 10px 5px rgba(255,255,255,.7) inset; }*/3、index.js
window.onload = function () {// ☆☆☆☆☆ 如果你是先加后判斷 判斷條件應該是下標+1//1:手動播放/** (1)當用戶點擊右箭頭 下一張 照片盒子向左移動 left-=590px* (2)當用戶點擊左箭頭 上一張 照片盒子向右移動* left+=590px** *///相框var Photo_frame = my$('.Photo-frame')//照片盒子var picBox = my$('.picBox')//箭頭var next = my$('#next') //右var prev = my$('#prev') //左var circles = my$('.circles')var circlesSpans = my$All('.circles span') //bug my$() ===>my$All()console.log(circlesSpans)var index = 0 ;// 標記當前有光圈的小圓點的下標/***********照片盒子運動函數 picBoxAnimation()* 參數：偏移量 +590 向右 上一張* -590 向左 下一張* 返回值 無* ************/function picBoxAnimation(offset){var leftValue = parseInt(picBox.style.left); //數值類型var newLeft = leftValue + offset //照片盒子要運動的距離if(newLeft < -2360 ){ //向左走的趨勢 當前已經展示的是第5張newLeft = 0;}if(newLeft > 0 ){newLeft = -2360}picBox.style.left = newLeft + 'px';console.log(picBox.style.left) //只能獲取行內樣式}//右箭頭next.onclick = function () {picBoxAnimation(-590)//右箭頭朝右移動 加+index++; //4if(index === 5){index = 0;}buttonShow();}prev.onclick = function () {picBoxAnimation(+590)index--;if(index === -1){index = 4;}buttonShow();}//2:自動播放 定時器function play() {timer = setInterval(function () {next.onclick();},1000)}play();//s鼠標移入不動 清定時器Photo_frame.onmouseover = function () {clearInterval(timer) //清除定時器 停止自動輪播clearInterval(timer)}//鼠標移開 重新自動輪播 play()Photo_frame. function () {play()}/*********小圓點* 1：隨著圖片移動* 2：鼠標切換相應（自定義屬性 ）圖片* **********///小圓點移動函數 buttonShow() 參數 無 返回值 無function buttonShow() {for(var i =0;i<circlesSpans.length ;i++){circlesSpans[i].style.boxShadow = '';//清除樣式}circlesSpans[index].style.boxShadow = "0 0 10px 5px rgba(255,255,255,.7) inset"}//鼠標移入哪個小圓圈 哪張圖就顯示//圖片盒子運動偏移量 = (舊下標 index -新下標 )*590for(var i =0;i<circlesSpans.length ;i++){//給小圓圈綁定鼠標移入事件circlesSpans[i]. function () {//獲取當前鼠標移入的那個小圓圈的下標 ===》 新下標var newIndex = this.getAttribute('in')console.log(newIndex)//根據產生的新下標和舊下標的差的到了照片移動的偏移量var currentOffset = (index-newIndex)*590//調用運動函數 ===》圖片已經切換picBoxAnimation(currentOffset)//新舊更替 舊下標保存新下標index = newIndex ;//調用小圓圈展示的函數 為什么在這調用？ 能不能拿到前面? 為什么？buttonShow()}} }4、獲取元素.js
window.onload = function () {// ☆☆☆☆☆ 如果你是先加后判斷 判斷條件應該是下標+1//1:手動播放/** (1)當用戶點擊右箭頭 下一張 照片盒子向左移動 left-=590px* (2)當用戶點擊左箭頭 上一張 照片盒子向右移動* left+=590px** *///相框var Photo_frame = my$('.Photo-frame')//照片盒子var picBox = my$('.picBox')//箭頭var next = my$('#next') //右var prev = my$('#prev') //左var circles = my$('.circles')var circlesSpans = my$All('.circles span') //bug my$() ===>my$All()console.log(circlesSpans)var index = 0 ;// 標記當前有光圈的小圓點的下標/***********照片盒子運動函數 picBoxAnimation()* 參數：偏移量 +590 向右 上一張* -590 向左 下一張* 返回值 無* ************/function picBoxAnimation(offset){var leftValue = parseInt(picBox.style.left); //數值類型var newLeft = leftValue + offset //照片盒子要運動的距離if(newLeft < -2360 ){ //向左走的趨勢 當前已經展示的是第5張newLeft = 0;}if(newLeft > 0 ){newLeft = -2360}picBox.style.left = newLeft + 'px';console.log(picBox.style.left) //只能獲取行內樣式}//右箭頭next.onclick = function () {picBoxAnimation(-590)//右箭頭朝右移動 加+index++; //4if(index === 5){index = 0;}buttonShow();}prev.onclick = function () {picBoxAnimation(+590)index--;if(index === -1){index = 4;}buttonShow();}//2:自動播放 定時器function play() {timer = setInterval(function () {next.onclick();},1000)}play();//s鼠標移入不動 清定時器Photo_frame.onmouseover = function () {clearInterval(timer) //清除定時器 停止自動輪播clearInterval(timer)}//鼠標移開 重新自動輪播 play()Photo_frame. function () {play()}/*********小圓點* 1：隨著圖片移動* 2：鼠標切換相應（自定義屬性 ）圖片* **********///小圓點移動函數 buttonShow() 參數 無 返回值 無function buttonShow() {for(var i =0;i<circlesSpans.length ;i++){circlesSpans[i].style.boxShadow = '';//清除樣式}circlesSpans[index].style.boxShadow = "0 0 10px 5px rgba(255,255,255,.7) inset"}//鼠標移入哪個小圓圈 哪張圖就顯示//圖片盒子運動偏移量 = (舊下標 index -新下標 )*590for(var i =0;i<circlesSpans.length ;i++){//給小圓圈綁定鼠標移入事件circlesSpans[i]. function () {//獲取當前鼠標移入的那個小圓圈的下標 ===》 新下標var newIndex = this.getAttribute('in')console.log(newIndex)//根據產生的新下標和舊下標的差的到了照片移動的偏移量var currentOffset = (index-newIndex)*590//調用運動函數 ===》圖片已經切換picBoxAnimation(currentOffset)//新舊更替 舊下標保存新下標index = newIndex ;//調用小圓圈展示的函數 為什么在這調用？ 能不能拿到前面? 為什么？buttonShow()}} }5、zhutu1.png
6、zhutu3.png
7、zhutu4.png
8、zhutu5.png
9、zhutu6.png
特別注意：這九個文件要放在同一文件夾下，其命名要和標注的一模一樣。
總結
以上是生活随笔為你收集整理的前端JavaScripts基础知识点轮播图的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 前端JavaScripts基础知识点
- 下一篇： MySql数据库SQL语言基础知识点—N