JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)_自适应轮播

实现自动轮播图

176 浏览量更新于2023-03-16 评论收藏 39KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

JS实现自动轮播图效果实现自动轮播图效果(自适应屏幕宽度自适应屏幕宽度+手机触屏滑动手机触屏滑动)

主要介绍了JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动),需要的朋友可以参考下

1、本文使用js+jQuery实现轮播图，需要引用jquery包，另种实现分别是animate实现自适应的轮播，以及transform平滑轮播

（在注释代码中）。

2、代码中的图片大家自己更换就可以了，样式和逻辑均写在js里。

3、html标签代码，js代码

//轮播箭头

//轮播图片

</ul>

</div>

$(document).ready(function() {

var len = $(".slider li").length-1;

//给slider设置样式

$(".slider").css({

"width":"100%",

"height": "inherit",

"overflow": "hidden",

"display":"inline-block"

});

//给ul设置宽度

$(".slides").css({

"position": "relative",

"width":((len+1)*100).toString()+"%",

"margin":"0",

"padding":"0"});

//给li设置百分比宽度

$(".slides li").css({

"width":(100/(len+1)).toString()+"%",

"float":"left"

});

//给图片设置宽度

$(".responsive").css({

"width":"100%",

"height":"inherit"

});

//控制点样式

$(".slider p").css({

"position": "absolute",

"z-index":"999",

"cursor": "pointer"

});

$(".slider .lastpic").css({

"left":"0",

"margin-top":"7%"

});

$(".slider .nextpic").css({

"right":"0",

"margin-top":"7%"

});

//animate移动

var i = 0;

$(".nextpic").click(function(){

moveNext(i);

});

$(".lastpic").click(function(){

moveLast(i);

});

//自动轮播

var timer = setInterval(function(){

moveNext(i);

},5000);

moveNext = function(n){

if(n==len){

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

weixin_38620893

粉丝: 4
资源: 888

会员权益专享

JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)

评论0

会员权益专享

最新资源

JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)

评论0

自适应全屏轮播图JS

支持手机触摸屏左右滑动的js轮播效果代码

自适应大小轮播图

js轮播图自适应屏幕大小

手机滑屏tab菜单自适应高度,菜单内容级联滑动(tab超过屏幕宽度可自动滑动)

el-carousel轮播图高度自适应

uniapp轮播图高度自适应

pyecharts自适应屏幕宽度

可以使用Bootstrap框架实现自适应轮播图

elementui导入的轮播图图片怎么自适应

uni-app 中 swiper 轮播图高度自适应

vue中elementui轮播图自适应

h5背景图片自适应屏幕

js+css 图片自动缩放自适应大小

css自适应屏幕大小

写一个轮播图前端代码，html+css+js,自动播放但鼠标选择图片时会静止，水平铺满页面，图片高度360，每一秒出现一张图片，且图片会自适应窗口，不变形，有选择前一张图片或后一张图片的功能，也能依次选择图片查看

h5 图片标点自适应屏幕 现成框架

echart图实现自适应屏幕大小

如何使element-plus的轮播图尺寸自适应网页

js页面自适应屏幕大小

会员权益专享

最新资源

h5 图片标点自适应屏幕现成框架