前端之家收集整理的这篇文章主要介绍了
jquery+css实现简单的图片轮播效果，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
开发过程中需要用到图片轮播的插件，在网上找了几个插件之后还是决定自己码一个，比较简洁的功能，以后说不定还会有用。
ps：
功能比较简单，整个框并不能根据图片的大小自动调节，这里所用的图片是1170*500的，如果需要改成其他大小的图片，自行修改.pic-list下img的宽度。
.pic-list中的宽度为整个横幅的宽度，如果需要轮播的图片数量很多，.pic-list的宽度应大于数量*单张宽度，
html
css
<div class="jb51code">
<pre class="brush: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.5);
color: #fff;
display: none;
}
.banner:hover .arrow{display: block;}
prev{
left: 20px;
}
next{
right:20px;
}
图片
数量，根据实际
修改
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();
});
