Question

我使用css，javascript和html构建了一个滑块。我有一些javascript控制包含滑块的div的宽度和高度，以及滑动速度。但是，无论屏幕尺寸大小，我都希望滑块的宽度为100％。它目前以像素为单位定义，但每当我将其定义为％时，它就会消失。有什么想法或建议吗？

这是代码

        <script type="text/javascript">

        $(function() {
            $('#one').ContentSlider({
            width:1600,
            heigth:400,

                speed : 800,
                easing : 'easeInOutBack'
            });
        });

    </script>

HTML CODE

<title>  </title>

<body>


    <div id="one" class="contentslider">
        <div class="cs_wrapper">
            <div class="cs_slider">

                <div class="cs_article">
                    Insert Images Here
                </div><!-- End cs_article -->

            </div><!-- End cs_slider -->
        </div><!-- End cs_wrapper -->
    </div><!-- End contentslider -->



    <!-- Site JavaScript -->
    <script type="text/javascript"
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="ContentSlider.js"></script>
    <script type="text/javascript" src="ContentSlider.js"></script>
    <script type="text/javascript">

        $(function() {
            $('#one').ContentSlider({
            width:1600,
            heigth:600,

                speed : 800,
                easing : 'easeInOutBack'
            });
        });

    </script>
    <script src="ContentSlider.js" type="text/javascript"></script>
    <script src="ContentSlider.js" type="text/javascript"></script>

</body>

CSS代码

  body {
  font:80%/1.25em arial, sans-serif;
  letter-spacing:.1em;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
width:100%;
height:100%
   }
  h1, h2, p, pre {
display:block;
width:99%;
   }

  .contentslider {
  padding:10px; /* This acts as a border for the content slider */
  background:#333; /* This is the color of said border */
   }


   .contentslider {
   position:relative;
   display:block;
   width:100%;
   height:100%;
   margin:0 auto;
   overflow:hidden


   }
  .cs_wrapper {
   position:relative;
  display:block;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  overflow:hidden;

  }
 .cs_slider {
 position:absolute;
 width:10000px;
 height:100%;
 margin:0;
 padding:0;
 }

JAVASCRIPT CODE

   (function($) {
   $.fn.ContentSlider = function(options)
    {
   var defaults = {
   leftBtn : 'cs_leftImg.jpg',
   rightBtn : 'cs_rightImg.jpg',
   width : '900px',
   height : '400px',
   speed : 400,
   easing : 'easeOutQuad',
   textResize : false,
   IE_h2 : '26px',
   IE_p : '11px'
   } 
var defaultWidth = defaults.width;
var o = $.extend(defaults, options);
var w = parseInt(o.width);
var n = this.children('.cs_wrapper').children('.cs_slider').children('.cs_article').length;
var x = -1*w*n+w; // Minimum left value
var p = parseInt(o.width)/parseInt(defaultWidth);
var thisInstance = this.attr('id');
var inuse = false; // Prevents colliding animations

function moveSlider(d, b)
{
  var l = parseInt(b.siblings('.cs_wrapper').children('.cs_slider').css('left'));
  if(isNaN(l)) {
    var l = 0;
  }
  var m = (d=='left') ? l-w : l+w;
  if(m<=0&&m>=x) {
    b
      .siblings('.cs_wrapper')
        .children('.cs_slider')
          .animate({ 'left':m+'px' }, o.speed, o.easing, function() {
            inuse=false;
          });

    if(b.attr('class')=='cs_leftBtn') {
      var thisBtn = $('#'+thisInstance+' .cs_leftBtn');
      var otherBtn = $('#'+thisInstance+' .cs_rightBtn');
    } else {
      var thisBtn = $('#'+thisInstance+' .cs_rightBtn');
      var otherBtn = $('#'+thisInstance+' .cs_leftBtn');
    }
    if(m==0||m==x) {
      thisBtn.animate({ 'opacity':'0' }, o.speed, o.easing, function() { thisBtn.hide(); });
    }
    if(otherBtn.css('opacity')=='0') {
      otherBtn.show().animate({ 'opacity':'1' }, { duration:o.speed, easing:o.easing });
    }
  }
}

function vCenterBtns(b)
{
  // Safari and IE don't seem to like the CSS used to vertically center
  // the buttons, so we'll force it with this function
  var mid = parseInt(o.height)/2;
  b
    .find('.cs_leftBtn img').css({ 'top':mid+'px', 'padding':0 }).end()
    .find('.cs_rightBtn img').css({ 'top':mid+'px', 'padding':0 });
}

return this.each(function() {
  $(this)
    // Set the width and height of the div to the defined size
    .css({
      width:o.width,
      height:o.height
    })
    // Add the buttons to move left and right
    .prepend('<a href="#" class="cs_leftBtn"><img src="'+o.leftBtn+'" /></a>')
    .append('<a href="#" class="cs_rightBtn"><img src="'+o.rightBtn+'" /></a>')
    // Dig down to the article div elements
    .find('.cs_article')
      // Set the width and height of the div to the defined size
      .css({
        width:o.width,
        height:o.height
      })
      .end()

    .find('.cs_leftBtn')
      .css('opacity','0')
      .hide()
      .end()
    .find('.cs_rightBtn')
      .hide()
      .animate({ 'width':'show' });


  if(o.textResize===true) {
    var h2FontSize = $(this).find('h2').css('font-size');
    var pFontSize = $(this).find('p').css('font-size');
    $.each(jQuery.browser, function(i) {
      if($.browser.msie) {
         h2FontSize = o.IE_h2;
         pFontSize = o.IE_p;
      }
    });
    $(this).find('h2').css({ 'font-size' : parseFloat(h2FontSize)*p+'px', 'margin-left'           : '66%' });
    $(this).find('p').css({ 'font-size' : parseFloat(pFontSize)*p+'px', 'margin-left' : '66%' });
    $(this).find('.readmore').css({ 'font-size' : parseFloat(pFontSize)*p+'px', 'margin-left' : '66%' });
  }

  var leftBtn = $(this).children('.cs_leftBtn');
  leftBtn.bind('click', function() {
    if(inuse===false) {
      inuse = true;
      moveSlider('right', leftBtn);
    }
    return false;
  });

  var rightBtn = $(this).children('.cs_rightBtn');
  rightBtn.bind('click', function() {
    if(inuse===false) {
      inuse=true;
      moveSlider('left', rightBtn);
    }
    return false; 
  });

  vCenterBtns($(this)); 
});

} }）（jQuery的）

Answer 1

您可以将宽度更改为$（this）.parent（）。innerWidth（），但这只适用于init，如果用户调整大小，则不会更改。这是因为插件只在init上设置了一个大小

搜索全宽滑块可能是一个更好的主意，这些通常可以修复一些带有全宽和调整大小的问题

将滑块宽度从px更改为％

1 个答案: