图片逐张滚动插件

最新推荐文章于 2025-06-10 15:37:44 发布

cztflove

最新推荐文章于 2025-06-10 15:37:44 发布

阅读量387

点赞数

分类专栏：插件收集文章标签：插件

插件收集专栏收录该内容

2 篇文章

订阅专栏

本文展示了两个实用的网页图片展示效果案例：一是使用jQuery实现的水平滑动图片展示；二是采用bxSlider插件创建的响应式轮播图效果。两个案例均提供了完整的HTML结构、CSS样式及必要的JavaScript代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery Scrollbox

演示网址

html结构：

<div id="demo" class="scroll-img">
    <ul>
      <li><a href="#"><img src="images/1.jpg"></a></li>
      <li><a href="#"><img src="images/2.jpg"></a></li>
      <li><a href="#"><img src="images/3.jpg"></a></li>
      <li><a href="#"><img src="images/4.jpg"></a></li>
      <li><a href="#"><img src="images/5.jpg"></a></li>
      <li><a href="#"><img src="images/6.jpg"></a></li>
      <li><a href="#"><img src="images/7.jpg"></a></li>
      <li><a href="#"><img src="images/8.jpg"></a></li>              
    </ul>
</div>

css

.scroll-img{
    margin: 0 auto;
    width: 860px;  //滚动列表的可视宽度
    overflow: hidden;
}
#demo ul{
    padding: 0;
    width: 2800px;
    list-style: none;
}

#demo li{
    margin: 0 9px; 
    width: 196px;
    display: inline-block;
}
#deom li img{
    width: 100%;
}

支持响应式的bxSlider

演示网址

html结构：

<div class="slider1">
    <div class="slide"><img src="images/1.png"></div>
    <div class="slide"><img src="images/2.png"></div>
    <div class="slide"><img src="images/3.png"></div>
    <div class="slide"><img src="images/4.png"></div>
    <div class="slide"><img src="images/5.png"></div>
    <div class="slide"><img src="images/6.png"></div>
    <div class="slide"><img src="images/7.png"></div>
    <div class="slide"><img src="images/8.png"></div>
    <div class="slide"><img src="images/9.png"></div> 
</div>

js使用

 $('.slider1').bxSlider({
        slideWidth: 200,
        minSlides: 2,
        maxSlides: 3,
        moveSlides: 1,
        slideMargin: 10
        ...
});