anoSlide演示8种焦点图轮播效果

anoSlide演示8种焦点图轮播效果

anoslide是一款可调节效果至任意宽度大小,支持图文混合内容显示的图片轮播插件。

淘建站为您提供更多_图片代码_广告_轮播_焦点图,在此特别感谢您对我们的支持与厚爱!

查看演示

演示不了,点击反馈

加入收藏

下载 254 次

下载资源

42 积分

特别说明:本站资源来自网友发布分享,仅供学习与参考,请勿用于商业用途,若有侵权请联系删除(272966172@qq.com)。
分类:图片代码 > 广告 难易程度:初级

HTML

首先我们在.carousel放置多个图片列表、上一页和下一页按钮。

<div class="carousel">
    <a class="prev"></a>
    <ul>
        <li><a href="javascript:"><img src="images/slides/1.jpg"></a></li>
        <li><a href="javascript:"><img src="images/slides/2.jpg"></a></li>
        ......
    </ul>
    <a class="next"></a>
</div>

引入jQuery插件和anoslide.js

<script src="jquery.js"></script>
<script src="js/jquery.anoslide.js"></script>

调用anoSlide插件:

$(function() {
    $('.carousel ul').anoSlide( {
	items: 1, speed: 500, prev: 'a.prev', next: 'a.next' 
    });
});
参数 描述 默认值
items 幻灯片每页可见个数 5
speed 幻灯片切换速度,以毫秒为单位 1000
auto 自动播放,值为一个整数,表示多久自动切换一次,单位为毫秒,0 表示不自动播放 0
autoStop 鼠标悬停停止自动播放 true
next 为“下一个”绑定一个选择器 空
prev 为“上一个”绑定一个选择器 空
responsiveAt 强制显示1个幻灯片,适用于较小的视口,如移动设备 480
delay 动画延迟,0 表示不延迟 0
lazy 图片延迟加载 false
onConstruct 初始化后的回调函数,可传递参数: instance – Instance of anoSlide 空
onStart 切换之前的回调函数,可传递参数: ui.instance – Instance of anoSlideui.index – Number of current slideui.slide – Current slideui.slide.element – Current slide element 空
onEnd 切换之后的回调函数,可传递参数: ui.instance – Instance of anoSlide ui.index – Number of current slideui.slide – Current slideui.slide.element – Current slide element 空

声明:本资料由淘建站会员提供,如转载注明来源,资料来源淘建站免费素材库:https://www.taojz.cn/texiao/231.html
anoSlide演示8种焦点图轮播效果 希望对你有帮助,感谢您的支持!
  • ck-slide淡入淡出效果的图片轮播插件

    ck-slide淡入淡出效果的图片轮播插件

  • jQuery+multiscroll鼠标滚动全屏图

    jQuery+multiscroll鼠标滚动全屏图

  • parallaxSlider - 立体相册插件

    parallaxSlider - 立体相册插件

  • jQuery+Owl Carousel仿百度百科2014图片轮播

    jQuery+Owl Carousel仿百度百科2014图片轮播

  • FlexSlider新浪高清图集焦点图轮播

    FlexSlider新浪高清图集焦点图轮播

  • skippr演示7种不同的幻灯片效果

    skippr演示7种不同的幻灯片效果

  • slick淡入淡出的焦点图

    slick淡入淡出的焦点图

  • owlCarousel足球世界杯焦点轮播效果

    owlCarousel足球世界杯焦点轮播效果

  • tabslet制作世界杯时间轴幻灯片

    tabslet制作世界杯时间轴幻灯片

  • OwlCarousel演示10种不同的调用方法

    OwlCarousel演示10种不同的调用方法

  • OwlCarousel足球世界杯轮播效果

    OwlCarousel足球世界杯轮播效果

  • Flickerplate演示5种幻灯片轮播效果

    Flickerplate演示5种幻灯片轮播效果

  • 留言(0)
    头像
     阿里云限量代金券,戳我领取
    1 2