如何将侧边栏放在视频框下方

Question

我的嵌入播放列表问题我试图在视频框下制作我的 (li) 列表，但我的所有尝试都失败了。所以有人如何重新更正我的代码，这里是我的代码

<script src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type = 'text/javascript' / >
<script>
//<![CDATA[
/*hoverscroll v.0.2.4*/
(function($) {
 $.fn.hoverscroll = function(params) {
  if (!params) {
   params = {};
  }
  params = $.extend({}, $.fn.hoverscroll.params, params);
  this.each(function() {
   var $this = $(this);
   if (params.debug) {
    $.log('[HoverScroll] Trying to create hoverscroll on element ' + this.tagName + '#' + this.id);
   }
   if (params.fixedArrows) {
    $this.wrap('<div class="fixed-listcontainer"></div>')
   } else {
    $this.wrap('<div class="listcontainer"></div>');
   }

   $this.addClass('list');
   var listctnr = $this.parent();
   listctnr.wrap('<div class="ui-widget-content hoverscroll' +
    (params.rtl && !params.vertical ? " rtl" : "") + '"></div>');
   //listctnr.wrap('<div class="hoverscroll"></div>');

   var ctnr = listctnr.parent();

   var leftArrow, rightArrow, topArrow, bottomArrow;
   if (params.arrows) {
    if (!params.vertical) {
     if (params.fixedArrows) {
      leftArrow = '<div class="fixed-arrow left"></div>';
      rightArrow = '<div class="fixed-arrow right"></div>';

      listctnr.before(leftArrow).after(rightArrow);
     } else {
      leftArrow = '<div class="arrow left"></div>';
      rightArrow = '<div class="arrow right"></div>';

      listctnr.append(leftArrow).append(rightArrow);
     }
    } else {
     if (params.fixedArrows) {
      topArrow = '<div class="fixed-arrow top"></div>';
      bottomArrow = '<div class="fixed-arrow bottom"></div>';

      listctnr.before(topArrow).after(bottomArrow);
     } else {
      topArrow = '<div class="arrow top"></div>';
      bottomArrow = '<div class="arrow bottom"></div>';

      listctnr.append(topArrow).append(bottomArrow);
     }
    }
   }
   ctnr.width(params.width).height(params.height);

   if (params.arrows && params.fixedArrows) {
    if (params.vertical) {
     topArrow = listctnr.prev();
     bottomArrow = listctnr.next();

     listctnr.width(params.width)
      .height(params.height - (topArrow.height() + bottomArrow.height()));
    } else {
     leftArrow = listctnr.prev();
     rightArrow = listctnr.next();

     listctnr.height(params.height)
      .width(params.width - (leftArrow.width() + rightArrow.width()));
    }
   } else {
    listctnr.width(params.width).height(params.height);
   }

   var size = 0;

   if (!params.vertical) {
    ctnr.addClass('horizontal');
    $this.children().each(function() {
     $(this).addClass('item');

     if ($(this).outerWidth) {
      size += $(this).outerWidth(true);
     } else {
      size += $(this).width() + parseInt($(this).css('padding-left')) + parseInt($(this).css('padding-right')) + parseInt($(this).css('margin-left')) + parseInt($(this).css('margin-right'));
     }
    });
    $this.width(size);

    if (params.debug) {
     $.log('[HoverScroll] Computed content width : ' + size + 'px');
    }
    if (ctnr.outerWidth) {
     size = ctnr.outerWidth();
    } else {
     size = ctnr.width() + parseInt(ctnr.css('padding-left')) + parseInt(ctnr.css('padding-right')) + parseInt(ctnr.css('margin-left')) + parseInt(ctnr.css('margin-right'));
    }

    if (params.debug) {
     $.log('[HoverScroll] Computed container width : ' + size + 'px');
    }
   } else {
    ctnr.addClass('vertical');
    $this.children().each(function() {
     $(this).addClass('item')

     if ($(this).outerHeight) {
      size += $(this).outerHeight(true);
     } else {
      size += $(this).height() + parseInt($(this).css('padding-top')) + parseInt($(this).css('padding-bottom')) + parseInt($(this).css('margin-bottom')) + parseInt($(this).css('margin-bottom'));
     }
    });
    $this.height(size);

    if (params.debug) {
     $.log('[HoverScroll] Computed content height : ' + size + 'px');
    }
    if (ctnr.outerHeight) {
     size = ctnr.outerHeight();
    } else {
     size = ctnr.height() + parseInt(ctnr.css('padding-top')) + parseInt(ctnr.css('padding-bottom')) + parseInt(ctnr.css('margin-top')) + parseInt(ctnr.css('margin-bottom'));
    }

    if (params.debug) {
     $.log('[HoverScroll] Computed container height : ' + size + 'px');
    }
   }
   var zone = {
    1: {
     action: 'move',
     from: 0,
     to: 0.06 * size,
     direction: -1,
     speed: 16
    },
    2: {
     action: 'move',
     from: 0.06 * size,
     to: 0.15 * size,
     direction: -1,
     speed: 8
    },
    3: {
     action: 'move',
     from: 0.15 * size,
     to: 0.25 * size,
     direction: -1,
     speed: 4
    },
    4: {
     action: 'move',
     from: 0.25 * size,
     to: 0.4 * size,
     direction: -1,
     speed: 2
    },
    5: {
     action: 'stop',
     from: 0.4 * size,
     to: 0.6 * size
    },
    6: {
     action: 'move',
     from: 0.6 * size,
     to: 0.75 * size,
     direction: 1,
     speed: 2
    },
    7: {
     action: 'move',
     from: 0.75 * size,
     to: 0.85 * size,
     direction: 1,
     speed: 4
    },
    8: {
     action: 'move',
     from: 0.85 * size,
     to: 0.94 * size,
     direction: 1,
     speed: 8
    },
    9: {
     action: 'move',
     from: 0.94 * size,
     to: size,
     direction: 1,
     speed: 16
    }
   }

   ctnr[0].isChanging = false;
   ctnr[0].direction = 0;
   ctnr[0].speed = 1;

   function checkMouse(x, y) {
    x = x - ctnr.offset().left;
    y = y - ctnr.offset().top;

    var pos;
    if (!params.vertical) {
     pos = x;
    } else {
     pos = y;
    }

    for (i in zone) {
     if (pos >= zone[i].from && pos < zone[i].to) {
      if (zone[i].action == 'move') {
       startMoving(zone[i].direction, zone[i].speed);
      } else {
       stopMoving();
      }
     }
    }
   }

   function setArrowOpacity() {
    if (!params.arrows || params.fixedArrows) {
     return;
    }

    var maxScroll;
    var scroll;

    if (!params.vertical) {
     maxScroll = listctnr[0].scrollWidth - listctnr.width();
     scroll = listctnr[0].scrollLeft;
    } else {
     maxScroll = listctnr[0].scrollHeight - listctnr.height();
     scroll = listctnr[0].scrollTop;
    }
    var limit = params.arrowsOpacity;
    var opacity = (scroll / maxScroll) * limit;

    if (opacity > limit) {
     opacity = limit;
    }
    if (isNaN(opacity)) {
     opacity = 0;
    }

    var done = false;
    if (opacity <= 0) {
     $('div.arrow.left, div.arrow.top', ctnr).hide();
     if (maxScroll > 0) {
      $('div.arrow.right, div.arrow.bottom', ctnr).show().css('opacity', limit);
     }
     done = true;
    }
    if (opacity >= limit || maxScroll <= 0) {
     $('div.arrow.right, div.arrow.bottom', ctnr).hide();
     done = true;
    }

    if (!done) {
     $('div.arrow.left, div.arrow.top', ctnr).show().css('opacity', opacity);
     $('div.arrow.right, div.arrow.bottom', ctnr).show().css('opacity', (limit - opacity));
    }
   }

   function startMoving(direction, speed) {
    if (ctnr[0].direction != direction) {
     if (params.debug) {
      $.log('[HoverScroll] Starting to move. direction: ' + direction + ', speed: ' + speed);
     }

     stopMoving();
     ctnr[0].direction = direction;
     ctnr[0].isChanging = true;
     move();
    }
    if (ctnr[0].speed != speed) {
     if (params.debug) {
      $.log('[HoverScroll] Changed speed: ' + speed);
     }

     ctnr[0].speed = speed;
    }
   }

   function stopMoving() {
    if (ctnr[0].isChanging) {
     if (params.debug) {
      $.log('[HoverScroll] Stoped moving');
     }

     ctnr[0].isChanging = false;
     ctnr[0].direction = 0;
     ctnr[0].speed = 1;
     clearTimeout(ctnr[0].timer);
    }
   }

   function move() {
    if (ctnr[0].isChanging == false) {
     return;
    }

    setArrowOpacity();

    var scrollSide;
    if (!params.vertical) {
     scrollSide = 'scrollLeft';
    } else {
     scrollSide = 'scrollTop';
    }

    listctnr[0][scrollSide] += ctnr[0].direction * ctnr[0].speed;
    ctnr[0].timer = setTimeout(function() {
     move();
    }, 50);
   }

   if (params.rtl && !params.vertical) {
    listctnr[0].scrollLeft = listctnr[0].scrollWidth - listctnr.width();
   }

   ctnr
    .mousemove(function(e) {
     checkMouse(e.pageX, e.pageY);
    })
    .bind('mouseleave', function() {
     stopMoving();
    });

   this.startMoving = startMoving;
   this.stopMoving = stopMoving;

   if (params.arrows && !params.fixedArrows) {
    // Initialise arrow opacity
    setArrowOpacity();
   } else {
    // Hide arrows
    $('.arrowleft, .arrowright, .arrowtop, .arrowbottom', ctnr).hide();
   }
  });

  return this;
 };

 if (!$.fn.offset) {
  $.fn.offset = function() {
   this.left = this.top = 0;

   if (this[0] && this[0].offsetParent) {
    var obj = this[0];
    do {
     this.left += obj.offsetLeft;
     this.top += obj.offsetTop;
    } while (obj = obj.offsetParent);
   }

   return this;
  }
 }

 $.fn.hoverscroll.params = {
  vertical: false,
  width: 400,
  height: 50,
  arrows: true,
  arrowsOpacity: 0.7,
  fixedArrows: false,
  rtl: false,
  debug: false
 };
 $.log = function() {
  try {
   console.log.apply(console, arguments);
  } catch (e) {
   try {
    opera.postError.apply(opera, arguments);
   } catch (e) {}
  }
 };
})(jQuery);

$(function() {
 $("#videoslider-tabs a").click(function() {
  var container = $("#videoslider-content");
  container.html("<img src='http://3.bp.blogspot.com/-5iLHgsmg5gE/UjhXqejYSNI/AAAAAAAAD2Y/x5jtMwID_X4/s1600/loading.png' class='loading-vid' />");
  var id = $(this).attr("href").slice(1);
  loadvideo(id);
  return false;
 });
 $("#videoslider-tabs").hoverscroll({
  vertical: true,
  width: 300,
  height: 330,
  arrows: false
 });
 $("#videoslider-tabs li").hover(function() {
  $(this).addClass("hover");
 }, function() {
  $(this).removeClass("hover");
 });
 loadvideo();
});

function loadvideo(hash) {
  if (hash) {
   hash = hash.slice(3);
   $("#videoslider-content").html(video[hash]);
   $("#videoslider-tabs li").removeClass("actVid");
   $("#videoslider-tabs a[href=#vid" + hash + "]").parent().addClass("actVid");
  } else {
   $("#videoslider-content").html(video[1]);
   $("#videoslider-tabs li").removeClass("actVid");
   $("#videoslider-tabs a[href=#vid1]").parent().addClass("actVid");
  }
 }
 //]]>
</script>

<style>
 #videoslider {
 background: #F6F6F6;
 /* Background color */
 
 clear: both;
 margin: 0 auto;
 padding: 5px;
 width: 735px;
 border-radius: 5px;
 border: 1px solid #C1C1C1;
 -moz-background-clip: padding;
 -webkit-background-clip: padding-box;
 background-clip: padding-box;
}

#videoslider,
#videoslider-content,
#videoslider-tabs {
 height: 340px;
}

#videoslider-content {
 color: #fff;
 float: left;
 text-align: center;
 width: 430px;
 z-index: 1;
}

.loading-vid {
 display: block;
 margin: 165px auto 0;
}

#videoslider-tabs {
 float: right;
 width: 240px;
 margin: 0;
}

#videoslider-tabs li {
 background-color: #F6F6F6;
 border: 1px solid #C1C1C1;
 float: left;
 height: 60px;
 padding: 5px;
 width: 240px;
 list-style: none;
 overflow: hidden;
}

#videoslider-tabs li a {
 padding: 0 !important;
 border: 0 !important;
}

#videoslider-tabs li.hover {
 background-color: #EBEBEB;
}

#videoslider-tabs li.actVid {
 background: #555;
}

#videoslider-tabs li img.thumb-vid {
 background-color: #EEEEEE;
 float: left;
 height: 52px;
 margin: 0 8px 0 0;
 padding: 5px;
 width: 52px;
}

#videoslider-tabs li span.vidTit {
 display: block;
 color: #128EC9;
 /* Titles color */
 
 font-size: 12px;
 /* Titles font size */
 
 font-weight: bold;
 text-decoration: none;
}

#videoslider-tabs li .vidDesc {
 display: block;
 color: #222222;
 /* Color of the description */
 
 font-size: 11px;
 /* Font size of the description */
 
 font-weight: bold;
 text-decoration: none;
}

#videoslider-tabs a {
 text-decoration: none;
}

#videoslider-tabs li.actVid .vidDesc {
 color: #fff;
}

#videoslider-tabs li span.vidTit .actVid {
 color: #fff;
 /* Titles color */
}

.ui-widget-content {
 float: right;
 overflow-y: scroll;
 overflow-x: hidden;
}

.tabs-outer {
 background-image: none !important;
}

#videoslider-tabs li a:hover {
 background: none !important;
}
</style>

<script>
var video = [];
video[1] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/video_ID_1" frameborder="0" allowfullscreen></iframe>';
video[2] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/video_ID_2" frameborder="0" allowfullscreen></iframe>';
video[3] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/video_ID_3" frameborder="0" allowfullscreen></iframe>';
video[4] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/video_ID_4" frameborder="0" allowfullscreen></iframe>';
video[5] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/video_ID_5" frameborder="0" allowfullscreen></iframe>';
</script>
<div id="videoslider">
<div id="videoslider-content"></div>
<ul id="videoslider-tabs">
<li><a href="#vid1"><img src="//i2.ytimg.com/vi/video_ID_1/default.jpg" class="thumb-vid" /><span class="vidTit">Video Name</span><span class="vidDesc">Video Description</span></a></li>

<li><a href="#vid2"><img src="//i2.ytimg.com/vi/video_ID_2/default.jpg" class="thumb-vid" /><span class="vidTit">Video Name</span><span class="vidDesc">Video Description</span></a></li>

<li><a href="#vid3"><img src="//i2.ytimg.com/vi/video_ID_3/default.jpg" class="thumb-vid" /><span class="vidTit">Video Name</span><span class="vidDesc">Video Description</span></a></li>

<li><a href="#vid4"><img src="//i2.ytimg.com/vi/video_ID_4/default.jpg" class="thumb-vid" /><span class="vidTit">Video Name</span><span class="vidDesc">Video Description</span></a></li>

<li><a href="#vid5"><img src="//i2.ytimg.com/vi/video_ID_5/default.jpg" class="thumb-vid" /><span class="vidTit">Video Name</span><span class="vidDesc">Video Description</span></a></li>
</ul>
</div>

所以有人可以看看并重新更正我的代码，因为我想在视频框下制作列表

Answer 1

如果要水平显示列表，请查看代码段。如果你想垂直显示它，但在视频下面，只需关闭你的 ul 之前的 div，而不是之后。

$(function() {
  $("#videoslider-tabs a").click(function() {
    var container = $("#videoslider-content");
    container.html("<img src='http://3.bp.blogspot.com/-5iLHgsmg5gE/UjhXqejYSNI/AAAAAAAAD2Y/x5jtMwID_X4/s1600/loading.png' class='loading-vid' />");
    var id = $(this).attr("href").slice(1);
    loadvideo(id);
    return false;
  });
  $("#videoslider-tabs").hoverscroll({
    vertical: true,
    width: 300,
    height: 330,
    arrows: false
  });
  $("#videoslider-tabs li").hover(function() {
    $(this).addClass("hover");
  }, function() {
    $(this).removeClass("hover");
  });
  loadvideo();
});

function loadvideo(hash) {
  if (hash) {
    hash = hash.slice(3);
    $("#videoslider-content").html(video[hash]);
    $("#videoslider-tabs li").removeClass("actVid");
    $("#videoslider-tabs a[href=#vid" + hash + "]").parent().addClass("actVid");
  } else {
    $("#videoslider-content").html(video[1]);
    $("#videoslider-tabs li").removeClass("actVid");
    $("#videoslider-tabs a[href=#vid1]").parent().addClass("actVid");
  }
}

var video = [];
video[1] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/video_ID_1" frameborder="0" allowfullscreen></iframe>';
video[2] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/video_ID_2" frameborder="0" allowfullscreen></iframe>';
video[3] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/video_ID_3" frameborder="0" allowfullscreen></iframe>';
video[4] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/video_ID_4" frameborder="0" allowfullscreen></iframe>';
video[5] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/video_ID_5" frameborder="0" allowfullscreen></iframe>';

body {
  width: 100%;
}
#videoslider {
  background: #F6F6F6;
  /* Background color */
  clear: both;
  margin: 0 auto;
  padding: 5px;
  width: 740px;
  border-radius: 5px;
  border: 1px solid #C1C1C1;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
#videoslider,
#videoslider-content,
#videoslider-tabs {
  height: 340px;
}
#videoslider-content {
  color: #fff;
  float: center;
  text-align: center;
  width: 740px;
  z-index: 1;
  margin-left: auto;
  margin-right: auto;
}
.loading-vid {
  display: block;
  margin: 145px auto 0;
}
ul#videoslider-tabs {
  width: 740px;
  margin-left: -40px;
}
ul li {
  display: inline-block;
  background-color: #F6F6F6;
  border: 1px solid #C1C1C1;
  height: 60px;
  padding: 5px;
  width: 132px;
  list-style-type: none;
  overflow: hidden;
}
ul li a {
  padding: 0 !important;
  border: 0 !important;
}
ul li.hover {
  background-color: #EBEBEB;
}
ul li.actVid {
  background: #555;
}
ul li img.thumb-vid {
  background-color: #EEEEEE;
  float: left;
  height: 52px;
  margin: 0 8px 0 0;
  padding: 5px;
  width: 52px;
}
ul li span.vidTit {
  display: block;
  color: #128EC9;
  /* Titles color */
  font-size: 12px;
  /* Titles font size */
  font-weight: bold;
  text-decoration: none;
}
ul li span.vidDesc {
  display: block;
  color: #222222;
  /* Color of the description */
  font-size: 11px;
  /* Font size of the description */
  font-weight: bold;
  text-decoration: none;
}
ul a {
  text-decoration: none;
}
ul li.actVid .vidDesc {
  color: #fff;
}
ul li span.vidTit .actVid {
  color: #fff;
  /* Titles color */
}
.ui-widget-content {
  overflow-y: scroll;
  overflow-x: hidden;
}
.tabs-outer {
  background-image: none !important;
}
ul li a:hover {
  background: none !important;
}

<body>
  <div id="videoslider"></div>
  <div id="videoslider-content">

    <ul id="videoslider-tabs">
      <li>
        <a href="#vid1">
          <img src="//i2.ytimg.com/vi/video_ID_1/default.jpg" class="thumb-vid" /><span class="vidTit">Video Name</span><span class="vidDesc">Video Description</span>
        </a>
      </li>

      <li>
        <a href="#vid2">
          <img src="//i2.ytimg.com/vi/video_ID_2/default.jpg" class="thumb-vid" /><span class="vidTit">Video Name</span><span class="vidDesc">Video Description</span</a></li>

<li><a href="#vid3"><img src="//i2.ytimg.com/vi/video_ID_3/default.jpg" class="thumb-vid" /><span class="vidTit">Video Name</span><span class="vidDesc">Video Description</span>
        </a>
      </li>

      <li>
        <a href="#vid4">
          <img src="//i2.ytimg.com/vi/video_ID_4/default.jpg" class="thumb-vid" /><span class="vidTit">Video Name</span><span class="vidDesc">Video Description</span</a></li>

<li><a href="#vid5"><img src="//i2.ytimg.com/vi/video_ID_5/default.jpg" class="thumb-vid" /><span class="vidTit">Video Name</span><span class="vidDesc">Video Description</span</a></li>
</ul>
    </div>
    </body>

如何将侧边栏放在视频框下方

how to put side bar under the video box

html

javascript

css

embed

blogger