[ ] 用 Discuz! 內置的 JS 調用實現的幻燈片播放效果

用 Discuz! 內置的 JS 調用實現的幻燈片播放效果
http://www.discuz.net/thread-737586-1-1.html

有不少人問 JS 調用的圖片調用太單調了，其實在 JS 調用支持 HTML 後只要你想得到，沒有做不出的效果，用本帖的附件作為媒介
可以輕鬆用 JS 調用實現幻燈片播放效果。

新建一個附件圖片的 JS 調用，粘貼上以下內容為模板

<ul id="slidedata" style="display: none">
[node]
<li title=img>{imgfile}
<li title=link>{link}
<li title=subject>{subject}
[/node]
</ul>
<script language="javascript" type="text/javascript" src="slide.js"></script>

效果同 x.discuz.net 首頁的幻燈片

slide.js 內容

var xsTextBar = 1; //是否顯示文字鏈接，1為顯示，0為不顯示
var xsPlayBtn = 0; //是否顯示播放按鈕，1顯示，0為不顯示
var xsImgSize = new Array(260,217); //幻燈圖片的尺寸，格式為「寬度,高度」

var xsImgs = new Array();
var xsImgLinks = new Array();
var xsImgTexts = new Array();
var xsImg = document.getElementById("slidedata");
var j = 0;var k = 0;
for(var i in xsImg.childNodes) {
	var a = xsImg.childNodes[i];
	if(a.title) {
		if(a.title == 'img') {
			xsImgs[k] = a.innerHTML;
		} else if(a.title == 'link') {
			xsImgLinks[k] = a.innerHTML;
		} else if(a.title == 'subject') {
			xsImgTexts[k] = a.innerHTML;
		}
		j++;
		if(j == 3) {
			j = 0;
			k++;
		}
	}
}
document.write("<style type=\"text/css\">#slidearea { width:" + xsImgSize[0] + "px; height:" + xsImgSize[1] + "px; overflow: hidden; margin: 0 auto; text-align: center; } #slidearea img { width: " + xsImgSize[0] + "px; height: " + xsImgSize[1] + "px; } #slidefooter {width:" + xsImgSize[0] + "px; } </style>")
document.write("<div id=\"slidearea\">")
if (xsImgs.length != 0) {
	document.write("<a href=\""+ xsImgLinks[0] +"\" target=\"_blank\"><img src=\"" + xsImgs[0] + "\" onload=\"imgLoadNotify();\" \/><\/a>")
}
document.write("<\/div>")
if (xsTextBar != 0) {
	document.write("<div id=\"slidefooter\">")
	if (xsPlayBtn != 0) {
		document.write("<a id=\"slideplay\" title=\"播放\" href=\""+ xsImgLinks[0] +"\">播放<\/a>")
	}
	if (xsImgTexts.length != 0) {
		document.write("<a id=\"slideprev\" title=\"上一幅\" href=\"#\" onclick=\"rewind();return false\">&laquo;<\/a><a id=\"slidenext\" title=\"下一幅\" href=\"#\" onclick=\"forward();return false\" style=\"text-align: center; text-decoration: none;\">&raquo;<\/a><p id=\"slidetext\"><a href=\""+ xsImgLinks[0] +"\" target=\"_blank\">"+ xsImgTexts[0] +"<\/a><\/p>")
	}
	document.write("<\/div>")
}


var arrPreload = new Array();
var begImg  = 0;
var arrPreload = new Array();
var spd = 2;

function init()
{
    preloadRange(0,_PRELOADRANGE-1);

    curImg = begImg;
    if (curImg < 0 || curImg > xsImgs.length - 1)
	curImg = xsImgs.length - 1;
    changeSlide();
    setTimeout("play()", 3000)
}



var curImg = 0;
var timerId = -1;
var interval = 3500;
var imgIsLoaded = false;

var current_transition = 15;
var flag = true;
var bFirst = false;


var transitions = new Array;
transitions[0] = "progid:DXImageTransform.Microsoft.Fade(duration=1)";
transitions[1] = "progid:DXImageTransform.Microsoft.Blinds(Duration=1,bands=20)";
transitions[2] = "progid:DXImageTransform.Microsoft.Checkerboard(Duration=1,squaresX=20,squaresY=20)";
transitions[3] = "progid:DXImageTransform.Microsoft.Strips(Duration=1,motion=rightdown)";
transitions[4] = "progid:DXImageTransform.Microsoft.Barn(Duration=1,orientation=vertical)";
transitions[5] = "progid:DXImageTransform.Microsoft.GradientWipe(duration=1)";
transitions[6] = "progid:DXImageTransform.Microsoft.Iris(Duration=1,motion=out)";
transitions[7] = "progid:DXImageTransform.Microsoft.Wheel(Duration=1,spokes=12)";
transitions[8] = "progid:DXImageTransform.Microsoft.Pixelate(maxSquare=10,duration=1)";
transitions[9] = "progid:DXImageTransform.Microsoft.RadialWipe(Duration=1,wipeStyle=clock)";
transitions[10] = "progid:DXImageTransform.Microsoft.RandomBars(Duration=1,orientation=vertical)";
transitions[11] = "progid:DXImageTransform.Microsoft.Slide(Duration=1,slideStyle=push)";
transitions[12] = "progid:DXImageTransform.Microsoft.RandomDissolve(Duration=1,orientation=vertical)";
transitions[13] = "progid:DXImageTransform.Microsoft.Spiral(Duration=1,gridSizeX=40,gridSizeY=40)";
transitions[14] = "progid:DXImageTransform.Microsoft.Stretch(Duration=1,stretchStyle=push)";
transitions[15] = "special case";
var transition_count = 15;

var _PRELOADRANGE = 5;

function preloadRange(intPic,intRange) {
	var divStr = "";
	for (var i=intPic; i<(intPic+intRange); i++) {
		arrPreload[i] = new Image();
		arrPreload[i].src = xsImgs[i];
	}
	return false;
}

function imgLoadNotify()
{
    imgIsLoaded = true;
}

function changeSlide(n)
{
    if (document.all)
	{
		var do_transition;
		if (current_transition == (transition_count))
		{
			do_transition = Math.floor(Math.random() * transition_count);
		}
		else
		{
			do_transition = current_transition;
		}
		document.all.slidearea.style.filter=transitions[do_transition];
		document.all.slidearea.filters[0].Apply();
    }

    imgIsLoaded = false;

	if (xsImgs.length !=0) {
		var slideImage = "<a href=\""+ xsImgLinks[curImg] +"\" target=\"_blank\"><img src=\"" + xsImgs[curImg] + "\" onload=\"imgLoadNotify();\" /><\/a>";
		document.getElementById("slidearea").innerHTML = slideImage ;

		if (xsTextBar != 0) {
			var slideText = "<a href=\""+ xsImgLinks[curImg] +"\" target=\"_blank\">"+ xsImgTexts[curImg] +"<\/a>";
			document.getElementById("slidetext").innerHTML = slideText;
			if (xsPlayBtn != 0) {
				document.getElementById("slideplay").href = xsImgLinks[curImg];
			}
		}

		if (document.all)
		{
			document.all.slidearea.filters[0].Play();
		}
	}
}

function forward()
{
	imgIsLoaded = false;
	if (!arrPreload[curImg+1])
	{
		curImg++;
		if (curImg >= xsImgs.length)
		{
			curImg = 0;
		}
	}
	else
	{
		curImg++;
		if (curImg >= xsImgs.length)
		{
			curImg = 0;
		}
	}
	changeSlide();
}

function rewind()
{
	curImg--;
	if (curImg < 0)
	{
		curImg = xsImgs.length-1;
	}
	changeSlide();
}

function stop()
{
    window.clearInterval(timerId);
    timerId = -1;
    imgIsLoaded = true;
}

function play()
{
    if (timerId == -1)
		timerId = window.setInterval('forward();', interval);
}


init();

JS調用, 調用, admin, t, d