javascript - 随机横幅/ slider

标签 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,

最佳答案

您正在使用带有选项 randomStart: true 的 bxSlider。在他们的文档中，提到了

if random start, set the startSlide setting to random number

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

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

解决方案是不使用 javascript，您可能希望在服务器代码中随机排列图像 ul 列表的顺序。

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

希望它有意义。

关于javascript - 随机横幅/ slider ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45453057/

上一篇：javascript - 在 div 中以 span 居中输入

下一篇：javascript - bxslider 删除图像后留下空白幻灯片

相关文章：

javascript - 为什么我的 ExtJS 表单没有提交？

javascript - 不可见的 recaptcha 以编程方式调用挑战 grecaptcha.getResponse() 在页面刷新时始终为空白

html - 将一个类应用于特定的 li 而不是它的子类

JavaScript Brightcove API 暂停和播放

javascript - 在运行时使用 require js 切换出优化代码

javascript - 使用 waypoints.js 时控制水平滚动

javascript - Bootstrap Modal 不显示

html - 如何将垂直滚动条添加到下拉菜单中的特定 ul > li

html - 创建一个选项选择登陆页面

javascript - 以编程方式更改 data-href 属性后重新加载 Facebook Like 小部件

©2024 IT工具网  联系我们