专栏首页前端资源SuperSlide轮播插件滚动高度或宽度不对的问题解决

SuperSlide轮播插件滚动高度或宽度不对的问题解决

SuperSlide 是一款比较实用的轮播插件,网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等都能实现,兼容包括 IE6 的绝大部分浏览器。

但是作者写的教程复杂难懂,有时需要摸索好久才能实现效果。

问题描述:

而且会存在一些问题,没有考虑到。今天就遇到一个问题,轮播的滚动距离出现偏移。

问题原因:

因为 SuperSlide 初始化后会自动计算(重置)li 的宽度和高度(左右滑动是宽度,上下滚动是高度)。所以 li 不能有 padding 属性值和 border 属性值。

注:有人说也不能有 margin 值,博主试了一下,设置 margin 好像没什么问题。

我给所有元素设置了怪异盒模型结构 box-sizing: border-box; 所以出现上面的偏移问题。

如果是标准盒模型,会是以下效果。

那么不给 li 设置边距,怎么调整它的样式呢?

解决办法:

我们可以在 li 标签内再套一个 div div 设置边距,这样就不会出现偏移问题了。

代码示例:

HTML:

<div class="slideTxtBox">
    <div class="bd">
        <ul>
            <li>
                <img src="banner1.jpg" alt="">
            </li>
            <li>
                <img src="banner2.jpg" alt="">
            </li>
            <li>
                <img src="banner3.jpg" alt="">
            </li>
            <li>
                <img src="banner4.jpg" alt="">
            </li>
        </ul>
    </div>
</div>

CSS:

.slideTxtBox{
    width: 700px;
    padding: 20px;
    border: 2px solid #0a67fb;
    overflow: hidden;
}
.slideTxtBox ul li{
    width: 200px;
    margin: 10px;
}
.slideTxtBox ul li div{
    height: 300px;
    padding: 10px;
    border-radius: 50px;
    overflow: hidden;
    height: 100%;
}
.slideTxtBox ul li img{
    width: 100%;
}

JS:

<script>
    jQuery(".slideTxtBox").slide({
        mainCell: ".bd ul",
        autoPage: true,
        effect: "left",
        autoPlay: true,
        vis: 3
    });
</script>

声明:本文由w3h5原创,转载请注明出处:《SuperSlide轮播插件滚动高度或宽度不对的问题解决》 https://www.w3h5.com/post/240.html

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 一个纯HTML+CSS写的下拉导航动画

    动画效果大概是鼠标放上去之后,从下往上慢慢提起来。比较重要是属性是“visibility”,才发现visibility可以这么用...

    德顺
  • Vue组件封装及引用,封装一个带参数的弹窗组件

    Vue 是一款国产的非常优秀的前端框架,官方的介绍是: Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。

    德顺
  • 一个tab切换的方法 siblings()

    项目中经常会用到 tab 切换功能,有的还会有一个 更多 按钮,我们可以用下面这个方法实现一个多功能的 tab 切换。

    德顺
  • 简单轮播图实现

    用户1749219
  • jQuery文档对象模型DOM的实际应用

    DOM 在 JavaScript 课程中我们详细的探讨过,它是一种文档对象模型。方便开发者对 HTML 结构元素内容进行展示和修改。在 JavaScript 中...

    祈澈菇凉
  • Jq实现简单的选项卡功能

    申霖
  • CSS笔记

    @import url(xx.css): 在一个css中,添加对其他css文件的引用

    tandaxia
  • 第8天:CSS制作导航栏

    今天主要学习了网页导航栏的制作。注意:引入外部CSS样式时,如果使用background:url(../images/1.png),一定记得用..跳出当前文件夹...

    半指温柔乐
  • CSS3与页面布局学习总结(三)——BFC、定位、浮动、7种垂直居中方法

    一、BFC与IFC 1.1、BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline For...

    张果
  • html+css学习笔记021-结业(静态网站布局-努比亚)

    Mr. 柳上原

扫码关注云+社区

领取腾讯云代金券