写给代码小白：运用JavaScirpt实现大图滚动

作者: 轻歌_ | 来源:发表于2016-05-10 17:01 被阅读243次

写给代码小白：运用JavaScirpt实现大图滚动
利用CSS3简单实现的大图滚动效果
CSS奇技淫巧（持续更新）
实现HTML数字滚动(2018-12-14)
悬浮按钮滚动时隐藏不滚动显示
修改滚动条样式
2018-11-10排他思想做轮播图
项目分解
封装大图滚动
CSS-背景4-内容滚动背景图固定

在大家平时浏览网页时,一定经常看到许多首页都会布置一些精美、酷炫的带有滚动效果的图片,使网站更具有吸引力（如图）。今天给大家分享一些简单的运用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方面便无须赘述,有兴趣的可以