前臺模板及其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;" onclick="album_show(0);"> </span>
                <span class="album_o" id="dot_1" style="display:none;" onclick="album_show(1);"> </span>
                <span class="album_o" id="dot_2" style="display:none;" onclick="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();
	});
});