Js模板类 图片切换

前台模板及其html结构:

DOM部分:

            <div class="album">
                <div id="album"><img src="http://www.waimaotong.com/file/upload/201803/09/1522306768723.middle.jpg" id="photo" style="width:100%;"/></div>
                <div class="album_focus">
                <span class="album_c" id="dot_0" style="display:none;" οnclick="album_show(0);"> </span>
                <span class="album_o" id="dot_1" style="display:none;" οnclick="album_show(1);"> </span>
                <span class="album_o" id="dot_2" style="display:none;" οnclick="album_show(2);"> </span>
                </div>
            </div>

Js html模板部分 采取直接定义全局变量

var TB = ['1.jpg','2.jpg','3.jpg'];
<script type="text/javascript" src="static/js/album.js"></script>

引入的JS文件 一般为插件 或者类 或者自定义的规则js

var cur = max = X1 = X2 = 0;
if(TB[1]) {max++;Ds('dot_0');Ds('dot_1');}
if(TB[2]) {max++;Ds('dot_2');}	
function album_show(obj) {
	if(max == 0) return;
	if(TB[obj] && obj != cur) {
		Dd('photo').src = TB[obj];
		Dd('dot_'+obj).className = 'album_c';
		Dd('dot_'+cur).className = 'album_o';
		cur = obj;
	}
}
function album_next() {
	if(cur == max) {
		album_show(0);
	} else {
		album_show(cur + 1);
	}
}
function album_prev() {
	if(cur == 0) {
		album_show(max);
	} else {
		album_show(cur - 1);
	}
}
$(document).on('pageinit', function(event) {
	$('#album').on('swipeleft click',function(){
		album_next();
	});
	$('#album').on('swiperight',function(){
		album_prev();
	});
});

注: class='album_c'是选中的样式。