在大家平时浏览网页时,一定经常看到许多首页都会布置一些精美、酷炫的带有滚动效果的图片,使网站更具有吸引力（如图）。今天给大家分享一些简单的运用H5和css3的内容配合原生JS来实现大图滚动的方法. (由于本人也是刚刚接触H5和JS,许多东西都是最基础的,希望来往的大神轻点喷😂 )
大图滚动.png
准备过程
新建文件夹,并命名,暂时命名为"滚动"即可.另外新建文件夹"imgs",选几张自己喜欢的图片放到里面。
然后打开你的代码编辑器,(本人用的 Hbuidler,功能足够强大,在这里也推荐给大家...),新建HTML文件,命名为"index.html",同时新建css和js文件,命名为"sroll",至此准备工作结束。
HBuilder.png
准备工作
简单布局
切换到html页面,编辑代码如下:
<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文件中。
在设置样式时,采用了定位,通过改变left值,实现滚动的效果。
//清除样式
*{
margin: 0;
padding: 0;
border: 0;
}
//简单设置最外层属性。值得注意的是这里用到'overflow:hidden'使超出div部分图片隐藏。
.wrap{
width: 1000px;
height: 550px;
position: relative;
overflow: hidden;
margin: 0 auto;
}
//给".middle"设置定位而且在这用到'transition',使图片在移动时有滚动的效果。
.middle{
height: 550px;
position: absolute;
top: 0;
left: 0;
transition: all 0.5s;
}
// 在内层div处设置浮动,让所有图片排成一列。
.middle>div{
width: 1000px;
height: 550px;
text-align: center;
line-height: 350px;
float: left;
font-size: 50px;
}
.middle>div>img{
width:100%;
// 由于只是简单的实现一下,这里的方向直接用尖括号代替了,毕竟程序猿都不喜欢麻烦😂。
.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"设置定位时要给left和top初始值,否则在第一张图片移动时,不会产生滚动效果。其次其width是在JS中给出,这一点就根据个人喜好,本人觉得放到JS会比较方便日后修改。
添加完样式后,效果如下图:
scroll.png
scroll_html.png
JS部分
原生JS代码:
// 获取各项变量
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");
// 设置定时器,和页码page
var page = 0;
var timer = null;
// middle 宽
// 获取到wrap的宽度保存到变量里
var w = wrapDiv.offsetWidth;
middleDiv.style.width = w * divs.length + "px";
// middle移动
function pageTurn() {
middleDiv.style.left = -w * page + "px";
}
// 滚动:这里的direction是自己设置的参数,用来判断是向左滚动还是向右滚动
function scroll(direction) {
if (direction == "next") {
page++;
if (page > divs.length - 1) {
page = 0;
}
} else {
page--;
if (page < 0) {
page = divs.length - 1;
}
}
pageTurn();
}
// 利用定时器实现自动滚动
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循环,实现点击页码来切换图片
for (var i = 0; i < divs.length; i++) {
pageBtn[i].index = i;//给input设置一个index属性,将input下标保存起来
pageBtn[i].onmouseover = function() {
page = this.index;//将input的下标传递给page
pageTurn();
}
pageBtn[i].onmouseout = function() {
autoScroll();
}
}
将以上代码保存在.js文件中。
引用css文件和js文件
在html文件中添加css文件需要输入的代码:
"<link rel="stylesheet" type="text/css" href="scroll.css"/>"
其中"href"的等号后面索要添加的就是你css文件的相对路径。
css文件引用.png
在html文件中添加js文件需要输入的代码:
<script src="scroll.js" type="text/javascript" charset="utf-8"></script>
js文件的相对路径要添加自"src"的等号后面
js文件的引用.png
到此为止利用原生js来实现图片滚动的方法就介绍完毕,效果图发给大家。
滚动.gif
运用jquery实现大图滚动
如果觉得原生js很麻烦的话,大家也可以用jquery来实现。
首先到官网去下载jquery库文件,下载页面:http://jquery.com/download/
jquery-download.png
进入官方的下载页面后点击红色框的链接即可下载了,当然若是不打算兼容IE浏览器选择黄色框会是更好的选择。
以下是运用jQuery库写的图片滚动:
$(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();
})
})```
由于本篇文章主要介绍的是运用原生JS实现大图滚动的效果,jQuery方面便无须赘述,有兴趣的可以