<p><span style="color: #ff0000"><strong>1、JQuery效果</strong></span></p>
<p style="text-align: center"><span style="color: #ff0000"><img alt="" id="theimg" src="https://beijingoptbbs.oss-cn-hangzhou.aliyuncs.com/jb/2426819-c63623df500bbd6ddd5914c3fa64d7a8" style="font-size: 12px; border-top: 0px; font-family: "Microsoft Yahei", simsun, arial, sans-serif; border-right: 0px; white-space: normal; word-spacing: 0px; border-bottom: 0px; text-transform: none; font-weight: normal; color: rgb(51,51,51); padding-bottom: 0px; font-style: normal; text-align: left; padding-top: 0px; padding-left: 0px; margin: 0px; border-left: 0px; orphans: 2; widows: 2; letter-spacing: normal; padding-right: 0px; background-color: rgb(255,255,255); text-indent: 0px; font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px"></span></p>
<p><span style="color: #ff0000"><strong>2、步骤分析：</strong></span></p>
<p>第一步：引入jQuery相关的文件</p>
<p>第二步：书写页面加载函数</p>
<p>第三步：在页面加载函数中，获取显示广告图片的元素。</p>
<p>第四步：设置定时操作(显示广告图片的函数)</p>
<p>第五步：在显示广告图片的函数中，使用jQuery的方法让广告图片显示(show())</p>
<p>第六步：清除显示广告图片的定时操作</p>
<p>第七步：设置定时操作(隐藏广告图片的函数)</p>
<p>第八步：在隐藏广告图片的函数中，使用jQuery的方法让广告图片隐藏(hide())</p>
<p>第九步：清除隐藏广告图片的定时操作</p>
<div class="blockcode">
<pre class="brush:js;">
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script>
$(function(){
//1.书写显示广告图片的定时操作
time=setInterval("showAd()",3000);
});
//2.书写显示图片的函数
function showAd(){
//3.获取广告图片，并让其显示
//$("#img_2").show(1000);
$("#img_2").slideDown(3000); //滑入
//4.清除显示图片的定时操作
clearInterval(time);
//5.设置隐藏图片的定时操作
time=setInterval("hiddenAd()",3000);
}
function hiddenAd(){
//6.获取广告图片让其隐藏
//$("#img_2").hide();
$("#img_2").slideUp(3000); //滑出
//7.清除隐藏图片的定时操作
clearInterval(time);
}
</script></pre>
</div>
<p><span style="color: #ff0000"><strong>3、最终实现代码：</strong></span></p>
<div class="blockcode">
<pre class="brush:js;">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<style>
#father{
border: 0px solid black;
width: 1300px;
height: 1600px;
margin: auto;
}
#logo{
border: 0px solid black;
width: 1300px;
height: 50px;
}
.top{
border: 0px solid blue;
width: 431px;
height: 50px;
float: left;
}
#top{
padding-top: 12px;
height: 38px;
}
#menu{
border: 0px solid red;
width:1300px;
height: 50px;
background: black;
margin-bottom: 10px;
}
ul li{
display: inline;
color: white;
}
#product{
border: 0px solid goldenrod;
width: 1300px;
height: 550px;
}
#product_top{
border: 0px solid blue;
width: 100%;
height: 43px;
padding-top: 5px;
}
#product_bottom{
border: 0px solid green;
width: 100%;
height: 498px;
}
#product_bottom_left{
border: 0px solid red;
width: 200px;
height: 498px;
float: left;
}
#product_bottom_right{
border: 0px solid saddlebrown;
width: 1094px;
height: 498px;
float: left;
}
#big{
border: 0px solid hotpink;
width: 545px;
height: 247px;
float: left;
}
.small{
border: 0px solid blue;
width: 180px;
height: 247px;
float: left;
/*让里面的内容居中*/
text-align: center;
}
#bottom{
text-align: center;
}
/*去掉超链接的下划线*/
a{
text-decoration: none;
}
</style>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script>
$(function(){
//1.书写显示广告图片的定时操作
time=setInterval("showAd()",3000);
});
//2.书写显示图片的函数
function showAd(){
//3.获取广告图片，并让其显示
//$("#img_2").show(1000);
$("#img_2").slideDown(3000); //滑动
//4.清除显示图片的定时操作
clearInterval(time);
//5.设置隐藏图片的定时操作
time=setInterval("hiddenAd()",3000);
}
function hiddenAd(){
//6.获取广告图片让其隐藏
//$("#img_2").hide();
$("#img_2").slideUp(3000);
//7.清除隐藏图片的定时操作
clearInterval(time);
}
</script>
</head>
<body body onload="init()"& |
|
转播
