重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章给大家分享的是有关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如何实现图片轮播效果”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!