jquery+css实现简单的图片轮播效果
时间：2021-08-15 09:33:30|栏目：jquery|点击： 次
开发过程中需要用到图片轮播的插件，在网上找了几个插件之后还是决定自己码一个，比较简洁的功能，以后说不定还会有用。
ps：
功能比较简单，整个框并不能根据图片的大小自动调节，这里所用的图片是1170*500的，如果需要改成其他大小的图片，自行修改.pic-list下img的宽度。
.pic-list中的宽度为整个横幅的宽度，如果需要轮播的图片数量很多，.pic-list的宽度应大于数量*单张宽度，
html
<div class="banner">
<!--第一张图片为最后一张，用来做轮播连接使用，所以一开始显示的第一章，应是第二张图片，这里图片的宽度为1170px，所以一开始left为-1170px，同理最后一张图也为第一张图。-->
<div class="pic-list" style="left: -1170px">
<img src="/static/img/4.jpg" alt="">
<img src="/static/img/1.jpg" alt="">
<img src="/static/img/2.jpg" alt="">
<img src="/static/img/3.jpg" alt="">
<img src="/static/img/4.jpg" alt="">
<img src="/static/img/1.jpg" alt="">
</div>
<div id="buttons">
<!-- 确保span的数量跟img数量一样多，不包括第一张img和最后一张img-->
<span class='on'></span>
<span></span>
<span></span>
<span></span>
</div>
<a href="javascript:;" class="arrow" id="prev"><</a>
<a href="javascript:;" class="arrow" id="next">></a>
</div>
css
.banner{
width: 100%;
height: 500px;
overflow: hidden;
position: relative;
}
.banner a{
text-decoration: none;
}
.banner .pic-list{
width: 10000px;
height: 500px;
position: absolute;
z-index: 1;
}
.banner .pic-list img{
width: 1170px;
float: left;
}
#buttons{
position: absolute;
z-index: 2;
height: 10px;
bottom: 20px;
left: 550px;
}
#buttons span{
cursor: pointer;
float: left;
border: 1px solid #fff;
width: 10px;
height: 10px;
border-radius: 50%;
background: #333;
margin-right: 5px;
}
#buttons .on{
background: orange;
}
.arrow{
cursor: pointer;
line-height: 36px;
text-align: center;
font-size: 20px;
font-weight: bold;
width: 40px;
height: 40px;
position: absolute;
z-index: 2;
top: 200px;
background: rgba(0,0,0,0.5);
color: #fff;
display: none;
}
.banner:hover .arrow{display: block;}
#prev{
left: 20px;
}
#next{
right:20px;
}
js
$(document).ready(function(){
var picNum = 4;//图片数量，根据实际修改
var picWidth = 1170;//图片的宽度，根据实际修改
var picMaxWidth = -1 * picNum * picWidth;
var currentPic = 1;
var next = $('#next');
var prev = $('#prev');
var flag = false;
prev.on('click',function(){
if(!flag){
calPx(1170);
currentPic--;
if (currentPic < 1) {
currentPic = picNum;
}
$('#buttons span').eq(currentPic-1).addClass('on').siblings().removeClass('on');
}
});
next.on('click',function(){
if(!flag){
calPx(-1170);
currentPic++;
if (currentPic > picNum) {
currentPic = 1;
}
$('#buttons span').eq(currentPic-1).addClass('on').siblings().removeClass('on');
}
});
$('.banner').on('mouseover',function(){
stop();
}).on('mouseout',function(){
play();
})
function nextClick(){
next.click();
}
function play(){
setInt = setInterval(nextClick,2000);
}
function stop(){
clearInterval(setInt);
}
function calPx(leftPx){
flag = true;
var left = parseInt($('.pic-list').css('left'));
var newLeft = left+leftPx;
var time = 300;
var interval = 10;
var speed = leftPx/(time/interval);
function go(){
var left = parseInt($('.pic-list').css('left'));
if((speed < 0 && left > newLeft) || (speed > 0 && left < newLeft)){
$('.pic-list').css('left', (left + speed) + 'px');
setTimeout(go,interval);
}else{
flag = false;
if( newLeft > -1170){
newLeft = picMaxWidth;
}else if (newLeft < picMaxWidth ) {
newLeft = -1170;
}
$('.pic-list').css('left',newLeft + 'px');
}
}
go();
}
play();
});
