图片文字滚动插件jQuery Scrollbox特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是图片文字滚动插件jQuery Scrollbox特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片文字滚动插件jQuery Scrollbox</title>
<link href="css/zzsc.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="container">
  <div class="masthead">
    <h1 class="muted">jQuery Scrollbox</h1>
  </div>
  <div class="body-content">
    <h2>Example - 1</h2>
    <pre>
$('#demo1').scrollbox();</pre>
    <div id="demo1" class="scroll-text">
      <ul>
<li><a href="#?jquery/2589.html" target="_blank">jquery轻量级上下(左右)滚动条插件及使用方法</a></li>
<li><a href="#?tab/2588.html" target="_blank">jquery多图tab标签切换焦点图</a></li>
<li><a href="#?jquery/2587.html" target="_blank">jquery鼠标悬停动态显示按钮效果</a></li>
<li><a href="#?banner/2586.html" target="_blank">js模拟淘宝首页缓冲幻灯片效果</a></li>
<li><a href="#?ads/2585.html" target="_blank">js模拟土豆官网右下角广告导航菜单</a></li>
<li><a href="#?others/2584.html" target="_blank">js模拟QQ震动效果</a></li>
<li><a href="#?nav/2583.html" target="_blank">天猫官方网站左侧二级导航菜单</a></li>
<li><a href="#?jquery/2582.html" target="_blank">jquery自定义鼠标滚动条样式</a></li>
<li><a href="#?jquery/2581.html" target="_blank">跟随鼠标在图片之间不断切换的透明遮罩效果</a></li>
      </ul>
    </div>

    <h2>Example - 2</h2>
    <pre>$('#demo2').scrollbox({
  linear: true,
  step: 1,
  delay: 0,
  speed: 100
});</pre>
    <div id="demo2" class="scroll-text">
      <ul>
<li><a href="#?jquery/2589.html" target="_blank">jquery轻量级上下(左右)滚动条插件及使用方法</a></li>
<li><a href="#?tab/2588.html" target="_blank">jquery多图tab标签切换焦点图</a></li>
<li><a href="#?jquery/2587.html" target="_blank">jquery鼠标悬停动态显示按钮效果</a></li>
<li><a href="#?banner/2586.html" target="_blank">js模拟淘宝首页缓冲幻灯片效果</a></li>
<li><a href="#?ads/2585.html" target="_blank">js模拟土豆官网右下角广告导航菜单</a></li>
<li><a href="#?others/2584.html" target="_blank">js模拟QQ震动效果</a></li>
<li><a href="#?nav/2583.html" target="_blank">天猫官方网站左侧二级导航菜单</a></li>
<li><a href="#?jquery/2582.html" target="_blank">jquery自定义鼠标滚动条样式</a></li>
<li><a href="#?jquery/2581.html" target="_blank">跟随鼠标在图片之间不断切换的透明遮罩效果</a></li>
      </ul>
    </div>

    <h2>Example - 3</h2>
    <pre>$('#demo3').scrollbox({
  switchItems: 5,
  distance: 142
});
</pre>
    <div id="demo3" class="scroll-img">
      <ul>
        <li><a href="#?"><img src="images/normal_234.png"></a></li>
        <li><a href="#?"><img src="images/normal_485.png"></a></li>
        <li><a href="#?"><img src="images/normal_511.png"></a></li>
        <li><a href="#?"><img src="images/normal_725.png"></a></li>
        <li><a href="#?"><img src="images/normal_840.png"></a></li>
        <li><a href="#?"><img src="images/normal_934.png"></a></li>
        <li><a href="#?"><img src="images/normal_1295.png"></a></li>
        <li><a href="#?"><img src="images/normal_1459.png"></a></li>
        <li><a href="#?"><img src="images/normal_1590.png"></a></li>
        <li><a href="#?"><img src="images/normal_1688.png"></a></li>
        <li><a href="#?"><img src="images/normal_3206.png"></a></li>
        <li><a href="#?"><img src="images/normal_3810.png"></a></li>
        <li><a href="#?"><img src="images/normal_5176.png"></a></li>
        <li><a href="#?"><img src="images/normal_6861.png"></a></li>
        <li><a href="#?"><img src="images/normal_7004.png"></a></li>
      </ul>
    </div>

    <h2>Example - 4</h2>
    <pre>$('#demo4').scrollbox({
  direction: 'h',
  switchItems: 5,
  distance: 670
});
</pre>
    <div id="demo4" class="scroll-img">
      <ul>
        <li><a href="#?"><img src="images/normal_234.png"></a></li>
        <li><a href="#?"><img src="images/normal_485.png"></a></li>
        <li><a href="#?"><img src="images/normal_511.png"></a></li>
        <li><a href="#?"><img src="images/normal_725.png"></a></li>
        <li><a href="#?"><img src="images/normal_840.png"></a></li>
        <li><a href="#?"><img src="images/normal_934.png"></a></li>
        <li><a href="#?"><img src="images/normal_1295.png"></a></li>
        <li><a href="#?"><img src="images/normal_1459.png"></a></li>
        <li><a href="#?"><img src="images/normal_1590.png"></a></li>
        <li><a href="#?"><img src="images/normal_1688.png"></a></li>
        <li><a href="#?"><img src="images/normal_3206.png"></a></li>
        <li><a href="#?"><img src="images/normal_3810.png"></a></li>
        <li><a href="#?"><img src="images/normal_5176.png"></a></li>
        <li><a href="#?"><img src="images/normal_6861.png"></a></li>
        <li><a href="#?"><img src="images/normal_7004.png"></a></li>
      </ul>
    </div>
  </div>

    <h2>Example - 5</h2>
    <pre>$('#demo5').scrollbox({
  direction: 'h',
  distance: 140
});
$('#demo5-backward').click(function () {
  $('#demo5').trigger('backward');
});
$('#demo5-forward').click(function () {
  $('#demo5').trigger('forward');
});</pre>
    <div id="demo5" class="scroll-img">
      <ul>
        <li><a href="#?"><img src="images/normal_234.png"></a></li>
        <li><a href="#?"><img src="images/normal_485.png"></a></li>
        <li><a href="#?"><img src="images/normal_511.png"></a></li>
        <li><a href="#?"><img src="images/normal_725.png"></a></li>
        <li><a href="#?"><img src="images/normal_840.png"></a></li>
        <li><a href="#?"><img src="images/normal_934.png"></a></li>
        <li><a href="#?"><img src="images/normal_1295.png"></a></li>
        <li><a href="#?"><img src="images/normal_1459.png"></a></li>
        <li><a href="#?"><img src="images/normal_1590.png"></a></li>
        <li><a href="#?"><img src="images/normal_1688.png"></a></li>
        <li><a href="#?"><img src="images/normal_3206.png"></a></li>
        <li><a href="#?"><img src="images/normal_3810.png"></a></li>
        <li><a href="#?"><img src="images/normal_5176.png"></a></li>
        <li><a href="#?"><img src="images/normal_6861.png"></a></li>
        <li><a href="#?"><img src="images/normal_7004.png"></a></li>
      </ul>
    </div>
    <div id="demo5-btn" class="text-center">
      <button class="btn" id="demo5-backward"><i class="icon-chevron-left"></i> Backward</button>
      <button class="btn" id="demo5-forward">Forward <i class="icon-chevron-right"></i></button>
    </div>
  </div>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.scrollbox.js"></script>
<script>
$(function () {
  $('#demo1').scrollbox();
  $('#demo2').scrollbox({
    linear: true,
    step: 1,
    delay: 0,
    speed: 100
  });
  $('#demo3').scrollbox({
    switchItems: 5,
    distance: 144
  });
  $('#demo4').scrollbox({
    direction: 'h',
    switchItems: 5,
    distance: 670
  });
  $('#demo5').scrollbox({
    direction: 'h',
    distance: 134
  });
  $('#demo5-backward').click(function () {
    $('#demo5').trigger('backward');
  });
  $('#demo5-forward').click(function () {
    $('#demo5').trigger('forward');
  });
});
</script>
</body>
</html>

JS代码(jquery.scrollbox.js):

/*! * jQuery Scrollbox * (c) 2009-2013 Hunter Wu <hunter.wu@gmail.com> * MIT Licensed. * * http://github.com/wmh/jquery-scrollbox */
(function($){
	$.fn.scrollbox = function(config){
	//default config var defConfig ={
	linear:false,// Scroll method startDelay:2,// Start delay (in seconds) delay:3,// Delay after each scroll event (in seconds) step:5,// Distance of each single step (in pixels) speed:32,// Delay after each single step (in milliseconds) switchItems:1,// Items to switch after each scroll event direction:'vertical',distance:'auto',autoPlay:true,onMouseOverPause:true,paused:false,queue:null}
;
	config = $.extend(defConfig,config);
	config.scrollOffset = config.direction === 'vertical' ? 'scrollTop':'scrollLeft';
	if (config.queue){
	config.queue = $('#' + config.queue);
}
return this.each(function(){
	var container = $(this),containerUL,scrollingId = null,nextScrollId = null,paused = false,backward,forward,resetClock,scrollForward,scrollBackward;
	if (config.onMouseOverPause){
	container.bind('mouseover',function(){
	paused = true;
}
);
	container.bind('mouseout',function(){
	paused = false;
}
);
}
containerUL = container.children('ul:first-child');
	scrollForward = function(){
	if (paused){
	return;
}
var curLi,i,newScrollOffset,scrollDistance,theStep;
	curLi = containerUL.children('li:first-child');
	scrollDistance = config.distance !== 'auto' ? config.distance:config.direction === 'vertical' ? curLi.height():curLi.width();
	// offset if (!config.linear){
	theStep = Math.max(3,parseInt((scrollDistance - container[0][config.scrollOffset]) * 0.3,10));
	newScrollOffset = Math.min(container[0][config.scrollOffset] + theStep,scrollDistance);
}
else{
	newScrollOffset = Math.min(container[0][config.scrollOffset] + config.step,scrollDistance);
}
container[0][config.scrollOffset] = newScrollOffset;
	if (newScrollOffset >= scrollDistance){
	for (i = 0;
	i < config.switchItems;
	i++){
	if (config.queue && config.queue.hasChildNodes() && config.queue.getElementsByTagName('li').length > 0){
	containerUL.append(config.queue.getElementsByTagName('li')[0]);
	containerUL.remove(containerUL.children('li:first-child'));
}
else{
	containerUL.append(containerUL.children('li:first-child'));
}
}
container[0][config.scrollOffset] = 0;
	clearInterval(scrollingId);
	if (config.autoPlay){
	nextScrollId = setTimeout(forward,config.delay * 1000);
}
}
}
;
	// Backward // 1. If forwarding,then reverse // 2. If stoping,then backward once scrollBackward = function(){
	if (paused){
	return;
}
var curLi,i,liLen,newScrollOffset,scrollDistance,theStep;
	// init if (container[0][config.scrollOffset] === 0){
	liLen = containerUL.children('li').length;
	for (i = 0;
	i < config.switchItems;
	i++){
	containerUL.children('li:last-child').insertBefore(containerUL.children('li:first-child'));
}
curLi = container.children('li:first-child');
	scrollDistance = config.distance !== 'auto' ? config.distance:config.direction === 'vertical' ? curLi.height():curLi.width();
	container[0][config.scrollOffset] = scrollDistance;
}
// new offset if (!config.linear){
	theStep = Math.max(3,parseInt(container[0][config.scrollOffset] * 0.3,10));
	newScrollOffset = Math.max(container[0][config.scrollOffset] - theStep,0);
}
else{
	newScrollOffset = Math.max(container[0][config.scrollOffset] - config.step,0);
}
container[0][config.scrollOffset] = newScrollOffset;
	if (newScrollOffset === 0){
	clearInterval(scrollingId);
	if (config.autoPlay){
	nextScrollId = setTimeout(forward,config.delay * 1000);
}
}
}
;
	forward = function(){
	clearInterval(scrollingId);
	scrollingId = setInterval(scrollForward,config.speed);
}
;
	backward = function(){
	clearInterval(scrollingId);
	scrollingId = setInterval(scrollBackward,config.speed);
}
;
	resetClock = function(delay){
	config.delay = delay || config.delay;
	clearTimeout(nextScrollId);
	if (config.autoPlay){
	nextScrollId = setTimeout(forward,config.delay * 1000);
}
}
;
	if (config.autoPlay){
	nextScrollId = setTimeout(forward,config.startDelay * 1000);
}
// bind events for container container.bind('resetClock',function(delay){
	resetClock(delay);
}
);
	container.bind('forward',function(){
	clearTimeout(nextScrollId);
	forward();
}
);
	container.bind('backward',function(){
	clearTimeout(nextScrollId);
	backward();
}
);
	container.bind('speedUp',function(speed){
	if (typeof speed === 'undefined'){
	speed = Math.max(1,parseInt(config.speed / 2,10));
}
config.speed = speed;
}
);
	container.bind('speedDown',function(speed){
	if (typeof speed === 'undefined'){
	speed = config.speed * 2;
}
config.speed = speed;
}
);
}
);
}
;
}
(jQuery));

CSS代码(zzsc.css):

*{margin:0;padding:0;}
ul,li{list-style:none;}
img{border:none;}
body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:12px;line-height:20px;color:#333;background-color:#fff;padding-bottom:100px;}
pre{display:block;padding:9.5px;margin:0 0 10px;font-size:13px;line-height:20px;word-break:break-all;word-wrap:break-word;white-space:pre;white-space:pre-wrap;background-color:#f5f5f5;border:1px solid #ccc;border:1px solid rgba(0,0,0,0.15);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}
.container{margin:0 auto;width:940px;}
a{color:#0088CC;text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2{padding-top:20px;}
.scroll-text{border:1px solid red;width:400px;height:4.5em;overflow:hidden;padding:3px;}
.scroll-text ul{width:800px;height:100px;overflow:hidden;margin:0;}
.scroll-text ul li{height:1.5em;}
.scroll-img{border:1px solid red;width:680px;height:142px;overflow:hidden;font-size:0;}
.scroll-img ul{width:700px;height:600px;margin:0;}
.scroll-img ul li{display:inline-block;margin:10px 0 10px 10px;}
#demo4.scroll-img ul,#demo5.scroll-img ul{width:1500px;}
#demo5-btn{width:680px;padding-top:10px;}

附件:下载该文件资源,减少时间成本(增值服务)