JQuery的animate、if函数和计时器制作自动滚动效果

品味人生 • 发布于 2019-02-01 21:37:02

这个家伙很害羞,不想介绍自己!

今天用有限的时间 在师傅的指导下 做了一个大图自动滚动的动画

所用知识点为 JQuery的 animate   和if函数  还有就是对JQuery的计时器的用法

下面就是写的代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="css/index.css" rel="stylesheet">
<script language="javascript" src="js/JQ.js"></script>
</head>
<body>
<div class="main">
<div class="maincon">
<ul>
<li><img src="images/001.jpg"></li>
<li><img src="images/002.jpg"></li>
<li><img src="images/003.jpg"></li>
<li><img src="images/004.jpg"></li>
</ul>
</div>
</div>
<div class="main_btn">
<a href="javascript:;" class="current">1</a>
<a href="javascript:;">2</a>
<a href="javascript:;">3</a>
<a href="javascript:;">4</a>
</div>

最精髓部分  JQuery

<script>
num = 0;
t = setInterval ("scollAuto()",1000);
var heightStr = $('.maincon li img').css('height');//获取大图宽度。。注意此位置的宽度为字符串
var heightImg = parseFloat(heightStr);//将字符串转化为数值类型
var imgLen = $('.maincon li').length;//获取li的个数
$('.maincon ul').css('height',imgLen*heightImg); //将ul的宽度设置为li的总个数乘以单个图片的宽度
//实现鼠标点击的时候触发事件
$('.main_btn a').click(function(){
var j =$('.main_btn a').index($(this)[0]);
$('.main_btn a').eq(j).addClass('current').siblings().removeClass();
$('.maincon ul').animate({top:-j*heightImg},1000);
});
function scollAuto (){
if (num == 4) {
num=0;
scollNext();
}else{
scollNext();
}
}
$(function(){
$('.maincon').mouseover(function(){
clearTimeout (t);
});
$('.maincon').mouseout(function(){
t =setInterval ("scollAuto()",1000);
});
})
function scollNext(){
$('.main_btn a').eq(num).addClass('current').siblings().removeClass();
$('.maincon ul').animate({top:-num*heightImg},"show");
num++
}
</script>

css部分

@charset "utf-8";/* CSS Document */
body,div,address,blockquote,iframe,ul,ol,dl,dt,dd,li,h1,h2,h3,h4,h5,h6,p,pre,table,caption,th,td,form,legend,fieldset,input,button,select,textarea{margin:0;padding:0;font-weight:normal;font-family:inherit}
ol,ul,li{list-style:none;}
img{margin:0;padding:0;border:none}
table{border-collapse:collapse;}
.cls{clear:both;}
.notxt{text-indent:-9999px;}
body{font-size:12px;font-family:Arial, Hel,Microsoft YaHei;}
a{color:#000;;text-decoration:none;outline:none;blr:expression(this.onFocus=this.blur());}
a:hover{color:#ff0000;}

.main {width:800px;height:300px;border:1px solid #00F;margin:0 auto;}
.maincon {width:800px;height:300px;overflow:hidden; position:relative;}
.maincon ul { position:absolute;left:0px;}
.maincon ul li {width:800px;height:300px;}
.maincon ul li img {width:800px;height:300px;}

.main_btn {text-align:center;padding-top:50px;}
.main_btn a {width:100px;height:30px;line-height:30px; background:#066;color:#fff;display:inline-block;text-align:center;}
.current { background:#666 !important;}