用Dreamweaver怎么做出这样的效果？有没有教程，不要代码。。
展开全部
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>banner(点选)</title>
<link rel="stylesheet" type="text/css" href="css/public.css"/>
<script language="javascript" src="js/jQuery v1.7.1.js"></script>
<script language="javascript">
$(document).ready(function(){
$(".ImgLB1 > li:eq(0)").show();
$(".ImgBtn1 > li:eq(0)").addClass("Ahover");
$ImgLB1Li = $(".ImgLB1 > li");
$ImgBtnLi = $(".ImgBtn1 > li");
$ImgBtnLi.click(function(){
LiDiv = $ImgBtnLi.index(this);
$ImgBtnLi.removeClass("Ahover");
$(this).addClass("Ahover");
$ImgLB1Li.hide();
$(".ImgLB1 > li:eq("+LiDiv+")").show();
});
})
</script>
<style type="text/css">
<!--
.BannerCont { margin:0 auto; width:610px; height:310px; overflow:hidden; position:relative; border:1px solid #f00;}
.ImgLB1 li {width:610px; height:310px; display:none;}
.ImgLB1 li img {width:610px; height:310px;}
.ImgBtn1 { position:absolute; bottom:5px; right:10px; z-index:999;}
.ImgBtn1 li { float:left; border:1px solid #fff; padding:2px 5px; margin:1px; font-size:12px; cursor:pointer; background:#0f0;}
.ImgBtn1 li:hover { border:1px solid #f00; background:#0FF;}
.ImgBtn1 .Ahover { border:1px solid #f00; background:#0FF;}
-->
</style>
</head>
<body>
<div class="BannerCont">
<ul class="ImgLB1">
<li><img src="images/banner1.jpg" /></li>
<li><img src="images/banner2.jpg" /></li>
<li><img src="images/banner3.jpg" /></li>
<li><img src="images/banner4.jpg" /></li>
</ul>
<ul class="ImgBtn1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
</html>
没图片，一般IE核心的浏览器就可以看出效果，实在不行，你就把图片地址改一下
<!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>banner(点选)</title>
<link rel="stylesheet" type="text/css" href="css/public.css"/>
<script language="javascript" src="js/jQuery v1.7.1.js"></script>
<script language="javascript">
$(document).ready(function(){
$(".ImgLB1 > li:eq(0)").show();
$(".ImgBtn1 > li:eq(0)").addClass("Ahover");
$ImgLB1Li = $(".ImgLB1 > li");
$ImgBtnLi = $(".ImgBtn1 > li");
$ImgBtnLi.click(function(){
LiDiv = $ImgBtnLi.index(this);
$ImgBtnLi.removeClass("Ahover");
$(this).addClass("Ahover");
$ImgLB1Li.hide();
$(".ImgLB1 > li:eq("+LiDiv+")").show();
});
})
</script>
<style type="text/css">
<!--
.BannerCont { margin:0 auto; width:610px; height:310px; overflow:hidden; position:relative; border:1px solid #f00;}
.ImgLB1 li {width:610px; height:310px; display:none;}
.ImgLB1 li img {width:610px; height:310px;}
.ImgBtn1 { position:absolute; bottom:5px; right:10px; z-index:999;}
.ImgBtn1 li { float:left; border:1px solid #fff; padding:2px 5px; margin:1px; font-size:12px; cursor:pointer; background:#0f0;}
.ImgBtn1 li:hover { border:1px solid #f00; background:#0FF;}
.ImgBtn1 .Ahover { border:1px solid #f00; background:#0FF;}
-->
</style>
</head>
<body>
<div class="BannerCont">
<ul class="ImgLB1">
<li><img src="images/banner1.jpg" /></li>
<li><img src="images/banner2.jpg" /></li>
<li><img src="images/banner3.jpg" /></li>
<li><img src="images/banner4.jpg" /></li>
</ul>
<ul class="ImgBtn1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
</html>
没图片，一般IE核心的浏览器就可以看出效果，实在不行，你就把图片地址改一下
追问
把图片放进去不可以啊，能不能麻烦你做一下发到我邮箱呢？
905950118@qq.com
追答
好吧，迟了点，别见怪，邮箱去收呗,记得分分哦
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
博思aippt
2024-07-20 广告
博思AIPPT是基于ai制作PPT的智能在线工具，它提供了4种AI制作PPT的方式，包括AI生成大纲、AI直接生成PPT、文本生成PPT、AI提炼文档生成PPT，一站式集成多种AI生成PPT的方式，可满足办公用户的不同需求和使用场景。ai生...
点击进入详情页
本回答由博思aippt提供
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
