焦点图

最新推荐文章于 2022-12-19 17:15:19 发布

pvfhv

最新推荐文章于 2022-12-19 17:15:19 发布

阅读量1.6k

点赞数 1

分类专栏： javascript 文章标签：焦点图

本文链接：https://blog.youkuaiyun.com/pvfhv/article/details/8990220

版权

javascript 专栏收录该内容

66 篇文章

订阅专栏

在项目开发中，有一些经常会用到的效果，比如焦点图轮播，效果虽已司空见惯，但对于初学者来说，还是没有思路，只能网上下载，下载的一大堆代码又看不明白，无论布局还是js控制，只能撞大运式移置到项目上，不但影响了工作效率，还影响了项目的质量。以下是我在项目中自己开发的一个焦点图轮播效果，其实这个效果有两个要点：

1.布局，要知道在网页上动的物体一般都是通过position:absolute的定位方式，然后在它的外面有个position:relative的父级

2.脚本，找到要移动的元素，用定时器间隔一定时间修改它的left或top的值

效果图：

具体代码如下：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>焦点图</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			.scrollparent {
				width: 310px;
				height: 232px;
				margin: 50px auto;
				border: 1px solid lime;
				position: relative;
				overflow: hidden;
			}
			.scrollbanner {
				position: absolute;
				left: 0;
				top: 0;
			}
			.scrollbanner img {
				float: left;
			}
			.scrolldots {
				height: 15px;
				position: absolute;
				bottom: 10px;
			}
			.scrolldots li {
				width: 12px;
				height: 12px;
				list-style: none;
				border-radius: 50%;
				background-color: red;
				margin: 0 5px;
				float: left;
				cursor: pointer;
			}
			.scrolldots .active {
				background-color: white;
			}
		</style>
	</head>

	<body>
		<div class="scrollparent">
			<div class="scrollbanner">
				<img src="1.jpg" width="310" height="232">
				<img src="2.jpg" width="310" height="232">
				<img src="3.jpg" width="310" height="232">
				<img src="4.jpg" width="310" height="232">
				<img src="5.jpg" width="310" height="232">
				<img src="6.jpg" width="310" height="232">
			</div>
			<div class="scrolldots">
				<ul>
					<li class="active"></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>
		</div>
		<script src="jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="jquery.pixviewer.js" type="text/javascript" charset="utf-8"></script>
	</body>

</html>

jquery.pixviewer.js

(function($) {
	var i = 1,
	$scroll = $('.scrollbanner'),
	$img=$scroll.find('img'),
	count = $img.length,
	w=$img.width(),
	timer = null,
	interval = 5000;
		
	//滚动部分宽度
	$('.scrollparent .scrollbanner').width(w*count);
	
	//序列宽度
	var lt=($('.scrollparent').width()-$('.scrollparent .scrolldots').width())/2;
	$('.scrollparent .scrolldots').css('left',lt+'px');
	
	//滚动动画
	function scrollBanner() {
		if (!$scroll.is(':animated')) {
			$scroll.animate({
				left: -w * i
			}, 'fast', function() {
				$('.scrolldots li').removeClass('active').eq(i).addClass('active');

				i++;
				if (i == count) {
					i = 0;
				}
			});
		}
	}

	timer = setInterval(scrollBanner, interval);

	$scroll.hover(function() {
		clearInterval(timer);
	}, function() {
		timer = setInterval(scrollBanner, interval);
	});

	$('.scrolldots li').on('click', function() {
		i = $(this).index();
		$('.scrolldots li').removeClass('active').eq(i).addClass('active');
		scrollBanner();
	});
})(jQuery);

jquery的代码就不提供了，用户可以自行在网上下载，到此，大家可以拷贝以上代码放心使用了。

无js的焦点图效果，请点击：http://blog.youkuaiyun.com/pvfhv/article/details/5644179