支持左右和上下拖动的jquery图片不间断轮播

所属分类:UI,其他,媒体-滚动,独立的部件,滑块和旋转

 4649  91  查看评论 (6)
支持左右和上下拖动的jquery图片不间断轮播 ie兼容6

插件说明

jquery.limarquee是一款非常实用的支持任何DOM元素的jQuery跑马灯插件。该跑马灯插件可以制作水平文字滚动,垂直文字滚动,HTML元素滚动,图片滚动效果,甚至还可以从XML文件中读取数据来制作跑马灯效果。

使用方法

 HTML结构

该跑马灯特效最基本的HTML结构是使用一个<div>来包裹需要滚动的文字。

<div class="str1 str_wrap">
  ...... 
</div>

初始化插件

在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该跑马灯插件。

$(window).load(function(){
  $('.str1').liMarquee();
});

 配置参数

下面是该跑马灯插件的一些可用配置参数。

  • direction:跑马灯运动的方向,可选值有:left,right,up和down。

  • drag:是否可以使用鼠标来拖拽文本。

  • hoverstop:是否在鼠标滑过时暂停文本的播放。

  • xml:从XML文本中获取跑马灯的文本。

  • scrollamount:跑马灯的滚动速度。

 API

暂停和播放

可以使用下面的方法来暂停和继续播放跑马灯。

$('.str6').liMarquee('pause');
$('.str6').liMarquee('play');

销毁和更新

$('.str').liMarquee();
$('.destroyBtn').on('click',function(){
  $('.str').liMarquee('destroy');
  return false;
})
$('.updateBtn').on('click',function(){
  $('.str').liMarquee('update');
  return false;
})

使用HTML元素作为跑马灯

例如使用一组<span>元素作为跑马灯。

<div class="str str_wrap">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
    <span>7</span>
    <span>8</span>
    <span>9</span>
    <span>0</span>
</div>

为这些<span>元素设置一些基本样式。

.str { background:none !important;}
.str span { 
  border:5px solid #ccc;
  background:#f1f1f1; 
  color:#999; 
  margin:0 5px; 
  text-align:center; 
  font:40px/100px Arial, Helvetica, sans-serif; 
  width:100px; 
  height:100px; 
  display:inline-block; 
  vertical-align:top;
 }

然后通过下面的方法来初始化跑马灯。

$('.str').liMarquee();

使用图片作为跑马灯

使用图片作为跑马灯和使用HTML元素作为跑马灯的方法基本相同。它的HTML结构如下:

<div class="str str_wrap">
    <a href="#"><img src="img/1.jpg"></a>
    <a href="#"><img src="img/2.jpg"></a>
    <a href="#"><img src="img/3.jpg"></a>
    ...
</div>

初始化图片跑马灯。

$('.str').liMarquee();
相关插件-滚动,独立的部件,滑块和旋转

jquery.mousewheel.js鼠标滚动插件

鼠标全屏滚动插件
  滚动
 8321  50

jquery整屏滚动插件Scrollify

Scrollify是一个jQuery插件,协助整屏滚动和顺利拍摄部分。完全可配置和优化。
  滚动
 54097  226

导航滚动条向上滚动出现向下隐藏

不是头部的导航条,下拉隐藏,上拉出现
  滚动
 15093  43

滚动弹出顶部导航插件headhesive.js

headhesive.js创建一个按需显示头部。指定当你浏览器滚动到某个位置时显示。
  滚动
 13462  71

讨论这个项目(6)回答他人问题或分享插件使用方法奖励jQ币

    BoFullOfdreams 0
    2017/9/11 13:35:30

    怎么加个左右按钮

    回复
    Sun. 0
    2017/8/30 14:31:29
    请问怎么实现触摸屏滑动功能!只有拖动功能!急急急!!! 回复
    小烦恼 0
    2017/8/10 18:13:04

    满足大部分需求,考虑的也很周到

    回复
    →_→在工作 0
    2017/6/7 17:13:29
    清玉冰影 0
    2017/4/14 14:28:51
    秦时明月? 0
    2017/4/14 10:10:24

    居然是俄罗斯的插件,不过效果真心可以,好评!!!

    回复
取消回复