jquery写出PC端轮播图实例

前端之家收集整理的这篇文章主要介绍了jquery写出PC端轮播图实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

实现的效果

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

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

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

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

代码目录结果如下:

一、index.html

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

<Meta charset="UTF-8"> PC-jquery版轮播图

二、style.css

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.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 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':-iimgW+'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,0);
dot.find('li').removeClass('active').eq(0).addClass('active')
i = 1;
}
})

//点击左侧箭头,播放上一张
arrowL.click(function () {
i--;
innerBox.stop(false,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,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)
})

四、效果图展示

猜你在找的jQuery相关文章