默认幻灯片结构


代码(右键,重新加载框架,查看效果)
<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://img.javaex.cn/FiztnEQrT5EeqaOAwHn0-rP414LJ) no-repeat;}
.ex-slide .slide-next{right:5px;background:url(http://img.javaex.cn/FiztnEQrT5EeqaOAwHn0-rP414LJ) no-repeat;background-position : -41px 0;}

.focus-box {left: 50%; bottom: 15px;}
.focus-box ul li{opacity: .7; height: 8px; width: 8px; border-radius: 4px; background-color: #eee; display: inline-block; text-indent: -9999px; font-size: 0; margin: 0 4px; vertical-align: middle;}
.focus-box ul li.on{opacity: 1;background-color: #ff851b;}

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

<!--幻灯片-->
<div id="slide" class="ex-slide">
	<!--背景大图-->
	<ul class="focus-bg">
		<li>
			<a href="1">
				<img src="http://imgs.aixifan.com/test-douw/2019_0_26/1548478468913.png"/>
			</a>
		</li>
		<li>
			<a href="2">
				<img src="http://imgs.aixifan.com/test-douw/2019_0_28/1548649140987.jpg"/>
			</a>
		</li>
		<li>
			<a href="3">
				<img src="http://imgs.aixifan.com/test-douw/2019_0_27/1548584627763.jpg"/>
			</a>
		</li>
		<li>
			<a href="4">
				<img src="http://imgs.aixifan.com/test-douw/2019_0_25/1548425503502.jpg"/>
			</a>
		</li>
		<li>
			<a href="5">
				<img src="http://imgs.aixifan.com/test-douw/2019_0_26/1548478468913.png"/>
			</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></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
</div>

<script>
	javaex.slide({
		id : "slide",
		focusCenter : true,
		callback : function(rtn) {
			// 返回当前显示的索引,从0开始计
//			console.log(rtn.index);
		}
	});
</script>
参数说明(使用属性默认值时,可以缺省该属性)
序号 属性名 默认值 说明
1 id 幻灯片id
2 isAutoPlay true 是否自动轮播
3 focusCenter false 焦点区域是否自动居中
4 startSlide 1 开始切换的位置(即从第几张图开始切换),从1开始计
5 isInit false 初始化是否调用回调函数
6 delay 2000 切换时间间隔(毫秒)
7 callback 返回当前显示的索引,从0开始计
演示