默认幻灯片结构


  • 标题1
  • 标题2
  • 标题3
  • 标题4
  • 标题5
  • 1
  • 2
  • 3
  • 4
  • 5
代码
<style>
.ex-slide .slide-prev, .ex-slide .slide-next{top:50%;width:40px;height:70px;margin-top:-35px;border-radius:3px;text-indent:-9999px;background-repeat:no-repeat;}
.ex-slide .slide-prev{left:5px;background:url(http://uscat.javaex.cn/FiztnEQrT5EeqaOAwHn0-rP414LJ) no-repeat;}
.ex-slide .slide-next{right:5px;background:url(http://uscat.javaex.cn/FiztnEQrT5EeqaOAwHn0-rP414LJ) no-repeat;background-position : -41px 0;}
.focus-box{left:50%;bottom:15px;}
.focus-box ul{height:20px;padding:0 4px;border-radius:8px;background:rgba(0,0,0,.5);}
.focus-box ul li{float:left;height:12px;margin:4px;}
.focus-box ul li{display:block;width:12px;height:12px;border-radius:100%;background-color:#fff;opacity: 0.5;text-indent:-9999px;cursor:pointer;}
.focus-box ul li.on, .focus-box ul li:hover{opacity: 1;}

.ex-slide {width: 1200px; height: 360px;}
.ex-slide ul.focus-bg li {width: 1200px; height: 360px;}
.ex-slide ul.focus-bg img {width: 100%; height: 100%;}
</style>

<!--幻灯片-->
<div id="slide" class="ex-slide">
	<!--背景大图-->
	<ul class="focus-bg">
		<li>
			<a href="javascript:;" target="_blank">
				<img src="http://i2.kanimg.kankan.com/gallery2/block/2019/01/18/e65a98d2f9a2d94a3e788bc988e27542.jpg"/>
			</a>
		</li>
		<li>
			<a href="javascript:;" target="_blank">
				<img src="http://i9.kanimg.kankan.com/gallery2/block/2019/01/15/3e128f08e636afaf9b9eb15f9638541a.jpg"/>
			</a>
		</li>
		<li>
			<a href="javascript:;" target="_blank">
				<img src="http://i9.kanimg.kankan.com/gallery2/block/2019/01/11/802fd2958546461d943204e014116e50.jpg"/>
			</a>
		</li>
		<li>
			<a href="javascript:;" target="_blank">
				<img src="http://i9.kanimg.kankan.com/gallery2/block/2019/01/10/67446c88c73aab99257d32059b958b4d.jpg"/>
			</a>
		</li>
		<li>
			<a href="javascript:;" target="_blank">
				<img src="http://i2.kanimg.kankan.com/gallery2/block/2019/01/07/b189424be8545aea49dce3d095dab4f1.jpg"/>
			</a>
		</li>
	</ul>

	<!--左右切换,如果不需要左右箭头切换的话,直接去掉这个div即可-->
	<div class="slide-prev-next">
		<!--上一张-->
		<div class="slide-prev"><a href="javascript:;"></a></div>
		<!--下一张-->
		<div class="slide-next"><a href="javascript:;"></a></div>
	</div>

	<!--标题,如果不需要,直接去掉这个div即可-->
	<div class="focus-title">
		<ul>
			<li><span class="title">标题1</span></li>
			<li><span class="title">标题2</span></li>
			<li><span class="title">标题3</span></li>
			<li><span class="title">标题4</span></li>
			<li><span class="title">标题5</span></li>
		</ul>
	</div>

	<!--焦点,如果不需要焦点的话,直接去掉这个div即可-->
	<div class="focus-box">
		<!--如果使用默认焦点样式,则下面的 ul 可以缺省-->
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
	</div>
</div>

<script>
	javaex.slide({
		id : "slide",
		focusCenter : true,
		effect : "slice",
		callback : function(rtn) {
			// 返回当前显示的索引,从0开始计,初始化也会返回
			console.log(rtn.index);
		}
	});
</script>

参数说明(使用属性默认值时,可以缺省该属性)
序号 属性名 默认值 说明
1 id 幻灯片id
2 isAutoPlay true 是否自动轮播
3 focusCenter false 焦点区域是否自动居中
4 startSlide 1 开始切换的位置(即从第几张图开始切换),从1开始计
5 focusBoxMode mouseover 焦点切换模式。mouseover:鼠标移动切换; click: 鼠标点击切换
6 effect 切换效果,为空默认为淡入淡出。slice:左右滑动;smooth:平滑
7 delay 2000 切换时间间隔(毫秒)
8 isInit false 初始化是否调用回调函数
9 callback 返回当前显示的索引,从0开始计