jquery特效幻灯片效果

最新推荐文章于 2021-11-27 12:17:12 发布

阿聪世家

最新推荐文章于 2021-11-27 12:17:12 发布

阅读量1.1k

点赞数 1

分类专栏：各种焦点图滚动效果网站常用jquery效果 jquery学习文章标签： jquery 特效幻灯片滚动自动

本文链接：https://blog.csdn.net/congcong875/article/details/9342837

版权

网站常用jquery效果同时被 3 个专栏收录

52 篇文章 0 订阅

订阅专栏

jquery学习

32 篇文章 0 订阅

订阅专栏

各种焦点图滚动效果

11 篇文章 0 订阅

订阅专栏

jquery特效幻灯片效果，效果图如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<title>jquery特效</title>
<style>
/* CSS Document */
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0;}
ul,ol,li{list-style:none;}
input,button{margin:0;font-size:12px;vertical-align:middle;}
body{font-size:12px;font-family:Arial, Helvetica, sans-serif;  text-align:center; margin:0 auto; }
table{border-collapse:collapse;border-spacing:0;}
a{ color:#333; text-decoration:none;}
.box{ width:420px; margin:20px auto; position:relative; overflow:hidden; text-align:left;}
.box img{border:0px; width:420px;}
.big{ width:100%; float:left; height:196px; overflow:hidden; margin-bottom:2px;}
.big a{ display:none;}
.big span{ position:absolute; left:0; top:167px; font-size:13px; color:#fff; z-index:11; height:30px; line-height:30px; text-indent:1em; width:100%; )}
.num{ width:424px; margin-right:-24px; float:left; height:53px; padding-top:2px;}
.num li{ width:99px; padding-top:5px; padding-left:1px; cursor:pointer; float:left; margin-right:6px;height:48px;}
.num img{ width:98px;}
.num li.on{ background:url(../images/bg01.gif) no-repeat 0 0;}
.txtbg{ position:absolute; left:0; top:167px; width:100%; height:30px; background:#000; opacity:0.5;filter:alpha(opacity=50); z-index:10;}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
var timer;
var i=-1;
var offset=3000;
function roll(){
	i++;
	if(i>3){
		i=0;
	}
	slide(i);
	timer=setTimeout(roll,offset)
}
function slide(i){
	$('.big a').eq(i).fadeIn().siblings().hide();
	$('.num li').eq(i).siblings().removeClass('on');
	$('.num li').eq(i).addClass('on');
}
function stopBig(){
	$('.big').hover(function(){
		clearTimeout(timer);
	},function(){
		timer=setTimeout(roll,offset);
	});
}
function stoproll(){
	$('.num li').hover(function(){
		clearTimeout(timer);
		i=$(this).index();
		slide(i);
	},function(){
		timer=setTimeout(roll,offset);
	})
}
$(function(){
	roll();
	stoproll();
	stopBig()
})
</script>
</head>
<body>
<div class="box">
	<div class="txtbg"> </div>
	<div class="big">
		<a href="#" style="display:block"><img src="images/1.jpg" /><span>标题1</span></a>
		<a href="#"><img src="images/2.jpg" /><span>标题2</span></a>
		<a href="#"><img src="images/3.jpg" /><span>标题3</span></a>
		<a href="#"><img src="images/4.jpg" /><span>标题4/span></a>
	</div>
	<ul class="num">
		<li class="on"><img src="images/1s.jpg" /></li>
		<li><img src="images/2s.jpg" /></li>
		<li><img src="images/3s.jpg" /></li>
		<li><img src="images/4s.jpg" /></li>
	</ul>
</div>
</body>
</html>