Fatal编程技术网
  • jquery/
  • Jquery 如何控制尾波滑块上的滚动方向？

Jquery 如何控制尾波滑块上的滚动方向？

jquery html css

Jquery 如何控制尾波滑块上的滚动方向？,jquery,html,css,coda-slider,Jquery,Html,Css,Coda Slider,我有一个尾波滑块，无法确定滚动的方向。我有3个面板，我想从左向右滚动。有时从左向右滚动，有时上下滚动，有时水平滚动 我怎样才能把它锁定到我想要的方向 以下是HTML： <body> <div id="slider_home" class="round_10px"> <ul class="navigation_home"> <li><a href="#scroll_Parents" class="round_10px">Infor

我有一个尾波滑块，无法确定滚动的方向。我有3个面板，我想从左向右滚动。有时从左向右滚动，有时上下滚动，有时水平滚动

我怎样才能把它锁定到我想要的方向

以下是HTML：

<body>
 <div id="slider_home" class="round_10px">
 <ul class="navigation_home">
  <li><a href="#scroll_Parents" class="round_10px">Information For Parents</a></li>
  <li><a href="#scroll_Materials" class="round_10px">Print Materials</a></li>
  <li><a href="#scroll_Resources" class="round_10px">Online Resources</a></li>
 </ul>  
  <div id="scroll_bg_home">
   <div class="scroll_home">
    <div class="scrollContainer_home">
     <div class="panel_home" id="scroll_Parents">
                                      content
     </div>
     <div class="panel_home" id="scroll_Materials">
                                      content
     </div>
     <div class="panel_home" id="scroll_Resources">
                                      content
     </div>
    </div>
   </div>
  </div>
 </div>
</body>
以下是Jquery包含文件：

// when the DOM is ready...
$(document).ready(function () {

var $panels = $('#slider_home .scrollContainer_home > div.panel_home');
var $container = $('#slider_home .scrollContainer_home');

// if true, we'll float all the panels left and fix the width 
// of the container
var horizontal = true;

// float the panels left if we're going horizontal
if (horizontal) {
  $panels.css({
    'float' : 'left',
    'position' : 'relative' // IE fix to ensure overflow is hidden
  });

  // calculate a new width for the container (so it holds all panels)
  $container.css('width', $panels[0].offsetWidth * $panels.length);
}

// collect the scroll object, at the same time apply the hidden overflow
// to remove the default scrollbars that will appear
var $scroll_bg = $('#scroll_bg_home');
var $scroll = $('#slider_home .scroll_home').css('overflow', 'hidden');

// apply our left + right buttons
$scroll_bg
  .before('<img class="scrollButtons_home left" src="styles/images/BackFlip.jpg" />')
  .after('<img class="scrollButtons_home right" src="styles/images/flipForward.jpg" />');

// handle nav selection
function selectNav() {
  $(this)
    .parents('ul:first')
      .find('a')
        .removeClass('selected')
      .end()
    .end()
    .addClass('selected');
}

$('.navigation_home').find('a').click(selectNav);

// go find the navigation link that has this target and select the nav
function trigger(data) {
  var el = $('.navigation_home').find('a[href$="' + data.id + '"]').get(0);
  selectNav.call(el);
}

if (window.location.hash) {
  trigger({ id : window.location.hash.substr(1) });
} else {
  $('.navigation_home a:first').click();
}

// offset is used to move to *exactly* the right place, since I'm using
// padding on my example, I need to subtract the amount of padding to
// the offset.  Try removing this to get a good idea of the effect
var offset = parseInt((horizontal ? 
  $container.css('paddingTop') : 
  $container.css('paddingLeft')) 
  || 0) * -1;


var scrollOptions = {
  target: $scroll, // the element that has the overflow

  // can be a selector which will be relative to the target
  items: $panels,

  navigation: '.navigation_home a',

  // selectors are NOT relative to document, i.e. make sure they're unique
  prev: 'img.left', 
  next: 'img.right',

  // allow the scroll effect to run both directions
  axis: 'xy',

  onAfter: trigger, // our final callback

  offset: offset,

  // duration of the sliding effect
  duration: 500,

  // easing - can be used with the easing plugin: 
  // http://gsgd.co.uk/sandbox/jquery/easing/
  easing: 'swing'
};

// apply serialScroll to the slider - we chose this plugin because it 
// supports// the indexed next and previous scroll along with hooking 
// in to our navigation.
$('#slider_home').serialScroll(scrollOptions);

// now apply localScroll to hook any other arbitrary links to trigger 
// the effect
$.localScroll(scrollOptions);

// finally, if the URL has a hash, move the slider in to position, 
// setting the duration to 1 because I don't want it to scroll in the
// very first page load.  We don't always need this, but it ensures
// the positioning is absolutely spot on when the pages loads.
scrollOptions.duration = 1;
$.localScroll.hash(scrollOptions);

});

//当DOM就绪时。。。
$（文档）.ready（函数（）{
var$panels=$（“#slider_home.scrollContainer_home>div.panel_home”）；
var$container=$（“#slider_home.scrollContainer_home”）；
//如果为真，我们将浮动所有面板并固定宽度
//货柜
var水平=真；
//如果我们水平移动，请将面板向左浮动
如果（水平）{
$panels.css({
‘float’：‘left’，
'position'：'relative'//IE修复以确保溢出被隐藏
});
//计算容器的新宽度（使其容纳所有面板）
$container.css（'width'，$panels[0].offsetWidth*$panels.length）；
}
//收集滚动对象，同时应用隐藏溢出
//删除将显示的默认滚动条
变量$scroll_bg=$（“#scroll_bg_home”）；
var$scroll=$（'#slider_home.scroll_home'）.css（'overflow'，'hidden'）；
//应用我们的左+右按钮
$scroll\u bg
.之前（“”）
.在（''）之后；
//操纵导航选择
函数selectNav（）{
$（本）
.父母（‘ul:第一’）
.find（'a'））
.removeClass（'选定'）
(完)
(完)
.addClass（“选定”）；
}
$（'navigation_home'）。查找（'a'）。单击（选择导航）；
//找到具有此目标的导航链接并选择导航
功能触发器（数据）{
var el=$（'.navigation_home'）.find（'a[href$=“'+data.id+'”）.get（0）；
选择导航呼叫（el）；
}
if（window.location.hash）{
触发器（{id:window.location.hash.substr（1）}）；
}否则{
$（'.navigation_home a:first'）。单击（）；
}
//偏移量用于移动到*恰好*正确的位置，因为我使用
//填充在我的示例中，我需要减去填充的数量以
//偏移量。请尝试删除此项以了解效果
var offset=parseInt（（水平？
$container.css（'paddingTop'）：
$container.css（'paddingLeft'））
|| 0) * -1;
变量滚动选项={
target:$scroll，//具有溢出的元素
//可以是相对于目标的选择器
项目：$小组，
导航：'.navigation_home a'，
//选择器与文档无关，即确保它们是唯一的
上一句：“img.left”，
下一个：“img.right”，
//允许滚动效果双向运行
轴：“xy”，
onAfter:trigger，//我们的最终回调
抵销：抵销，
//滑动效应的持续时间
持续时间：500，
//放松-可与放松插件一起使用：
// http://gsgd.co.uk/sandbox/jquery/easing/
放松：“摇摆”
};
//将serialScroll应用于滑块-我们选择此插件是因为它
//支持//索引的下一个和上一个滚动以及挂钩
//在我们的导航中。
$（“#滑块_home”）.serialScroll（滚动选项）；
//现在应用localScroll钩住任何其他任意链接以触发
//效果
$.localScroll（滚动选项）；
//最后，如果URL有散列，请将滑块移动到位置，
//将持续时间设置为1，因为我不希望它在
//第一页加载。我们并不总是需要这个，但它可以确保
//页面加载时，位置绝对准确。
scrollOptions.duration=1；
$.localScroll.hash（滚动选项）；
});
你还在寻找答案吗

不管怎样，我想我能帮你。 如果您使用的是Coda Slide的最新稳定版本（3.0），请按照以下步骤操作：

  • 转到放置.js文件的地方，找到“jQuery.coda-slider-3.0.js”
  • 打开此文件并转到第374行或搜索“
    $.fn.codaSlider.options
    ”，这是第二个结果）
  • 现在，将选项“autoSliderDirection:'right'”编辑到所需的方向

    • 按照，您可以为幻灯片设置和修改此选项：

          autoHeight: true,
      autoHeightEaseDuration: 1500,
      autoHeightEaseFunction: "easeInOutExpo",
      autoSlide: false,
      autoSliderDirection: 'right',
      autoSlideInterval: 7000,
      autoSlideControls: false,
      autoSlideStartText: 'Start',
      autoSlideStopText: 'Stop',
      autoSlideStopWhenClicked: true,
      continuous: true,
      dynamicArrows: true,
      dynamicArrowsGraphical: false,
      dynamicArrowLeftText: "&#171; left",
      dynamicArrowRightText: "right &#187;",
      dynamicTabs: true,
      dynamicTabsAlign: "center",
      dynamicTabsPosition: "top",
      firstPanelToLoad: 1,
      panelTitleSelector: "h2.title",
      slideEaseDuration: 1500,
      slideEaseFunction: "easeInOutExpo"
    希望我能帮助你。如果是，请给我反馈：）

    您是否使用尾波滑块插件？或者您只使用SerialScroll？因为SerialScroll是一个从一个任意元素滚动到另一个任意元素的插件，而不是一个滑块。以上所有内容都是我正在使用的 
          autoHeight: true,
      autoHeightEaseDuration: 1500,
      autoHeightEaseFunction: "easeInOutExpo",
      autoSlide: false,
      autoSliderDirection: 'right',
      autoSlideInterval: 7000,
      autoSlideControls: false,
      autoSlideStartText: 'Start',
      autoSlideStopText: 'Stop',
      autoSlideStopWhenClicked: true,
      continuous: true,
      dynamicArrows: true,
      dynamicArrowsGraphical: false,
      dynamicArrowLeftText: "&#171; left",
      dynamicArrowRightText: "right &#187;",
      dynamicTabs: true,
      dynamicTabsAlign: "center",
      dynamicTabsPosition: "top",
      firstPanelToLoad: 1,
      panelTitleSelector: "h2.title",
      slideEaseDuration: 1500,
      slideEaseFunction: "easeInOutExpo"