用java制作图片滚动条_写给代码小白：运用JavaScirpt实现大图滚动

在大家平时浏览网页时,一定经常看到许多首页都会布置一些精美、酷炫的带有滚动效果的图片,使网站更具有吸引力(如图)。今天给大家分享一些简单的运用H5和css3的内容配合原生JS来实现大图滚动的方法.(由于本人也是刚刚接触H5和JS,许多东西都是最基础的,希望来往的大神轻点喷😂 )

大图滚动.png

准备过程

新建文件夹,并命名,暂时命名为"滚动"即可.另外新建文件夹"imgs",选几张自己喜欢的图片放到里面。

然后打开你的代码编辑器,(本人用的 Hbuidler,功能足够强大,在这里也推荐给大家...),新建HTML文件,命名为"index.html",同时新建css和js文件,命名为"sroll",至此准备工作结束。

HBuilder.png

准备工作

简单布局

切换到html页面,编辑代码如下:

>

<

添加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文件需要输入的代码:

""

其中"href"的等号后面索要添加的就是你css文件的相对路径。

css文件引用.png

在html文件中添加js文件需要输入的代码:

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方面便无须赘述,有兴趣的可以