基于javascript實現(xiàn)圖片滑動效果
更新時間：2016年05月07日 19:47:26 作者：笨笨豬1995
這篇文章主要為大家詳細(xì)介紹了基于javascript實現(xiàn)圖片滑動效果的相關(guān)資料，具有一定的參考價值，感興趣的朋友可以參考一下
今天看了別人寫的圖片滑動，看起來很酷，讀源碼時，似乎有些困難，就模仿著寫了一個，實現(xiàn)的效果與原網(wǎng)頁相同，不過自己的js代碼，邏輯簡單，有待改進。
ps：前兩天寫了旋轉(zhuǎn)木馬，那個兼容性不好，今天寫這個網(wǎng)頁的時候，也是按照這個思路，在谷歌瀏覽器上運行很好，火狐很多功能不能實現(xiàn)，由于wrap——panel使用了絕對定位，就將translate平移改為了left。改動后，各個瀏覽器運行的效果不錯。
具體代碼如下
html代碼（沒寫注釋）
<div class="container">
<h1>Parallax Slider</h1>
<div class="wrap">
<div class="bg-img">
<div id="bg_1" class="bg bg-1" style="left: 0px;"></div>
<div id="bg_2" class="bg bg-2" style="left: 0px;"></div>
<div id="bg_3" class="bg bg-3" style="left: 0px;"></div>
</div>
<div id="wrap_panel" class="wrap-panel" style="left: 0px;">
<div class="panel panel-1">
<img id="img_1" src="images/1.jpg">
</div>
<div class="panel panel-2">
<img src="images/2.jpg">
</div>
<div class="panel panel-3">
<img src="images/3.jpg">
</div>
<div class="panel panel-4">
<img src="images/4.jpg">
</div>
<div class="panel panel-5">
<img src="images/5.jpg">
</div>
<div class="panel panel-6">
<img src="images/6.jpg">
</div>
</div>
<div class="navigation-button">
<span id="perv_btn" class="perv-button"></span>
<span id="next_btn" class="next-button"></span>
</div>
<div id="show_small" class="show-small">
<ul>
<li><img src="images/thumbs/1.jpg"></li>
<li><img src="images/thumbs/2.jpg"></li>
<li><img src="images/thumbs/3.jpg"></li>
<li><img src="images/thumbs/4.jpg"></li>
<li><img src="images/thumbs/5.jpg"></li>
<li><img src="images/thumbs/6.jpg"></li>
</ul>
</div>
</div>
</div>
css代碼（自己對應(yīng)著看）：
* { margin: 0; padding: 0; }
html, body, .container { width: 100%; height: 100%; font-family: 'Microsoft Yahei'; }
.container { background-color: #222; overflow-x: hidden; }
.container h1 { font-size: 50px; color: #ccc; text-align: center; font-weight: bolder; height: 120px; line-height: 120px; }
.wrap { position: relative; width: 600%; height: 400px; border-top: 10px solid #333; border-bottom: 10px solid #333; margin-top: 20px; }
.bg { position: absolute; width: 100%; height: 100%; left: 0; top: 0; -webkit-transition: all 1s;-moz-transition: all 1s;-ms-transition: all 1s;-o-transition: all 1s;transition: all 1s; }
.bg-1 { background: url(images/bg1.png); }
.bg-2 { background: url(images/bg2.png); }
.bg-3 { background: url(images/bg3.png); }
.wrap-panel { position: absolute; width: 100%; height: 100%; -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; transition: all 1s; }
.panel { width: 16.66%; height: 100%; float: left; }
.panel img { display: block; margin: 0 auto; margin-top: 35px; border-radius: 10px; border: 10px solid rgba(143, 143, 143, 0.6); }
.navigation-button span:hover { opacity: 0.8 }
.perv-button, .next-button { position: absolute; width: 30px; height: 60px; background-color: #344133; border-radius: 10px; cursor: pointer; opacity: 0.4; }
.perv-button { background: #000 url(images/prev.png) center center no-repeat; }
.next-button { background: #000 url(images/next.png) center center no-repeat; }
.show-small { position: absolute; width: 680px; bottom: 20px; }
.show-small ul { list-style: none; }
.show-small ul li { float: left; margin: 0 10px; border: 5px solid #fff; opacity: 0.7; cursor: pointer;-webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s;-o-transition: all .3s; transition: all .3s; }
.show-small ul li:hover { margin-top: -15px; }
js代碼（小demo）：
window.onload = function() {
// 得到元素
var getDOM = function (id){
return typeof id==="string"?document.getElementById(id):id;
}
// 得到對象
var img = getDOM('img_1');
var prev = getDOM("perv_btn");
var next = getDOM("next_btn");
var wrap_panel = getDOM('wrap_panel');
var bg_1 = getDOM("bg_1");
var bg_2 = getDOM("bg_2");
var bg_3 = getDOM("bg_3");
var show_small = getDOM("show_small");
var list = show_small.getElementsByTagName("li");
var wwidth;
// 為元素綁定事件
var addEvent = function(id,event,fn) {
var el = getDOM(id) || document;
if(el.addEventListener){
el.addEventListener(event,fn,false);
}else if(el.attachEvent){
el.attachEvent('on' + event,fn);
}
}
function init() {
// 對按鈕進行定位
// 向前按鈕的左邊距離=圖片的左距離+邊框
prev.style.left = img.offsetLeft + 10 + 'px';
// 向前按鈕的上邊距離=圖片的上距離+圖片高度的一半-按鈕高度的一半
prev.style.top = img.offsetTop + img.clientHeight/2 - prev.clientHeight/2 + 'px';
next.style.left = img.offsetLeft + img.clientWidth + 10 - next.clientWidth + 'px';
next.style.top =prev.style.top;
// 對小圖片的容器進行定位
wwidth = document.documentElement.clientWidth || document.body.clientWidth;
show_small.style.left = (wwidth - show_small.clientWidth)/2 + 'px';
}
// 小圖片的處理
function small_img() {
// 對圖片進行旋轉(zhuǎn)處理
for (var i = 0;i< list.length; i++) {
// 旋轉(zhuǎn)方向
var direction = Math.pow(-1,parseInt(Math.random()*10));
list[i].style = "transform:rotate(" + (Math.random()*20*direction) + "deg)";
}
list[0].style.opacity = 1;
}
function only_one(el,num) {
for (var i = 0; i < el.length; i++) {
el[i].style.opacity = 0.7;
}
// console.log(num);
el[num].style.opacity = 1;
}
// 瀏覽器縮放時
window.onresize = function() {
init();
}
// 執(zhí)行函數(shù)
init();
small_img();
addEvent(prev,'click',function() {
// 改變wrap-panel的left
var oldPos = parseInt(wrap_panel.style.left);
if(oldPos == 0) {
// 背景平移 圖片容器平移
bg_1.style.left=bg_2.style.left=bg_3.style.left=wrap_panel.style.left = -wwidth*(list.length-1) +'px';
// 更改對應(yīng)小圖片透明度
only_one(list,list.length-1);
} else {
// 背景平移 圖片容器平移
wrap_panel.style.left = (oldPos + wwidth) +'px';
bg_1.style.left= (oldPos + wwidth - parseInt(-(oldPos/wwidth + 1))*100) +'px';
bg_2.style.left= (oldPos + wwidth - parseInt(-(oldPos/wwidth + 1))*300) +'px';
bg_3.style.left= (oldPos + wwidth - parseInt(-(oldPos/wwidth + 1))*500) +'px';
// 更改對應(yīng)小圖片透明度
only_one(list,parseInt(-(oldPos/wwidth + 1)));
}
});
addEvent(next,'click',function() {
// 改變wrap-panel的left
var oldPos = parseInt(wrap_panel.style.left);
if(oldPos == -wwidth*(list.length-1)) {
// 背景平移 圖片容器平移
bg_1.style.left=bg_2.style.left=bg_3.style.left=wrap_panel.style.left = '0px';
// 更改對應(yīng)小圖片透明度
only_one(list,0);
} else {
// 背景平移 圖片容器平移
wrap_panel.style.left = (oldPos - wwidth) +'px';
bg_1.style.left= (oldPos - wwidth + parseInt(-(oldPos/wwidth + 1))*100) +'px';
bg_2.style.left= (oldPos - wwidth + parseInt(-(oldPos/wwidth + 1))*300) +'px';
bg_3.style.left= (oldPos - wwidth + parseInt(-(oldPos/wwidth + 1))*500) +'px';
// 更改對應(yīng)小圖片透明度
only_one(list,parseInt(-(oldPos/wwidth - 1)));
}
});
}
以上就是本文的全部內(nèi)容，希望對大家學(xué)習(xí)javascript程序設(shè)計有所幫助。
相關(guān)文章
JavaScript中數(shù)據(jù)結(jié)構(gòu)與算法(二)：隊列
這篇文章主要介紹了JavaScript中數(shù)據(jù)結(jié)構(gòu)與算法(二)：隊列,隊列是只允許在一端進行插入操作,另一個進行刪除操作的線性表,隊列是一種先進先出（First-In-First-Out，F(xiàn)IFO）的數(shù)據(jù)結(jié)構(gòu),需要的朋友可以參考下2015-06-06
今天看了一個函數(shù)，功能是把形如word-word的字符串轉(zhuǎn)化為wordWord2010-03-03
解決BootStrap Fileinput手機圖片上傳顯示旋轉(zhuǎn)問題
這篇文章主要介紹了 BootStrap Fileinput手機圖片上傳顯示旋轉(zhuǎn)問題,需要的朋友可以參考下2017-06-06
DropDownList控件綁定數(shù)據(jù)源的三種方法
本文給大家分享web 中 DropDownList綁定數(shù)據(jù)源的幾種方式以及DropdownList控件動態(tài)綁定數(shù)據(jù)源的兩種方法，下面通過本文給大家詳細(xì)介紹，感興趣的朋友一起看看2016-12-12
如何利用原生JS實現(xiàn)觸摸滑動監(jiān)聽事件
這篇文章主要給大家介紹了關(guān)于如何利用原生JS實現(xiàn)觸摸滑動監(jiān)聽事件的相關(guān)資料,文中將實現(xiàn)的原理以及代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-06-06
這篇文章主要介紹了JS計算網(wǎng)頁停留時間的具體實現(xiàn),需要的朋友可以參考下2014-04-04
JavaScript限制在客戶區(qū)可見范圍的拖拽(解決scrollLeft和scrollTop的問題)（2）
這篇文章主要介紹了JavaScript限制在客戶區(qū)可見范圍的拖拽，解決scrollLeft和scrollTop的問題，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
如何將php數(shù)組或者對象傳遞給javascript
這篇文章主要介紹了將php數(shù)組或者對象傳遞給javascript的方法,需要的朋友可以參考下2014-03-03
ASP.NET jquery ajax傳遞參數(shù)的實例
下面小編就為大家?guī)硪黄狝SP.NET jquery ajax傳遞參數(shù)的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
JS實現(xiàn)從網(wǎng)頁頂部掉下彈出層效果的方法
這篇文章主要介紹了JS實現(xiàn)從網(wǎng)頁頂部掉下彈出層效果的方法,實例分析了javascript創(chuàng)建彈出窗口及窗口掉落與抖動效果實現(xiàn)方法,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08