javascript快速实现页面中的轮换显示的新闻图片效果 15
:利用jQuery库实现DOM操作与事件处理的方法要求:新闻图片能自动以3秒时间间隔轮换显示5个不同的新闻图片定时显示:window.setInterval(ShowNe...
:利用jQuery库实现DOM操作与事件处理的方法
要求:新闻图片能自动以3秒时间间隔轮换显示5个不同的新闻图片
定时显示:
window.setInterval(ShowNext, 3000);
图片处理:
轮换显示:
Img1 img2 img3 img4 img5 (做循环处理)
“#Img”+vari 展开
要求:新闻图片能自动以3秒时间间隔轮换显示5个不同的新闻图片
定时显示:
window.setInterval(ShowNext, 3000);
图片处理:
轮换显示:
Img1 img2 img3 img4 img5 (做循环处理)
“#Img”+vari 展开
展开全部
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="../Scripts/jquery-2.0.1.min.js"></script>
<script type="text/javascript" src="Js/sd.js"></script>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
.banner
{
position: relative;
width: 80%;
margin: auto;
overflow: auto;
font-size: 18px;
line-height: 24px;
text-align: center;
color: rgba(255,255,255,.6);
text-shadow: 0 0 1px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.3);
background: #5b4d3d;
box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.banner ul
{
position: relative;
}
.banner li
{
list-style-type: none;
width: 100%;
height: 400px;
}
.banner ul li
{
float: left;
}
</style>
</head>
<body>
<div class="banner">
<ul>
<li style="background-image: url('../Images/2.jpg')"></li>
<li style="background-image: url('../Images/3.jpg')"></li>
<li style="background-image: url('../Images/4.jpg')"></li>
<li style="background-image: url('../Images/3.jpg')"></li>
<li style="background-image: url('../Images/4.jpg')"></li>
</ul>
</div>
</body>
</html>
留下邮箱 发JS脚本 发不完
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="../Scripts/jquery-2.0.1.min.js"></script>
<script type="text/javascript" src="Js/sd.js"></script>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
.banner
{
position: relative;
width: 80%;
margin: auto;
overflow: auto;
font-size: 18px;
line-height: 24px;
text-align: center;
color: rgba(255,255,255,.6);
text-shadow: 0 0 1px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.3);
background: #5b4d3d;
box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.banner ul
{
position: relative;
}
.banner li
{
list-style-type: none;
width: 100%;
height: 400px;
}
.banner ul li
{
float: left;
}
</style>
</head>
<body>
<div class="banner">
<ul>
<li style="background-image: url('../Images/2.jpg')"></li>
<li style="background-image: url('../Images/3.jpg')"></li>
<li style="background-image: url('../Images/4.jpg')"></li>
<li style="background-image: url('../Images/3.jpg')"></li>
<li style="background-image: url('../Images/4.jpg')"></li>
</ul>
</div>
</body>
</html>
留下邮箱 发JS脚本 发不完
追问
邮箱已经发私信,谢谢
追答
没看见,算了 你还是去应用这个库吧 加到我给你的HTML页面中就是了
http://www.bootcss.com/p/unslider/
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
像这种不用jquery,使用<marquee>这个标签比较好,宽度 高度 速度都可以定义
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
ry库实现DOM操作与事件处理的方法
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询