js渣渣也能简单做出

在理想情况下用吧外层div的class名起为banner ul li的布局

下面是css代码放图片的li记得浮动；

.banner {width: 15rem;height: 5.22rem;position: relative;overflow: hidden;
}
.banner ul {width: 60rem;height: 5.22rem;position: absolute;
}
.banner ul li {float: left;width: 15rem;height: 5.22rem;
}
.banner img {width: 15rem;height: 5.22rem;
}

这里是HTML代码 img标签里直接放自己想轮播的图片

a标签是轮播图左右按钮这里引用的是阿里icon font图标库的图标

 <div class="banner"><ul><li><img src="./img/01.webp"></li><li><img src="./img/02.webp"></li><li><img src="./img/03.webp"></li><li><img src="./img/04.webp"></li><li><img src="./img/05.webp"></li></ul><div class="num"><span class="on"></span><span></span><span></span><span></span><span></span></div><a href="javascript:" class="prev"><i class="iconfont icon-lunbozuofangun"></i></a><a href="javascript:" class="next"><i class="iconfont icon-lunboyoufangun"></i></a></div>

最重要的来了jQuery代码

   $(function () {var timer = null;//创建一个变量获取li宽度 var liw = $('.banner ul li:first').innerWidth();// 定时器名字叫timetimer = setInterval(function () {play()}, 2000)//这里是吧轮播效果封装为了一个函数叫paly 方便后面调用function play() {//每2000毫秒把外层div的视口往左拉当前li的宽度$('.banner ul').animate({ left: -liw }, function () {// 把最后一张图片追加到前面 无缝轮播$(this).css("left", 0).find("li:first").appendTo(this);})}//当鼠标划过清除定时器  暂停  这里用到的是jq里的hover事件$(".banner").hover(function () {clearInterval(timer);//移出继续}, function () {timer = setInterval(function () {play()}, 2000)})//点击右箭头事件 这里的.next就是前面的字体图标//点击时候调用play（）函数$('.next').click(function(){play()})//点击左箭头事件 这里的.prev就是前面的字体图标$('.prev').click(function(){$('.banner ul').css('left', -liw ).find("li:last").prependTo('.banner ul')$('.banner ul').animate({ left:0});})})

jQuery轮播图(详细注释)相关推荐

JQuery仿最新淘宝网首页带箭头幻灯片,JQuery轮播图
JQuery代码 <script type="text/javascript"> $(function() { var $banner = $('.banner'); ...
html图片轮播种类,支持4种类型的jQuery轮播图插件EasySlides
EasySlides是一款支持4种类型的jQuery轮播图插件.该jquery轮播图采用响应式设计,支持移动设备,内置有大图轮播,多图轮播,封面轮播和圆形轮播四种轮播图模式可供选择. 使用方法在页面 ...
html5slider轮播,jQuery轮播图插件slider-pro
slider-pro是一款模块化.响应式.支持移动设备的jQuery轮播图插件.该jQuery轮播图插件提供各种配置参数和方法,可以快速的创建多种模式的轮播图特效.它的主要特点有: 支持模块化. 响应 ...
简单的手写jquery轮播图（包含切换按钮、小圆点）
简单的手写jquery轮播图(包含切换按钮.小圆点) css代码 * {margin: 0;padding: 0; }.container {width: 800px;height: 400px;ma ...
android 图片轮播带缩略图,超酷响应式带缩略图的jQuery轮播图插件
PgwSlideshow是一款非常实用的响应式.支持触摸屏的jQuery轮播图插件.该轮播图插件带有缩略图预览效果,可以根据容器的大小自适应图片的宽度.你也可以自定义轮播图的高度,图片宽度会根据高度等 ...
响应式html轮播图,最简单的响应式jQuery轮播图插件
easySlider.js是一款轻量级.简单易用的响应式jQuery轮播图插件.easySlider.js可以根据视口的大小来动态修改轮播图的尺寸.它压缩后的版本仅5K大小,简单实用. 使用方法在页 ...
轮播图详细制作思路与过程
轮播图详细制作思路与过程图片轮播我们经常在众多网站中看到,各种轮播特效有着非常美观炫酷的视觉效果.很多初学js的小伙伴都很心生向往.我也不例外,所以在此分享个写轮播图的思路和过程,有不足之处请多多指 ...
html 轮播怎么用jq设置,jQuery轮播图功能实现方法
本文实例为大家分享了jQuery轮播图功能的实现代码,供大家参考,具体内容如下 jQuery轮播(无animation) html布局 5 1 2 3 4 5 1 < > CSS /* 轮 ...
html轮播图兼容ie8,兼容IE8的高级jQuery轮播图插件
jSlider是一款兼容IE8的高级jQuery轮播图插件.jSlider轮播图插件的特点是轻量级,使用简单,跨平台.通过jSlider你可以非常容易的而在网页中实现任何轮播图效果.它的特点还有: 速 ...

jQuery轮播图(详细注释)

js渣渣也能简单做出

下面是css代码放图片的li记得浮动；

这里是HTML代码 img标签里直接放自己想轮播的图片

最重要的来了jQuery代码

jQuery轮播图(详细注释)相关推荐

最新文章

热门文章