基础 - JS插件 - 轮播图

大图在小屏幕下居中显示的2个方案

方案1

背景图的center center

方案2

子绝父相  left:50%   margin-left:-width的一半

<!--#zw-carousel-->
<section id="zw-carousel" class="carousel slide" data-ride="carousel">
    <!--活动指示器-->
    <ol class="carousel-indicators">
        <li data-target="#zw-carousel" data-slide-to="0" class="active"></li>
        <li data-target="#zw-carousel" data-slide-to="1"></li>
        <li data-target="#zw-carousel" data-slide-to="2"></li>
    </ol>
    <!--轮播内容-->
    <div class="carousel-inner" role="listbox">
        <div class="item active" style="background-image: url(‘http://caifu.weijinsuo.com/showNewsImage.do?pic=14752860565672788.jpg‘)">
        </div>
        <div class="item" style="background-image: url(‘http://caifu.weijinsuo.com/showNewsImage.do?pic=14749742777184602.jpg‘)">
        </div>
        <div class="item" style="background-image: url(‘http://caifu.weijinsuo.com/showNewsImage.do?pic=14760008303724222.jpg‘)">
        </div>
    </div>
    <!--控制按钮-->
    <a href="#zw-carousel" class="left carousel-control" role="button" data-slide="prev">
    </a>
    <a href="#zw-carousel" class="right carousel-control" role="button" data-slide="next">
    </a>
</section>

  

#zw-carousel {

}
#zw-carousel .carousel-inner .item {
    height: 340px;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    background-size: cover;
}

  

  

时间: 2024-10-07 07:07:56

基础 - JS插件 - 轮播图的相关文章

封装一个简单的原生js焦点轮播图插件

轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放.本篇文章的主要目的是分享封装插件的思路. 轮播图的我一开始是写成非插件形式实现的效果,后来才改成了封装成插件的形式. 首先要明白轮播图的实现原理和基本布局,大概就是外面有一个容器包裹着(通常是div),容器设置宽高,以及overflow为hidden,超出宽高部分隐藏, 容器里面又包含着另一个容器,包裹着所有的图片,宽为所有图片的总宽度,ul的position为absolute,通过改变ul的left

js网站轮播图怎么做如何做?鸡哥教你简单制作效果炫酷

日了狗啦,刚刚鸡哥辛苦码了那么多字全丢了又要重新写,这是第二遍写了...今天鸡哥给小白写个不需要写js原生代码,只需要几个插件和一段通俗易懂得jquery代码就能搞定的轮播图,当然js原生代码写着也不算很繁琐,但是有些浪费时间,更何况很多人并不会用js直接写包括鸡哥,当年在学校还是研究过一段时间js的,当时还独自写了一个轮播图俘获了多少同班妹子的芳心,不过现在是基本废了,这东西要常写,不然忘的很快. 唉,本来还有妹子等着鸡哥呢,我这一大意文章丢了,重新写的话估计来不及了,先打个电话让妹子回家吧~

原生js简单轮播图 代码

在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用面向过程函数式编程去实现,相对于面向对象设计模式,代码难免会显得臃肿冗余.但没有面向对象的抽象却很适合新手理解与学习.已经在BAT的同学看到希望少喷点.另外可以多提意见. 轮播图的原理: 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过计算偏移量利用定时器实现自动播放,或通过

js实现轮播图效果(附源码)--原生js的应用

1.js实现轮播图效果 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="Author" content="奇客艺术"> <meta name="keyword" content="关键字"> <meta name=

js实现轮播图

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>轮播图</title> 6 <style type="text/css"> 7 *{ 8 margin: 0; 9 padding:0; 10 } 11 .carousel{ 12 margin:0 aut

JS原生轮播图

哈喽!我的朋友们,最近有一个新项目.所以一直没更新!有没有想我啊!! 今天咱们来说一下JS原生轮播图! 话不多说: 直接来代码吧:下面是CSS部分: 1 *{ 2 padding: 0px; 3 margin: 0px; 4 } 5 img{ 6 width: 500px; 7 height: 300px; 8 } 9 li{ 10 float: left; 11 } 12 ul{ 13 width: 2000px; 14 list-style: none; 15 position: absol

用原生js封装轮播图

原生js封装轮播图 对于初学js的同学来说,轮播图还是一个难点,尤其是原生js封装轮播图代码,下面是我之前做的一个轮播图项目中封装好的一些代码,有需要的同学可以看一下,有什么不懂的可以看注释,注释看不懂的可以直接私信我 slide.js /* * 轮播图 */ function Slide(elem, ms, d, ind){ this.el = elem; this.w = parseInt(getStyle(elem, "width")); this.h = parseInt(ge

手把手原生js简单轮播图

在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用面向过程函数式编程去实现,相对于面向对象设计模式,代码难免会显得臃肿冗余.但没有面向对象的抽象却很适合新手理解与学习.已经在BAT的同学看到希望少喷点.另外可以多提意见. 轮播图的原理: 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过计算偏移量利用定时器实现自动播放,或通过

自己定义jquery插件轮播图

轮播图-html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible&