jquery+css如何实现图片轮播效果

这篇文章给大家分享的是有关jquery+css如何实现图片轮播效果的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

ps：

功能比较简单，整个框并不能根据图片的大小自动调节，这里所用的图片是1170*500的，如果需要改成其他大小的图片，自行修改.pic-list下img的宽度。

.pic-list中的宽度为整个横幅的宽度，如果需要轮播的图片数量很多，.pic-list的宽度应大于数量*单张宽度，

html

<div class="banner">     <!--第一张图片为最后一张，用来做轮播连接使用，所以一开始显示的第一章，应是第二张图片，这里图片的宽度为1170px，所以一开始left为-1170px，同理最后一张图也为第一张图。-->   <div class="pic-list" >     <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">&lt;</a>   <a href="javascript:;" class="arrow" id="next">&gt;</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(); });

感谢各位的阅读！关于“jquery+css如何实现图片轮播效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！