jQuery九宫格图片特效鼠标悬停导航滑动图片切换特效代码下载


jQuery九宫格图片特效鼠标悬停导航滑动图片切换特效代码下载
jQuery九宫格图片特效鼠标悬停导航滑动图片切换特效代码下载以及九宫格图片、鼠标悬停、滑动图片切换等js/jquery网页特效代码下载。

1. 引入CSS

<link href="css/style.css" rel="stylesheet" type="text/css" />

2. 引入JS

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/slider.js"></script>

3. HTML代码

<div class="zhuanti_box">
	<div id="slideBox">
		<div class="J_slide">
			<div class="J_slide_clip">
				<ul class="J_slide_list">
					<li class="J_slide_item">
						<a href="https://www.51qianduan.com/">51前端</a>
						<div class="J_slide_advance">
							<p><a href="https://www.51qianduan.com/">51前端</a><span class="mask"></span></p>
							<p><a href="https://www.51qianduan.com/">51前端</a><span class="mask"></span></p>
							<p style="margin-right:0;"><a href="https://www.51qianduan.com/">51前端</a><span class="mask"></span></p>
						</div>
					</li>
					<li class="J_slide_item">
						<a href="https://www.51qianduan.com/">51前端</a>
						<div class="J_slide_advance">
							<p><a href="https://www.51qianduan.com/">51前端</a></p>
							<p><a href="https://www.51qianduan.com/">51前端</a></p>
							<p style="margin-right:0;"><a href="https://www.51qianduan.com/">51前端</a></p>
						</div>
					</li>
					<li class="J_slide_item">
						<a href="https://www.51qianduan.com/">51前端</a>
						<div class="J_slide_advance">
							<p><a href="https://www.51qianduan.com/">51前端</a></p>
							<p><a href="https://www.51qianduan.com/">51前端</a></p>
							<p style="margin-right:0;"><a href="https://www.51qianduan.com/">51前端</a></p>
						</div>
					</li>
					<li class="J_slide_item">
						<a href="https://www.51qianduan.com/">51前端</a>
						<div class="J_slide_advance">
							<p><a href="https://www.51qianduan.com/">51前端</a></p>
							<p><a href="https://www.51qianduan.com/">51前端</a></p>
							<p style="margin-right:0;"><a href="https://www.51qianduan.com/">51前端</a></p>
						</div>
					</li>
					<li class="J_slide_item">
						<a href="https://www.51qianduan.com/">51前端</a>
						<div class="J_slide_advance">
							<p><a href="https://www.51qianduan.com/">51前端</a></p>
							<p><a href="https://www.51qianduan.com/">51前端</a></p>
							<p style="margin-right:0;"><a href="https://www.51qianduan.com/">51前端</a></p>
						</div>
					</li>
					<li class="J_slide_item">
						<a href="https://www.51qianduan.com/">51前端</a>
						<div class="J_slide_advance">
							<p><a href="https://www.51qianduan.com/">51前端</a></p>
							<p><a href="https://www.51qianduan.com/">51前端</a></p>
							<p style="margin-right:0;"><a href="https://www.51qianduan.com/">51前端</a></p>
						</div>
					</li>
				</ul>
			</div>
			<ul class="J_slide_trigger">
				<li> <a href="https://www.51qianduan.com/">51前端</a></li>
				<li> <a href="https://www.51qianduan.com/">51前端</a></li>
				<li> <a href="https://www.51qianduan.com/">51前端</a></li>
				<li> <a href="https://www.51qianduan.com/">51前端</a></li>
				<li> <a href="https://www.51qianduan.com/">51前端</a></li>
				<li> <a href="https://www.51qianduan.com/">51前端</a></li>
			</ul>
		</div>
	</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
	new Slide('#slideBox',{index: 1 ,effect:'slide', firstDelay:8});
	$(".J_slide_item a").mouseover(function(){
		$(this).css("opacity",0.7);;
	}).mouseout(function(){
		$(this).css("opacity",1);;
	});
});
</script> 

相关推荐

发表评论

相关文章