JavaScript 實(shí)現(xiàn)輪播圖特效的示例
效果展示
1.頁面截圖
2.相關(guān)效果
html 頁面
從微信讀書上找了幾張書籍封面來做輪播的圖片。
index.html
<body> <div id='container'> <div class='big_pic_div'> <div class='prev'></div> <div class='next'></div> <a href='javascript:;' rel='external nofollow' rel='external nofollow' class='mark_left'></a> <a href='javascript:;' rel='external nofollow' rel='external nofollow' class='mark_right'></a> <div style='z-index: 1;'><img src='http://www.aoyou183.cn/bcjs/img/1.jpg' alt=''></div> <div class='big_pic'><img src='http://www.aoyou183.cn/bcjs/img/2.jpg' alt=''></div> <div class='big_pic'><img src='http://www.aoyou183.cn/bcjs/img/3.jpg' alt=''></div> <div class='big_pic'><img src='http://www.aoyou183.cn/bcjs/img/4.jpg' alt=''></div> <div class='big_pic'><img src='http://www.aoyou183.cn/bcjs/img/5.jpg' alt=''></div> <div class='big_pic'><img src='http://www.aoyou183.cn/bcjs/img/6.jpg' alt=''></div> </div> <div class='small_pic_div'> <div style='filter: opacity(100); opacity: 1;'><img src='http://www.aoyou183.cn/bcjs/img/1.jpg' alt=''></div> <div class='small_pic'><img src='http://www.aoyou183.cn/bcjs/img/2.jpg' alt=''></div> <div class='small_pic'><img src='http://www.aoyou183.cn/bcjs/img/3.jpg' alt=''></div> <div class='small_pic'><img src='http://www.aoyou183.cn/bcjs/img/4.jpg' alt=''></div> <div class='small_pic'><img src='http://www.aoyou183.cn/bcjs/img/5.jpg' alt=''></div> <div class='small_pic'><img src='http://www.aoyou183.cn/bcjs/img/6.jpg' alt=''></div> </div> </div></body>
css 樣式
grid 布局的 gap 不兼容 IE，惹不起。
style.css
body { margin: 0; padding: 0; background: skyblue;}#container { position: relative; overflow: hidden; width: 350px; height: 390px; margin: 50px auto 0; padding: 0 15px; background: goldenrod; box-shadow: 2px 1px 5px 1px #666;}.mark_left { position: absolute; left: 0; z-index: 3000; width: 65px; height: 360px;}.mark_right { position: absolute; right: 0; z-index: 3000; width: 65px; height: 360px;}.prev { position: absolute; top: 150px; left: 5px; z-index: 3001; width: 60px; height: 60px; background: url(img/btn.gif) olivedrab; /* transform: translateY(50%); */ /* alpha 兼容IE8及以下的IE瀏覽器 */ filter: alpha(opacity=0); opacity: 0;}.next { position: absolute; top: 120px; right: 5px; z-index: 3001; width: 60px; height: 60px; background: url(img/btn.gif) olivedrab; background-position-y: 60px; transform: translateY(50%); filter: alpha(opacity=0); opacity: 0;}.big_pic_div { position: relative; width: 250px; height: 360px; padding: 15px 0;}.big_pic { position: absolute; /* height 從 0 到 360px 下滑 */ overflow: hidden; height: 360px; box-shadow: 1px 1px 2px #777;}.small_pic_div { display: grid; grid-template: repeat(6, 110px) / 80px; gap: 15px; position: absolute; top: 0; left: 273px; padding: 15px 0;}.small_pic { height: 110px; filter: alpha(opacity = 60); opacity: 0.6;}.small_pic img { width: 80px; height: 100%;}
JavaScript 實(shí)現(xiàn)
多物體運(yùn)動(dòng)框架move.js
// 獲取樣式function getStyle(obj, name) { if (obj.currentStyle) { // IE... return obj.currentStyle[name]; } else { // Chrome... return getComputedStyle(obj, false)[name]; }}function startMove(obj, attr, target) { clearInterval(obj.timer); obj.timer = setInterval(function () { var cur = 0; // 透明度 if (attr == ’opacity’) { cur = Math.round(parseFloat(getStyle(obj, ’opacity’)) * 100); } else { cur = parseInt(getStyle(obj, attr)); } // 緩沖運(yùn)動(dòng)，速度和距離成正比 var speed = 0; speed = (target - cur) / 6; // 1px 是最小的，1.9px 會(huì)被當(dāng)做 1px;得把速度取整，不然并未真正到達(dá)目標(biāo)值 target speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if (cur == target) { clearInterval(obj.timer); } else { // 透明度沒有單位，單獨(dú)考慮 if (attr == ’opacity’) { obj.style.filter = ’alpha(opacity = ’ + (cur + speed) + ’)’; obj.style.opacity = (cur + speed) / 100; } else { obj.style[attr] = cur + speed + ’px’; } } }, 30);}
輪播圖功能實(shí)現(xiàn)
window.onload = function () { var markLeft = document.getElementsByClassName(’mark_left’)[0]; var markRight = document.getElementsByClassName(’mark_right’)[0]; var btnPrev = document.getElementsByClassName(’prev’)[0]; var btnNext = document.getElementsByClassName(’next’)[0]; var smallPicDiv = document.getElementsByClassName(’small_pic_div’)[0]; var smallPic = document.getElementsByClassName(’small_pic’); var bigPic = document.getElementsByClassName(’big_pic’); var nowZIndex = 2; var now = 0; var container = document.getElementById(’container’); // 左右按鈕透明度設(shè)置 btnPrev.onmouseover = markLeft.onmouseover = function () { startMove(btnPrev, ’opacity’, 100); }; btnPrev.onmouseout = markLeft.onmouseout = function () { startMove(btnPrev, ’opacity’, 0); }; btnNext.onmouseover = markRight.onmouseover = function () { startMove(btnNext, ’opacity’, 100); }; btnNext.onmouseout = markRight.onmouseout = function () { startMove(btnNext, ’opacity’, 0); }; // 點(diǎn)擊小圖時(shí)，大圖自動(dòng)切換 for (var i = 0; i < smallPic.length; i++) { smallPic[i].index = i; smallPic[i].onclick = function () { if (now == this.index) return; // 使用 now 來表示當(dāng)前選擇的小圖，當(dāng)前選中的小圖再次點(diǎn)擊時(shí)不會(huì)讓大圖下滑 now = this.index; bigPic[this.index].style.zIndex = nowZIndex++; bigPic[this.index].style.height = 0; startMove(bigPic[this.index], ’height’, 360); // 點(diǎn)擊后其他小圖變透明，當(dāng)前選中的為不透明 for (var i = 0; i < smallPic.length; i++) { startMove(smallPic[i], ’opacity’, 60); } startMove(smallPic[this.index], ’opacity’, 100); }; // 鼠標(biāo)移動(dòng)到小圖上時(shí)，淡入淡出 smallPic[i].onmouseover = function () { startMove(this, ’opacity’, 100); }; smallPic[i].onmouseout = function () { if (now != this.index) { startMove(this, ’opacity’, 60); } }; } // tab 函數(shù)：當(dāng)前選中圖片不透明；圖片下滑；小圖區(qū)域的滾動(dòng) function tab() { bigPic[now].style.zIndex = nowZIndex++; for (var i = 0; i < smallPic.length; i++) { startMove(smallPic[i], ’opacity’, 60); } startMove(smallPic[now], ’opacity’, 100); bigPic[now].style.height = 0; startMove(bigPic[now], ’height’, 360); if (now == 0) { startMove(smallPicDiv, ’top’, 0); } else if (now == smallPic.length - 1) { startMove(smallPicDiv, ’top’, -(now - 2) * (smallPic[0].offsetHeight + 15)); } else { startMove(smallPicDiv, ’top’, -(now - 1) * (smallPic[0].offsetHeight + 15)); } } // 左右按鈕點(diǎn)擊 btnPrev.onclick = function () { now--; if (now == smallPic.length) { now = smallPic.length - 1; } else if (now < 0) { now = smallPic.length - 1; // return; } tab(); }; btnNext.onclick = function () { now++; if (now == smallPic.length) { now = 0; } tab(); }; var timer = setInterval(btnNext.onclick, 3000); container.onmouseover = function () { clearInterval(timer); }; container.onmouseout = function () { timer = setInterval(btnNext.onclick, 3000); };};
以上就是JavaScript 實(shí)現(xiàn)輪播圖特效的詳細(xì)內(nèi)容，更多關(guān)于JavaScript 輪播圖的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章！
相關(guān)文章：
1. CSS Hack大全-教你如何區(qū)分出IE6-IE10、FireFox、Chrome、Opera2. jsp+mysql實(shí)現(xiàn)網(wǎng)頁的分頁查詢3. React優(yōu)雅的封裝SvgIcon組件示例4. ASP基礎(chǔ)知識Command對象講解5. ASP中格式化時(shí)間短日期補(bǔ)0變兩位長日期的方法6. jsp文件下載功能實(shí)現(xiàn)代碼7. ASP動(dòng)態(tài)網(wǎng)頁制作技術(shù)經(jīng)驗(yàn)分享8. XML入門精解之結(jié)構(gòu)與語法9. ASP腳本組件實(shí)現(xiàn)服務(wù)器重啟10. jsp+servlet實(shí)現(xiàn)猜數(shù)字游戲
網(wǎng)公網(wǎng)安備