自实现PC端jQuery版轮播图

最近其他项目不是很忙,被安排给公司的官网项目做一个新的页面(之前没接触公司官网项目),其中有一个用到轮播图的地方,最开始想直接用swiper.js插件实现就好了,可是发现官网项目里之前都没有引入过swiper.js,后来想了想,就不引入它了,免得又得增加依次一次网络请求,项目里既然已经用到了jQuery,那就索性用jQuery写一个轮播图吧。

现在把自己写的轮播图这块代码单独拿出来,做一个小demo写在这里记录一下(demo中轮播图的图片网上随意找的)

实现的效果:

    1、自动轮播(轮播时间间隔在js代码中自定义)

    2、点击左右侧按钮,实现手动切换

    3、底部小圆点根据切换图片的位置相应的显示active状态

    4、鼠标经过轮播图区域,停止轮播,离开轮播图区域开始轮播

代码目录结果如下:

一、index.html

注:这里以5张图片为例,页面上真正轮播展示给用户看到的是5张不同的图片,但是为了轮播效果的连贯性,所以在第一张图片前面添加上第五张图片,在第五张图片后面加上了第一张图片,所以demo结构里是7张图片,每张图片的尺寸必须都是一样的哦(这里宽高尺寸是720*350px)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PC-jquery版轮播图</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="layout">
    <h2 style="text-align: center;">PC-jquery版轮播图</h2>
    <div class="slide" id="slide">
        <div id="outer" class="outer">
            <ul id="inner" class="inner">
                <li><a href="http://www.baidu.com"><p>图片-5</p><img src="images/slide-5.jpg"></a></li>
                <li><a href="http://www.baidu.com"><p>图片-1</p><img src="images/slide-1.jpg"></a></li>
                <li><a href="http://www.baidu.com"><p>图片-2</p><img src="images/slide-2.jpg"></a></li>
                <li><a href="http://www.baidu.com"><p>图片-3</p><img src="images/slide-3.jpg"></a></li>
                <li><a href="http://www.baidu.com"><p>图片-4</p><img src="images/slide-4.jpg"></a></li>
                <li><a href="http://www.baidu.com"><p>图片-5</p><img src="images/slide-5.jpg"></a></li>
                <li><a href="http://www.baidu.com"><p>图片-1</p><img src="images/slide-1.jpg"></a></li>
            </ul>

       <!--底部小圆点-->
            <ol class="dot" id="dot">
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ol>
        </div>
     <!--左右两侧的点击切换按钮-->
        <div class="arrow-box">
            <div class="arrow arrow-l" id="arrow_l">‹</div>
            <div class="arrow arrow-r" id="arrow_r">›</div>
        </div>
    </div>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>

二、style.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.layout {
    width: 1000px;
    margin: 30px auto;
}
ul,ol,li {
    list-style: none;
}
.slide {
    position: relative;
    width: 900px;
    margin:auto;
}
.slide .outer {
    position: relative;
    margin: 30px auto;
    width: 720px;
    height: 400px;
    overflow: hidden;
}
.slide .outer .inner {
    width: 5040px;
    height: 350px;
    position: absolute;
    left: -720px;
    top: 0;
}
.slide .outer .inner li {
    float: left;
    height: 350px;
}
.slide .outer .inner li a {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}
.slide .outer .inner li a p {
    position: absolute;
    left: 0;
    bottom: 0;
    color: #fff;
    font-size: 18px;
    width: 720px;
    height: 80px;
    line-height: 80px;
    padding-left: 50px;
    background: linear-gradient(180deg,rgba(0,0,0,0), rgba(0,0,0,0.5));
}
.slide .outer .dot {
    margin-top: 365px;
    text-align: center;
}
.slide .outer .dot li {
    height: 6px;
    width: 6px;
    border-radius: 3px;
    background-color: #d2cbcb;
    display: inline-block;
    margin: 0 3px;
}
.slide .outer .dot li.active {
    background-color: #6e5ca5;
}
.slide .arrow-box {
    position: absolute;
    width: 900px;
    height: 60px;
    top: 150px;
    left: 0;
}
.slide .arrow-box .arrow {
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    border-radius: 30px;
    background-color: #dde2e6;
    font-size: 60px;
    color: #999;
    cursor: pointer;
}
.slide .arrow-box .arrow.arrow-l {
    float: left;
}
.slide .arrow-box .arrow.arrow-r {
    float: right;
}

三、index.js

注:js代码中,每个变量均已给了注释。为了防止快速多次点击,而出现动画不停的现象,这里在每次切换图片的时候先调用stop(false,true)。但是注意在向左侧滚动的时候,滚动到最后一张图图片后,再次切换时就不要用stop(false,true),而是要瞬间定位到第一张图片(其实是dom结构中的第二张)的位置,同样,向右侧滚动时,当滚动到第一张图片后,再次切换时就不用stop(false,true),而是要瞬间定位到最后一张图片(其实是dom结构中的倒数第二张)的位置。

var interval = 3000;                //轮播间隔时间
var arrowL = $('#arrow_l');         //左侧箭头
var arrowR = $('#arrow_r');         //右侧箭头

var slideBox = $('#slide');         //轮播图区域
var innerBox = $('#inner');         //内层大盒子
var img = innerBox.children('li');  //每个图片
var dot = $('#dot');                //小圆点盒子

var imgW = $(img[0]).outerWidth();  //每个li标签的宽度

var imgCount = 5;                   //总图片个数(不同图片的个数)(实际dom上是有7张)
var i = 0;                          //初始化为第0张图片
timer = null;                       //定时器

//自动轮播
timer = setInterval(function () {
    i++;
    innerBox.stop(false, true).animate({'left':-i*imgW+'px'},300)
    dot.find('li').removeClass('active').eq(i-1).addClass('active')
    if(i > imgCount){
        innerBox.animate({'left':-1*imgW+'px'},0);
        dot.find('li').removeClass('active').eq(0).addClass('active')
        i = 1;
    }
},interval)

//点击右侧箭头,播放下一张
arrowR.click(function () {
    i++;
    innerBox.stop(false, true).animate({'left':-i*imgW+'px'},300)
    dot.find('li').removeClass('active').eq(i-1).addClass('active')
    if(i > imgCount){
        innerBox.animate({'left':-1*imgW+'px'},0);
        dot.find('li').removeClass('active').eq(0).addClass('active')
        i = 1;
    }
})

//点击左侧箭头,播放上一张
arrowL.click(function () {
    i--;
    innerBox.stop(false, true).animate({'left':-i*imgW+'px'},300)
    dot.find('li').removeClass('active').eq(i-1).addClass('active')
    if(i < 1){
        innerBox.animate({'left':-imgCount*imgW+'px'},0);
        dot.find('li').removeClass('active').eq(imgCount-1).addClass('active')
        i = imgCount;
    }
})

//鼠标经过轮播图区域时,清除定时器,停止自动轮播
slideBox.mouseenter(function () {
    clearInterval(timer);
})

//鼠标离开轮播图区域时,重新启动自动轮播
slideBox.mouseleave(function () {
    timer = setInterval(function () {
        i++;
        innerBox.stop(false, true).animate({'left':-i*imgW+'px'},300)
        dot.find('li').removeClass('active').eq(i-1).addClass('active')
        if(i > imgCount){
            innerBox.animate({'left':-1*imgW+'px'},0);
            dot.find('li').removeClass('active').eq(0).addClass('active')
            i = 1;
        }
    },interval)
})

四、效果图展示

 注:毕竟是自己写的,多少可能还会存在一些问题,如果有发现问题的,欢迎及时指出来哦。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏IMWeb前端团队

CSS3的3D变换和动画

CSS3的3D变换 transform属性 attr des css level transform 向元素应用 2D 或 3D 转换。 3 ...

25460
来自专栏向治洪

React Native之ScrollView控件详解

概述 ScrollView在Android和ios原生开发中都比较常见,是一个 滚动视图控件。在RN开发中,系统也给我们提供了这么一个控件。不过在RN开发中 ,...

71770
来自专栏IMWeb前端团队

CSS StickyFooter——当内容不足一屏时footer紧贴底部

一般来说我们的footer是跟着内容走的,所以当内容较少不足一屏的时候,footer也会跟着内容往上走,导致下面一段空白。所以这里我们来探讨下当内容不足一屏时f...

23770
来自专栏互联网杂技

创建弹窗

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link r...

31450
来自专栏前端说吧

CSS- ie6,ie7,ie8 兼容性写法,CSS hack写法

33440
来自专栏偏前端工程师的驿站

CSS魔法堂:改变单选框颜色就这么吹毛求疵!

 是否曾经被业务提出"能改改这个单选框的颜色吧!让它和主题颜色搭配一下吧!",然后苦于原生不支持换颜色,最后被迫自己手撸一个凑合使用。若抛开input[type...

16830
来自专栏达摩兵的技术空间

你不知道的height常识

本文将总结一些height中你不知道的常识内容,希望能给你的前端编码带来一些不一样的思想以及更好的理解前端盒模型。

11030
来自专栏数据小魔方

裁图、抠图、换背景,PPT也可以

今天跟大家聊一聊PPT的基本图片处理功能! ▽ 每次做PPT的时候 总想弄几个感觉还不错的图片 插入PPT里来装装bigger 可是能找到的图片 不是背景不搭 ...

405100
来自专栏DannyHoo的专栏

iOS开发中让UIButton上的image进行360度旋转

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

11110
来自专栏葡萄城控件技术团队

Web页面中5种超酷的Hover效果

想在自己的网站中应用超酷的hover效果吗?也许你可以从如下的这些实例中获得一些灵感,如果你喜欢这些效果,也可以直接拷贝代码并应用到你的站点。 给平淡的站点带来...

27690

扫码关注云+社区

领取腾讯云代金券