本篇文章主要给大家讲述了用 jquery 如何写出一个 PC 端的轮播图效果的实例, 有兴趣的朋友参考下
最近其他项目不是很忙, 被安排给公司的官网项目做一个新的页面(之前没接触公司官网项目), 其中有一个用到轮播图的地方, 最开始想直接用 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" rel="external nofollow" >
- </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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><p > 图片 - 5</p><img src="images/slide-5.jpg"></a></li>
- <li><a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><p > 图片 - 1</p><img src="images/slide-1.jpg"></a></li>
- <li><a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><p > 图片 - 2</p><img src="images/slide-2.jpg"></a></li>
- <li><a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><p > 图片 - 3</p><img src="images/slide-3.jpg"></a></li>
- <li><a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><p > 图片 - 4</p><img src="images/slide-4.jpg"></a></li>
- <li><a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><p > 图片 - 5</p><img src="images/slide-5.jpg"></a></li>
- <li><a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><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)
- })
四效果图展示
来源: http://www.phperz.com/article/18/0214/363174.html