带缩略图库和缩放效果的幻灯片放映

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了带缩略图库和缩放效果的幻灯片放映相关的知识，希望对你有一定的参考价值。

Free javascript slideshow with thumbnail gallery, zoom-in-effect, zoom-out-effect and transparency-effect (opacity). Add as many pictures as you like. Each picture can be linked and commented. The thumbnail gallery can be displayed or hidden. True copy-and-paste installation. Most of the design can be set with CSS (within the style-tags). Works with Internet Explorer 5x/6x/7x/8x/9x, Firefox 3x/4x, Opera 7x/8x/9x/10x/11x, Google Chrome 4x/5x/6x/7x/8x/9x.
  1. <!---------------------------------->
  2. <!-- START OF SLIDESHOW SCRIPT -->
  3. <!---------------------------------->
  4.  
  5. <!-- START OF STYLE CONFIGURATION -->
  6. <style>
  7. .commentstyle{
  8. 	/* style attributes for the comments below the pictures */
  9. 	font-family:Arial;
  10. 	font-size:9pt;
  11. 	color:brown;
  12. 	vertical-align:middle;
  13. 	text-align:center;
  14. 	padding:5px;
  15. }
  16.  
  17. .thumbnailstyle{
  18. 	/* style attributes for the thumbnails */
  19. 	margin:3px;
  20. 	width:67px;
  21. 	border-style:solid;
  22. 	border-width:1px;
  23. 	border-color:white;
  24.  
  25. 	/* shadow for Firefox */
  26. 	-moz-box-shadow: 2px 2px 3px #AAAAAA;
  27.  
  28. 	/* shadow for Safari and Chrome */
  29. 	-webkit-box-shadow: 2px 2px 3px #AAAAAA;
  30.  
  31. 	/* shadow for Opera */
  32. 	box-shadow: 2px 2px 3px #AAAAAA;
  33.  
  34. 	/* shadow for Internet Explorer */
  35. 	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#AAAAAA');
  36. }
  37.  
  38. .slideshowstyle{
  39. 	/* style attributes for the slideshow-box */
  40. 	/* ATTENTION: width and height must be set within the script */
  41. 	overflow:hidden;
  42. 	border-style:solid;
  43. 	border-width:1px;
  44. 	border-color:white;
  45. 	background-color:#EEEEEE;
  46. 	background-image: url(tile.jpg);
  47. 	margin:3px;
  48.  
  49. 	/* shadow for Firefox */
  50. 	-moz-box-shadow: 5px 5px 8px #AAAAAA;
  51.  
  52. 	/* shadow for Safari and Chrome */
  53. 	-webkit-box-shadow: 5px 5px 8px #AAAAAA;
  54.  
  55. 	/* shadow for Opera */
  56. 	box-shadow: 5px 5px 5px #AAAAAA;
  57.  
  58. 	/* shadow for Internet Explorer */
  59. 	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#AAAAAA');
  60. }
  61. </style>
  62. <!-- END OF STYLE CONFIGURATION -->
  63.  
  64. <script>
  65. // CREDITS:
  66. // Slideshow with thumbnail gallery and zoom-effects
  67. // by Peter Gehrig 
  68. // Copyright (c) 2011 Peter Gehrig. All rights reserved.
  69.  
  70. // IMPORTANT: 
  71. // If you add this script to a script-library or script-archive 
  72. // you have to add a link to http://www.fabulant.com on the webpage 
  73. // where this script will be running.
  74.  
  75. var picture= [
  76.  
  77. /////////////////////////////////////////////
  78. // START OF SCRIPT CONFIGURATION 
  79. /////////////////////////////////////////////
  80.  
  81. // Set the URLs of images, the links and comments.
  82. // Add as many pictures a you like
  83. // Each image requires a block, as shown below:
  84. // {
  85. // imgsrc : "http://www.the-url.com/of/your/image.jpg",
  86. // linkto : "http://www.where-you-go-if-you-click-on-the big-image.com",
  87. // comment : "the comment below the image",
  88. // }, each block ends with a comma (exception: the very last block)
  89.  
  90. {
  91. imgsrc : "../../pics/300x180bluefish.jpg",
  92. linkto : "http://www.hotscripts.com",
  93. comment : "Let's go fishing "
  94. }, // comma required
  95.  
  96. {
  97. imgsrc : "../../pics/300x180bonbons.jpg",
  98. linkto : "http://www.hotscripts.com",
  99. comment : "Not as sweet as you"
  100. }, // comma required
  101.  
  102. {
  103. imgsrc : "../../pics/300x180butterfly.jpg",
  104. linkto : "http://www.hotscripts.com",
  105. comment : "Fly away, my little butterfly"
  106. }, // comma required
  107.  
  108. {
  109. imgsrc : "../../pics/300x180castle.jpg",
  110. linkto : "http://www.hotscripts.com",
  111. comment : "My castle is my home"
  112. }, // comma required
  113.  
  114. {
  115. imgsrc : "../../pics/300x180fruitshop.jpg",
  116. linkto : "http://www.hotscripts.com",
  117. comment : "Are fruits really healthy for you? "
  118. }, // comma required
  119.  
  120. {
  121. imgsrc : "../../pics/300x180herbstwald.jpg",
  122. linkto : "http://www.hotscripts.com",
  123. comment : "Did you see Robin Hood behind the trees?"
  124. }, // comma required
  125.  
  126. {
  127. imgsrc : "../../pics/300x180lemons.jpg",
  128. linkto : "http://www.hotscripts.com",
  129. comment : "I like lemons"
  130. }, // comma required
  131.  
  132. {
  133. imgsrc : "../../pics/300x180tree.jpg",
  134. linkto : "http://www.hotscripts.com",
  135. comment : "The truth about trees "
  136. } // ATTENTION: the last entry requires NO final comma
  137.  
  138. ]
  139.  
  140. // pause (seconds)
  141. var stillstand=2
  142.  
  143. // speed of zooming. Higher value means faster zooming
  144. var zoomspeed=20
  145.  
  146. // width of slideshow (px). Width of slideshow and width of images should be identical
  147. var slideshowwidth=300
  148.  
  149. // height of slideshow (px). Height of slideshow and height of images should be identical
  150. var slideshowheight=180
  151.  
  152. // Shall thumbnails be displayed? Enter "yes" or "no"
  153. var show_thumbnails="yes"
  154.  
  155. /////////////////////////////////////////////
  156. // END OF SCRIPT CONFIGURATION 
  157. /////////////////////////////////////////////
  158.  
  159. // Do not edit below this line
  160. var imgpreload=new Array()
  161. for (iii=0;iii<=picture.length-1;iii++) {
  162. 	imgpreload[iii]=new Image()
  163. 	imgpreload[iii].src=picture[iii].imgsrc
  164. }
  165.  
  166. var positionleft=0
  167. var positiontop=0
  168. var timer
  169. var marginright=0
  170. var i_fadestrength=0
  171. var i_images=0
  172. var step=1
  173. var content_image
  174. var content_text
  175. var imageboxwidth=0
  176. var imageboxheight=0
  177. var imagebasicwidth=0
  178. var imagebasicheight=0
  179. var moveon=true
  180. var timer
  181. var timerpause
  182. var stopid
  183. stillstand*=1000
  184.  
  185. function setimage() {
  186. 	if (i_images>=picture.length) {i_images=0}
  187. 	content_image="<a href='"+picture[i_images].linkto+"'><img border=0 name='newpic' src='"+picture[i_images].imgsrc+"'></a>"
  188. 	content_text=picture[i_images].comment
  189. 	document.getElementById('imagebox').innerhtml=content_image
  190. 	document.getElementById('textbox').innerHTML=content_text
  191. 	imagebasicwidth=document.newpic.width
  192. 	imagebasicheight=document.newpic.height
  193. 	if (show_thumbnails=="yes"){
  194. 		if (document.all) {
  195. 			for (i=0;i<=picture.length-1;i++) {
  196. 				document.getElementById(i).filters.alpha.opacity=30
  197. 			}
  198. 		}
  199. 		else {
  200. 			for (i=0;i<=picture.length-1;i++) {
  201. 				document.getElementById(i).style.opacity=0.3
  202. 			}
  203. 		}
  204. 	}
  205. 	timer=setTimeout("startenlarge()",50)
  206. }
  207.  
  208. function startenlarge() {
  209. 	if (moveon) {
  210. 		if (imageboxwidth<imagebasicwidth) {
  211. 			content_image="<a href='"+picture[i_images].linkto+"'><img border=0 name='newpic' src='"+picture[i_images].imgsrc+"' width="+imageboxwidth+"></a>"
  212. 			document.getElementById('imagebox').innerHTML=content_image
  213. 			imageboxwidth=document.newpic.width
  214. 			imageboxheight=document.newpic.height
  215. 			if (document.all) {
  216. 				document.getElementById('imagebox').filters.alpha.opacity=Math.floor(i_fadestrength)
  217. 				document.getElementById('textbox').filters.alpha.opacity=Math.floor(i_fadestrength)
  218. 				if (show_thumbnails=="yes"){
  219. 					document.getElementById(i_images).filters.alpha.opacity=Math.floor(i_fadestrength)
  220. 				}
  221.  
  222. 			}
  223. 			else {
  224. 				document.getElementById('imagebox').style.opacity=(i_fadestrength)/100
  225. 				document.getElementById('textbox').style.opacity=(i_fadestrength)/100
  226. 				if (show_thumbnails=="yes"){
  227. 					document.getElementById(i_images).style.opacity=(i_fadestrength)/100
  228. 				}
  229. 			}
  230. 			document.getElementById('imagebox').style.left=(slideshowwidth/2-imageboxwidth/2)+"px"
  231. 			document.getElementById('imagebox').style.top=(slideshowheight/2-imageboxheight/2)+"px"
  232. 			document.getElementById('imagebox').style.overflowX="hidden"
  233. 			document.getElementById('imagebox').style.visibility="visible"
  234. 			step+=0.5
  235. 			i_fadestrength+=(100/(slideshowwidth/zoomspeed))
  236. 			imageboxwidth+=zoomspeed
  237. 			timer=setTimeout("startenlarge()",50)
  238. 		}
  239. 		else {
  240. 			clearTimeout(timer)
  241. 			pauseimage()
  242. 		}
  243. 	}
  244. 	else {
  245. 		clearTimeout(timer)
  246. 		stopanimation()
  247. 	}
  248. }
  249.  
  250. function pauseimage() {
  251. 	if (moveon) {
  252. 		content_image="<a href='"+picture[i_images].linkto+"'><img border=0 name='newpic' src='"+picture[i_images].imgsrc+"' width="+imagebasicwidth+" height="+imagebasicheight+"></a>"
  253.  
  254. 		document.getElementById('imagebox').style.left=0+"px"
  255. 		document.getElementById('imagebox').style.top=0+"px"
  256. 		document.getElementById('imagebox').innerHTML=content_image
  257. 		if (document.all) {
  258. 			document.getElementById('imagebox').filters.alpha.opacity=100
  259. 			document.getElementById('textbox').filters.alpha.opacity=100
  260. 			if (show_thumbnails=="yes"){
  261. 				document.getElementById(i_images).filters.alpha.opacity=100
  262. 			}
  263. 		}
  264. 		else {
  265. 			document.getElementById('imagebox').style.opacity=1
  266. 			document.getElementById('textbox').style.opacity=1
  267. 			if (show_thumbnails=="yes"){
  268. 				document.getElementById(i_images).style.opacity=1
  269. 			}
  270. 		}
  271. 		i_fadestrength=0
  272. 		timer=setTimeout("finishenlarge()",stillstand)
  273. 	}
  274. 	else {
  275. 		clearTimeout(timer)
  276. 		stopanimation()
  277. 	}
  278. }
  279.  
  280. function finishenlarge() {
  281. 	if (moveon) {
  282. 		if (i_fadestrength<=100) {		
  283. 			content_image="<a href='"+picture[i_images].linkto+"'><img border=0 name='newpic' src='"+picture[i_images].imgsrc+"' width="+imageboxwidth+"></a>"
  284. 			document.getElementById('imagebox').innerHTML=content_image
  285. 			imageboxwidth=document.newpic.width
  286. 			imageboxheight=document.newpic.height
  287. 			if (document.all) {
  288. 				document.getElementById('imagebox').filters.alpha.opacity=Math.floor(100-i_fadestrength)
  289. 				document.getElementById('textbox').filters.alpha.opacity=Math.floor(100-i_fadestrength)
  290. 			}
  291. 			else {
  292. 				document.getElementById('imagebox').style.opacity=(100-i_fadestrength)/100
  293. 				document.getElementById('textbox').style.opacity=(100-i_fadestrength)/100
  294. 			}
  295. 			document.getElementById('imagebox').style.left=(slideshowwidth/2-imageboxwidth/2)+"px"
  296. 			document.getElementById('imagebox').style.top=(slideshowheight/2-imageboxheight/2)+"px"
  297. 			document.getElementById('imagebox').style.overflow="hidden"
  298. 			document.getElementById('imagebox').style.visibility="visible"
  299. 			i_fadestrength+=5
  300. 			imageboxwidth+=zoomspeed
  301. 			timer=setTimeout("finishenlarge()",20)
  302. 		}
  303. 		else {
  304. 			clearTimeout(timer)
  305. 			i_fadestrength=0;
  306. 			step=1;
  307. 			i_images++
  308. 			if (i_images>=picture.length) {i_images=0}
  309. 			imageboxwidth=0
  310. 			timer=setTimeout("setimage()",50)
  311. 		}
  312. 	}
  313. 	else {
  314. 		clearTimeout(timer)
  315. 		stopanimation()
  316. 	}
  317. }
  318.  
  319. function onmsover(thisimg) {
  320. 	stopid=thisimg.id
  321. 	if (show_thumbnails=="yes"){
  322. 		if (document.all) {
  323. 			for (i=0;i<=picture.length-1;i++) {
  324. 				document.getElementById(i).filters.alpha.opacity=30
  325. 			}
  326. 			document.getElementById(stopid).filters.alpha.opacity=100
  327. 		}
  328. 		else {
  329. 			for (i=0;i<=picture.length-1;i++) {
  330. 				document.getElementById(i).style.opacity=0.3
  331. 			}
  332. 			document.getElementById(stopid).style.opacity=1
  333. 		}
  334. 	}
  335. 	moveon=false
  336. }
  337.  
  338. function onmsout(thisimg) {
  339. 	moveon=true
  340. 	i_images=thisimg.id
  341. 	clearTimeout(timer)
  342. 	setimage()
  343. }
  344.  
  345. function stopanimation() {
  346. 	content_image="<a href='"+picture[stopid].linkto+"'><img border=0 name='newpic' src='"+picture[stopid].imgsrc+"' width="+imagebasicwidth+" height="+imagebasicheight+"></a>"
  347. 	document.getElementById('imagebox').style.left=0+"px"
  348. 	document.getElementById('imagebox').style.top=0+"px"
  349. 	document.getElementById('imagebox').innerHTML=content_image
  350. 	content_text=picture[stopid].comment
  351. 	document.getElementById('textbox').innerHTML=content_text
  352. 	if (document.all) {
  353. 		document.getElementById('imagebox').filters.alpha.opacity=100
  354. 		document.getElementById('textbox').filters.alpha.opacity=100
  355. 	}
  356. 	else {
  357. 		document.getElementById('imagebox').style.opacity=1
  358. 		document.getElementById('textbox').style.opacity=1
  359. 	}
  360. 	i_fadestrength=0
  361. }
  362.  
  363. if (show_thumbnails=="yes") {
  364. 	document.write("<DIV id='roofthumbnails'  style='position:relative;width:"+slideshowwidth+"px;'>")
  365. 	for (i=0;i<=picture.length-1;i++) {
  366. 		document.write("<img class='thumbnailstyle' onmouseover='onmsover(this)' onmouseout='onmsout(this)' id='"+i+"' style='filter:alpha(opacity=50') src='"+picture[i].imgsrc+"'>")
  367. 	}
  368. 	document.write("</DIV>")
  369. }
  370.  
  371. document.write("<DIV id='roofimages' class='slideshowstyle' style='position:relative;width:"+slideshowwidth+"px;height:"+slideshowheight+"px;overflow:hidden'>")
  372. if (document.all) {
  373. 	document.write("<DIV id='imagebox' style='position:absolute;left:0px;top:0px;filter:alpha(opacity=0);'></DIV>")
  374. }
  375. else {
  376. 	document.write("<DIV id='imagebox' style='position:absolute;opacity:1;'></DIV>")
  377. }
  378.  
  379. document.write("</DIV>")
  380.  
  381. document.write("<DIV style='position:relative;width:"+slideshowwidth+"px;'>")
  382.  
  383. document.write("<DIV><table style='width:"+slideshowwidth+"px;'><tr><td class='commentstyle' id='textbox' style='filter:alpha(opacity=0);'></td></tr></table></DIV>")
  384.  
  385. document.write("<DIV><table style='width:"+slideshowwidth+"px;'><tr><td class='commentstyle' id='textbox' style='filter:alpha(opacity=0);'></td></tr></table></DIV>")
  386.  
  387. document.write("</DIV>")
  388.  
  389.  
  390. onload=setimage
  391. </script>
  392. <!---------------------------------->
  393. <!-- END OF SLIDESHOW SCRIPT -->
  394. <!---------------------------------->

以上是关于带缩略图库和缩放效果的幻灯片放映的主要内容，如果未能解决你的问题，请参考以下文章

深入浅出Flask(29)： H-ui前端框架的带缩略图幻灯片

ppt怎样让文字在幻灯片放映前先隐藏点击播放后再追个出现

DEMOCSS+JS实现带预览缩略图幻灯片

向 Fancybox 添加缩放

使用setInterval通过JQuery暂停幻灯片放映吗？

如何添加不与更新内容功能冲突的自动图像幻灯片放映