图片轮播效果如何制作

支持图片动态追加,类似Swiper.js的效果

FineReport Nusg 发布于 2022-5-30 20:41
1min目标场景问卷 立即参与
回答问题
悬赏:3 F币 + 添加悬赏
提示:增加悬赏、完善问题、追问等操作,可使您的问题被置顶,并向所有关注者发送通知
共3回答
最佳回答
0
NusgLv2见习互助
发布于2022-6-14 22:02

引用swiper.js实现

最佳回答
0
好好生活好好学习Lv7资深互助
发布于2022-5-30 20:43

试试这个:

首先定义一个绝对画布块,添加初始化事件

setTimeout(function() {  

    var imgs = [

    {img:"\/webroot\/help\/picture\/gyzp\/1.jpeg"

     ,a:"#"}

     ,{img:"\/webroot\/help\/picture\/gyzp\/2.jpeg"

     ,a:"#"}

     ,{img:"\/webroot\/help\/picture\/gyzp\/3.jpeg"

     ,a:"#"}

     ,{img:"\/webroot\/help\/picture\/gyzp\/4.jpeg"

     ,a:"#"}

     ,{img:"\/webroot\/help\/picture\/gyzp\/5.jpeg"

     ,a:"#"}

     ];

 var width =$("div[widgetname='ABSOLUTE0']").css("width");

 var height =$("div[widgetname='ABSOLUTE0']").css("height");

 

 $("div[widgetname='ABSOLUTE0']").slider({

            imgList:imgs, //图片的列表

            width: width, //图片的宽

            height: height, //图片的高

            isAuto: true, //是否自动轮播

            moveTime: 2000, //运动时间

            direction: 'right', //轮播的方向

            btnWidth: 30, //按钮的宽

            btnHeight: 30, //按钮的高

            spanWidth: 10, //span按钮的宽

            spanHeight: 10, //span按钮的高

            spanColor: '#fff', //span按钮的颜色

            activeSpanColor: 'red', //选中的span颜色

            btnBackgroundColor: 'rgba(0, 0, 0, 0.3)', //两侧按钮的颜色

            spanRadius: '50%', //span按钮的圆角程度

            spanMargin: 3, //span之间的距离

        });

    $(".right-btn").css("display","none");

    $(".left-btn").css("display","none");

    

},  

20);

然后将这个js文件放在你的工程help下的CSS文件夹下

pmlbt.js

决策报表如果要引用 js的话在body初始化后事件中写上js

setTimeout(function() {

var link1=

'<script src="../../help/pmlbt.js"></script>'

$("head").append(link1);

},200);

图片的轮播 - 帆软社区 (fanruan.com)

最佳回答
0
追心Lv6初级互助
发布于2022-5-31 09:39(编辑于 2022-5-31 09:40)
  • 3关注人数
  • 556浏览人数
  • 最后回答于:2022-6-14 22:02
    请选择关闭问题的原因
    确定 取消
    返回顶部