# focus

**Repository Path**: xiaofengxx/focus

## Basic Information

- **Project Name**: focus
- **Description**: JS焦点图
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2014-12-22
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

##图片滚动焦点图
###js参数
	var defaults={
		time:3000,//自动滚动时间 3000(3秒)
		animate:'left',//目前暂时只有 top|left 后续添加其他效果
		onClass:'on',//序列号选中样式名
		auto:true, //是否自动滚动 true[自动滚动] | false[不自动滚动]
		hasTit:true //设置是否有标题 true[有标题，对应图片title] | false[无标题]
	}
###div结构
	<div class="Gfouce myFouce">
		<div class="imgBox">
			<div><a href="#" target="_blank"><img src="img/o_p1.jpg" title="这是第一张"/></a></div>
			<div><a href="#" target="_blank"><img src="img/o_p2.jpg" title="这是第二张"/></a></div>
			<div><a href="#" target="_blank"><img src="img/o_p3.jpg" title="这是第三张"/></a></div>
			<div><a href="#" target="_blank"><img src="img/o_p4.jpg" title="这是第四张"/></a></div>
            <div><a href="#" target="_blank"><img src="img/o_p1.jpg" title="这是第一张"/></a></div>
			<div><a href="#" target="_blank"><img src="img/o_p2.jpg" title="这是第二张"/></a></div>
			<div><a href="#" target="_blank"><img src="img/o_p3.jpg" title="这是第三张"/></a></div>
			<div><a href="#" target="_blank"><img src="img/o_p4.jpg" title="这是第四张"/></a></div>
		</div>
	</div>
###css样式
	/*修改焦点图尺寸*/
	.Gfouce{width:478px;height:286px;position:relative; overflow:hidden}
	.Gfouce .imgBox img{width:478px;height:286px;border:none;vertical-align:top}
	.Gfouce .num{position:absolute;right:10px;bottom:10px;margin:0;padding:0;z-index:99999;}
	/*焦点图序列号样式*/
	.Gfouce .num li{float:left;margin-left:10px;cursor:pointer;list-style:none;width:20px;height:20px;font-size:12px;border:1px solid #fff;background:#D4D4D4;line-height:20px;text-align:center;color:#000;}
	/*焦点图序列号选中样式*/
	.Gfouce-on{background:#0099FF!important;color:#fff !important}
###初始化
	$(function(){
		$('.imgshow').Gfouce();	
	});