在大家平時(shí)瀏覽網(wǎng)頁(yè)時(shí),一定經(jīng)澈砹担看到許多首頁(yè)都會(huì)布置一些精美粪摘、酷炫的帶有滾動(dòng)效果的圖片,使網(wǎng)站更具有吸引力（如圖）。今天給大家分享一些簡(jiǎn)單的運(yùn)用H5和css3的內(nèi)容配合原生JS來實(shí)現(xiàn)大圖滾動(dòng)的方法. (由于本人也是剛剛接觸H5和JS,許多東西都是最基礎(chǔ)的,希望來往的大神輕點(diǎn)噴?? )
準(zhǔn)備過程
新建文件夾,并命名,暫時(shí)命名為"滾動(dòng)"即可.另外新建文件夾"imgs",選幾張自己喜歡的圖片放到里面苔悦。
然后打開你的代碼編輯器,(本人用的 Hbuidler,功能足夠強(qiáng)大,在這里也推薦給大家...),新建HTML文件,命名為"index.html",同時(shí)新建css和js文件,命名為"sroll",至此準(zhǔn)備工作結(jié)束玖详。
簡(jiǎn)單布局
切換到html頁(yè)面,編輯代碼如下:
<div class="wrap">
<div class="middle">
<div><img src="imgs/1.jpg"/></div>
<div><img src="imgs/2.jpg"/></div>
<div><img src="imgs/3.jpg"/></div>
<div><img src="imgs/4.jpg"/></div>
</div>
<div class="page_move" id="next" style="top: 950px"> > </div>
<div class="page_move" id="last" style="top: 0"><</div>
<input type="button" class="pageBtn" value="1" />
<input type="button" class="pageBtn" value="2" />
<input type="button" class="pageBtn" value="3" />
<input type="button" class="pageBtn" value="4" />
</div>
添加css樣式
編輯下方的代碼保存至.css文件中蟋座。
在設(shè)置樣式時(shí),采用了定位,通過改變left值,實(shí)現(xiàn)滾動(dòng)的效果向臀。
//清除樣式
*{
margin: 0;
padding: 0;
border: 0;
}
//簡(jiǎn)單設(shè)置最外層屬性诸狭。值得注意的是這里用到'overflow:hidden'使超出div部分圖片隱藏。
.wrap{
width: 1000px;
height: 550px;
position: relative;
overflow: hidden;
margin: 0 auto;
}
//給".middle"設(shè)置定位而且在這用到'transition',使圖片在移動(dòng)時(shí)有滾動(dòng)的效果芹彬。
.middle{
height: 550px;
position: absolute;
top: 0;
left: 0;
transition: all 0.5s;
}
// 在內(nèi)層div處設(shè)置浮動(dòng),讓所有圖片排成一列叉庐。
.middle>div{
width: 1000px;
height: 550px;
text-align: center;
line-height: 350px;
float: left;
font-size: 50px;
}
.middle>div>img{
width:100%;
// 由于只是簡(jiǎn)單的實(shí)現(xiàn)一下,這里的方向直接用尖括號(hào)代替了,畢竟程序猿都不喜歡麻煩??。
.page_move{
width: 25px;
height: 50px;
color: white;
text-align: center;
line-height: 100px;
background-color: #000000;
opacity: 0.4;
position: absolute;
top: 150px;
}
.pageBtn{
position: relative;
}
.wrap>input{
width: 50px;
height: 20px;
color: white;
background-color: rgba(0,0,0,0.3);
}
注意:給".middle"設(shè)置定位時(shí)要給left和top初始值,否則在第一張圖片移動(dòng)時(shí),不會(huì)產(chǎn)生滾動(dòng)效果玩郊。其次其width是在JS中給出,這一點(diǎn)就根據(jù)個(gè)人喜好,本人覺得放到JS會(huì)比較方便日后修改瓦宜。
添加完樣式后,效果如下圖:
JS部分
原生JS代碼:
// 獲取各項(xiàng)變量
var wrapDiv = document.querySelector(".wrap");
var middleDiv = document.querySelector(".middle")
var divs = document.querySelectorAll(".middle>div");
var nextBtn = document.getElementById("next");
var lastBtn = document.getElementById("last");
var pageBtn = document.querySelectorAll(".pageBtn");
// 設(shè)置定時(shí)器,和頁(yè)碼page
var page = 0;
var timer = null;
// middle 寬
// 獲取到wrap的寬度保存到變量里
var w = wrapDiv.offsetWidth;
middleDiv.style.width = w * divs.length + "px";
// middle移動(dòng)
function pageTurn() {
middleDiv.style.left = -w * page + "px";
}
// 滾動(dòng):這里的direction是自己設(shè)置的參數(shù),用來判斷是向左滾動(dòng)還是向右滾動(dòng)
function scroll(direction) {
if (direction == "next") {
page++;
if (page > divs.length - 1) {
page = 0;
}
} else {
page--;
if (page < 0) {
page = divs.length - 1;
}
}
pageTurn();
}
// 利用定時(shí)器實(shí)現(xiàn)自動(dòng)滾動(dòng)
function autoScroll() {
clearInterval(timer)
timer = setInterval(function() {
scroll("next");
}, 1500)
}
nextBtn.onclick = function() {
clearInterval(timer);
scroll("next");
}
nextBtn.onmouseout = function() {
autoScroll();
}
lastBtn.onclick = function() {
clearInterval(timer);
scroll();
}
lastBtn.onmouseout = function() {
autoScroll();
}
window.onload = function() {
autoScroll();
}
wrapDiv.onmouseover = function() {
clearInterval(timer);
}
wrapDiv.onmouseout = function() {
autoScroll();
}
// 利用for循環(huán),實(shí)現(xiàn)點(diǎn)擊頁(yè)碼來切換圖片
for (var i = 0; i < divs.length; i++) {
pageBtn[i].index = i;//給input設(shè)置一個(gè)index屬性,將input下標(biāo)保存起來
pageBtn[i].onmouseover = function() {
page = this.index;//將input的下標(biāo)傳遞給page
pageTurn();
}
pageBtn[i].onmouseout = function() {
autoScroll();
}
}
將以上代碼保存在.js文件中反璃。
引用css文件和js文件
在html文件中添加css文件需要輸入的代碼:
"<link rel="stylesheet" type="text/css" href="scroll.css"/>"
其中"href"的等號(hào)后面索要添加的就是你css文件的相對(duì)路徑假夺。
在html文件中添加js文件需要輸入的代碼:
<script src="scroll.js" type="text/javascript" charset="utf-8"></script>
js文件的相對(duì)路徑要添加自"src"的等號(hào)后面
到此為止利用原生js來實(shí)現(xiàn)圖片滾動(dòng)的方法就介紹完畢,效果圖發(fā)給大家已卷。
運(yùn)用jquery實(shí)現(xiàn)大圖滾動(dòng)
如果覺得原生js很麻煩的話,大家也可以用jquery來實(shí)現(xiàn)侧蘸。
首先到官網(wǎng)去下載jquery庫(kù)文件,下載頁(yè)面:http://jquery.com/download/
進(jìn)入官方的下載頁(yè)面后點(diǎn)擊紅色框的鏈接即可下載了,當(dāng)然若是不打算兼容IE瀏覽器選擇黃色框會(huì)是更好的選擇。
以下是運(yùn)用jQuery庫(kù)寫的圖片滾動(dòng):
$(function(){
$('.middle').css('width', function(){
return $('.wrap').width() * $('img').length;
})
function scroll(){
page++;
if (page > $('img').length - 1) {
page = 0;
}
$('.middle').animate({
left: -$('.wrap').width() * page
}, 1000)
}
var timer = null;
function autoscroll(){
timer = setInterval(function(){
scroll();
},2000)
}
autoscroll();
var page = 0;
$('.next').click(function (){
clearInterval(timer);
scroll();
}).mouseout(function(){
autoscroll();
})
$('.last').click(function(){
clearInterval(timer);
page--;
if (page < 0) {
page = $('img').length - 1;
}
$('.middle').animate({
left: -$('.wrap').width() * page
}, 1000)
}).mouseout(function(){
autoscroll();
})
})```
由于本篇文章主要介紹的是運(yùn)用原生JS實(shí)現(xiàn)大圖滾動(dòng)的效果,jQuery方面便無須贅述,有興趣的可以