jquery+css如何实现图片轮播效果
这篇文章给大家分享的是有关jquery+css如何实现图片轮播效果的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
兴县网站建设公司成都创新互联公司,兴县网站设计制作，有大型网站制作公司丰富经验。已为兴县千余家提供企业网站建设服务。企业网站搭建\成都外贸网站建设公司要多少钱，请找那个售后服务好的兴县做网站的公司定做！
ps：
功能比较简单，整个框并不能根据图片的大小自动调节，这里所用的图片是1170*500的，如果需要改成其他大小的图片，自行修改.pic-list下img的宽度。
.pic-list中的宽度为整个横幅的宽度，如果需要轮播的图片数量很多，.pic-list的宽度应大于数量*单张宽度，
html
<
>
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();
});感谢各位的阅读！关于“jquery+css如何实现图片轮播效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
分享文章：jquery+css如何实现图片轮播效果
浏览路径：
http://cdweb.net/article/ihosos.html
