随机横幅/滑块

时间：2017-08-02 06:29:30

标签： javascript jquery css javascript-objects 

<!bx slider header script>
<!doctype html>
<html>

<head>
<meta charset="utf-8">

<title>Untitled Document</title>



<script src="{{ get_public_template_url("custom/page/SpjainMarch2016-theme/fitvids.js") }}"></script>
<script src="{{ get_public_template_url("custom/page/SpjainMarch2016-theme/bxslider.js") }}"></script>
<script src="{{ get_public_template_url("custom/page/SpjainMarch2016-theme/fancybox.js") }}"></script>
 <script>
 $(document).ready(function() {
    $(".various").fancybox({
       helpers : {
        media: true
    },
    width       : 800,
    height      : 450,
    aspectRatio : true,
    scrolling : 'auto',
    preload   : true,
    openEffect    : 'elastic',
    closeEffect    : 'none'
    });
});
</script>
<script>
$('.bxslider').bxSlider({
  pagerCustom: '#bx-pager',
  mode: 'fade',
   auto: true,
  controls: true,
    randomStart: false,
		autoStart: true,
        pager: true,
        adaptiveHeightSpeed: 500,
        autoControlsCombine: false,
    	autoControlsSelector: null,
        preloadImages: 'visible',
  		onSlideAfter: function(){
      console.log("next");
      if($('.menu-head.up-slide c').hasClass('active')){
          console.log("next1");
          $("#bx-pager li.first d").addClass('active');
	  }
  }
});

</script>


</head>


<body>
</body>
</html>

@charset "utf-8";


.bx-wrapper {
    position: relative;
    padding: 0;
	*zoom: 1;
}

.bx-wrapper img {
	max-width: 100%;
	display: block;
}

/** THEME


.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
	position: absolute;
	bottom: -30px;
	width: 100%;
}

/* LOADER */

.bx-wrapper .bx-loading {
	min-height: 50px;
	background: url(images/bx_loader.gif) center center no-repeat #fff;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2000;
}

/* PAGER */

.bx-wrapper .bx-pager {
	text-align: center;
	font-size: .85em;
	font-family: Arial;
	font-weight: bold;
	color: #666;
	padding-top: 20px;
}

.bx-wrapper .bx-pager .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
	display: inline-block;
	*zoom: 1;
	*display: inline;
}

.bx-wrapper .bx-pager.bx-default-pager a {
	background: #666;
	text-indent: -9999px;
	display: block;
	width: 10px;
	height: 10px;
	margin: 0 5px;
	outline: 0;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
	background: #000;
}

/* DIRECTION CONTROLS (NEXT / PREV) */

.bx-wrapper .bx-prev {
	left: 10px;
	background: url(images/controls.png) no-repeat 0 -32px;
}

.bx-wrapper .bx-next {
	right: 10px;
	background: url(images/controls.png) no-repeat -43px -32px;
}

.bx-wrapper .bx-prev:hover {
	background-position: 0 0;
}

.bx-wrapper .bx-next:hover {
	background-position: -43px 0;
}

.bx-wrapper .bx-controls-direction a {
	position: absolute;
	top: 50%;
	margin-top: -16px;
	outline: 0;
	width: 32px;
	height: 32px;
	text-indent: -9999px;
	z-index: 9999;
}

.bx-wrapper .bx-controls-direction a.disabled {
	display: none;
}

/* AUTO CONTROLS (START / STOP) */

.bx-wrapper .bx-controls-auto {
	text-align: center;
}

.bx-wrapper .bx-controls-auto .bx-start {
	display: block;
	text-indent: -9999px;
	width: 10px;
	height: 11px;
	outline: 0;
	background: url(images/controls.png) -86px -11px no-repeat;
	margin: 0 3px;
}

.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active {
	background-position: -86px 0;
}

.bx-wrapper .bx-controls-auto .bx-stop {
	display: block;
	text-indent: -9999px;
	width: 9px;
	height: 11px;
	outline: 0;
	background: url(images/controls.png) -86px -44px no-repeat;
	margin: 0 3px;
}

.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active {
	background-position: -86px -33px;
}

/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
	text-align: left;
	width: 80%;
}

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
	right: 0;
	width: 35px;
}

/* IMAGE CAPTIONS */

.bx-wrapper .bx-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	background: #666\9;
	background: rgba(80, 80, 80, 0.75);
	width: 100%;
}

.bx-wrapper .bx-caption span {
	color: #fff;
	font-family: Arial;
	display: block;
	font-size: .85em;
	padding: 10px;
}
<!bx slider compound code>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<ul class="bxslider">
  <li>{% if widget.slide1.src %}
    <img src="{{ widget.slide1.src }}" width="{{ widget.slide1.width }}" height="{{ widget.slide1.height }}" alt="{{ widget.slide1.alt }}">
{% endif %}
    <div class="slide-caption">{{ widget.slidercontent }}</div>
    </li>
  <li>
{% if widget.alumni2.src %}
    <img src="{{ widget.alumni2.src }}" width="{{ widget.alumni2.width }}" height="{{ widget.alumni2.height }}" alt="{{ widget.alumni2.alt }}">
{% endif %}
    <div class="slide-caption">{{ widget.alumni2content }}</div>
    </li>
  <li>
{% if widget.alumni3.src %}
    <img src="{{ widget.alumni3.src }}" width="{{ widget.alumni3.width }}" height="{{ widget.alumni3.height }}" alt="{{ widget.alumni3.alt }}">
{% endif %}
    <div class="slide-caption">{{ widget.alumni3content }}</div>
    </li>
  <li>
{% if widget.alumni4.src %}
    <img src="{{ widget.alumni4.src }}" width="{{ widget.alumni4.width }}" height="{{ widget.alumni4.height }}" alt="{{ widget.alumni4.alt }}">
{% endif %}
    <div class="slide-caption">{{ widget.alumni4content }}</div>
    </li>
  <li>
{% if widget.alumni5.src %}
    <img src="{{ widget.alumni5.src }}" width="{{ widget.alumni5.width }}" height="{{ widget.alumni5.height }}" alt="{{ widget.alumni5.alt }}">
{% endif %}
    <div class="slide-caption">{{ widget.alumni5content }}</div>
    </li>
  <li>
{% if widget.alumni6.src %}
    <img src="{{ widget.alumni6.src }}" width="{{ widget.alumni6.width }}" height="{{ widget.alumni6.height }}" alt="{{ widget.alumni6.alt }}">
{% endif %}
    <div class="slide-caption">{{ widget.alumni6content }}</div>
    </li>
  <li>
{% if widget.alumni7.src %}
    <img src="{{ widget.alumni7.src }}" width="{{ widget.alumni7.width }}" height="{{ widget.alumni7.height }}" alt="{{ widget.alumni7.alt }}">
{% endif %}
    <div class="slide-caption">{{ widget.alumni7content }}</div>
    </li>
  <li>
{% if widget.alumni8.src %}
    <img src="{{ widget.alumni8.src }}" width="{{ widget.alumni8.width }}" height="{{ widget.alumni8.height }}" alt="{{ widget.alumni8.alt }}">
{% endif %}
    <div class="slide-caption">{{ widget.alumni8content }}</div>
    </li>
  <li>
{% if widget.alumni9.src %}
    <img src="{{ widget.alumni9.src }}" width="{{ widget.alumni9.width }}" height="{{ widget.alumni9.height }}" alt="{{ widget.alumni9.alt }}">
{% endif %}
    <div class="slide-caption">{{ widget.alumni9content }}</div>
    </li>    
  <li>
{% if widget.alumni10.src %}
    <img src="{{ widget.alumni10.src }}" width="{{ widget.alumni10.width }}" height="{{ widget.alumni10.height }}" alt="{{ widget.alumni10.alt }}">
{% endif %}
    <div class="slide-caption">{{ widget.alumni10content }}</div>
    </li>
  <li>
{% if widget.alumni11.src %}
    <img src="{{ widget.alumni11.src }}" width="{{ widget.alumni11.width }}" height="{{ widget.alumni11.height }}" alt="{{ widget.alumni11.alt }}">
{% endif %}
    <div class="slide-caption">{{ widget.alumni11content }}</div>
    </li>
   <li>
{% if widget.slide2.src %}
    <img src="{{ widget.slide2.src }}" width="{{ widget.slide2.width }}" height="{{ widget.slide2.height }}" alt="{{ widget.slide2.alt }}">
{% endif %}
    <div class="slide-caption">{{ widget.slidecontent2 }}</div>
    </li>
  <li>
{% if widget.slide3.src %}
    <img src="{{ widget.slide3.src }}" width="{{ widget.slide3.width }}" height="{{ widget.slide3.height }}" alt="{{ widget.slide3.alt }}">
{% endif %}
    <div class="slide-caption">{{ widget.slidecontent3 }}</div>
    </li>
  <li>
  <a data-toggle="modal" data-target="#slideModal_V" href="#slideModal_V">
  {% if widget.slide4.src %}
    <img src="{{ widget.slide4.src }}" width="{{ widget.slide4.width }}" height="{{ widget.slide4.height }}" alt="{{ widget.slide4.alt }}">
{% endif %}</a>
    <div class="slide-caption">{{ widget.slidecontent4 }}</div>
</li>
</ul>
<ul id="bx-pager" class="side-menu">
  <li class="menu-head first"><a data-slide-index="0" href="">{{ widget.slidername }}</a></li>
  <li class="menu-head up-slide"><a data-slide-index="1" href=""></a></li>
  <li class="menu-head up-slide"><a data-slide-index="2" href=""></a></li>
  <li class="menu-head up-slide"><a data-slide-index="3" href=""></a></li>
  <li class="menu-head up-slide"><a data-slide-index="4" href=""></a></li>
  <li class="menu-head up-slide"><a data-slide-index="5" href=""></a></li>
  <li class="menu-head up-slide"><a data-slide-index="6" href=""></a></li>
  <li class="menu-head up-slide"><a data-slide-index="7" href=""></a></li>
  <li class="menu-head up-slide"><a data-slide-index="8" href=""></a></li>
  <li class="menu-head up-slide"><a data-slide-index="9" href=""></a></li>
  <li class="menu-head up-slide"><a data-slide-index="10" href=""></a></li>
  <li class="menu-head"><a data-slide-index="11" href="">{{ widget.slidename2 }}</a></li>
  <li class="menu-head"><a data-slide-index="12" href="">{{ widget.slidename3 }}</a></li>
  <li class="menu-head"><a data-slide-index="13" href="">{{ widget.slidename4 }}</a></li>
</ul>










</body>
</html>

我正在尝试编辑包含13张图片的横幅。每次刷新时，随机图像都需要以随机顺序显示（全部为13）。

我正在使用bx-slider。这是主页www.spjain.org

我已经刷新随机图像，但顺序仍然相同。

有什么线索错了吗？

更新：已经使用randomStart：true，

1 个答案:

答案 0 :(得分：1)

您正在使用bxSlider选项randomStart：true。在他们的文件中，它提到了

  

如果随机启动，请将 startSlide 设置为随机数

并且没有选项随机播放所有其他幻灯片。

http://bxslider.com/docs/jquery.bxslider.html

解决方案不是使用javascript，您可能想要在服务器代码中随机显示图像ul列表的序列。

<ul class="bxslider" style="width: auto; position: relative;">
  <li> ...
  ... </li>
</ul>

希望它有意义。

相关问题
最新问题