jquery简单焦点图片轮播滚动切换特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery简单焦点图片轮播滚动切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="JS代码,图片切换,焦点图片,图片轮换,jQuery" />
<meta name="description" content="jquery实现的简单焦点图片切换效果，更多图片切换,焦点图片,图片轮换" />
<title>jquery简单焦点图片切换效果</title>
<style type="text/css" media="screen">
		/* Style the demo page */
		* { margin: 0; padding: 0; }
		body { font: normal 12px arial; background: #fff; padding: 40px; }
		h1 { font: normal 24px helvetica; color: #09afed; }
		p { padding-bottom: 20px; }
		a, a:visited { color: #09afed; text-decoration: underline; }
		a:hover, a:visited:hover { color: #f00; }
		
		/* Slideshow code from here */
		.slideshow { position: relative; background: #fafafa; width: 315px; height: 195px; border: 1px solid #e5e5e5; margin-bottom: 20px; }
		.slideshow img { position: absolute; top: 3px; left: 3px; z-index: 1; background: #fff; }
		ul.recentlist { position: absolute; bottom: 12px; right: 4px; list-style: none; z-index: 2; }
		ul.recentlist li { margin: 0; padding: 0; display: inline; }
		ul.recentlist li a, ul.recentlist li a:visited { display: block; float: left; background: #e5e5e5; padding: 4px 8px; margin-right: 1px; color: #000; text-decoration: none; cursor: pointer; }
		ul.recentlist li a:hover, ul.recentlist li a:visited:hover { background: #666; color: #fff; }
		ul.recentlist li a.current { background: #f00; color: #fff; }
	</style>
	<script type="text/javascript" src="jquery.js" charset="utf-8"></script>
	<script type="text/javascript">
	$(document).ready(function() {
		var imgWrapper = $('.slideshow > img');
		// only show the first image, hide the rest
		imgWrapper.hide().filter(':first').show();
		
		$('ul.recentlist li a').click(function () {
		
			// check if this item doesn't have class "current"
			// if it has class "current" it must not execute the script again
			if (this.className.indexOf('current') == -1){
				imgWrapper.hide();
				imgWrapper.filter(this.hash).fadeIn(500);
				$('ul.recentlist li a').removeClass('current');
				$(this).addClass('current');
			}
			return false;
		});
	});
	</script>

</head>
<body>
	<center>
	<h1>jquery简单焦点图片切换效果</h1>
	<p></p>
	<div class="slideshow">
		<ul class="recentlist">
			<li><a class="current" href="#slide1">1</a></li>
			<li><a href="#slide2">2</a></li>

			<li><a href="#slide3">3</a></li>
		</ul>
		<img id="slide1" src="images/testImage4.jpg" alt="Image 1 slideshow" />
		<img id="slide2" src="images/testImage3.jpg" alt="Image 2 slideshow" />
		<img id="slide3" src="images/testImage2.jpg" alt="Image 3 slideshow" />
	</div>
	</center>	
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)