网页设计中如何添加焦点切换轮播图呢
发布网友
发布时间：2022-04-21 04:49
共6个回答
热心网友
时间：2022-04-24 00:55
参考代码，还有一个js文件，留下邮箱发给你
<!DOCTYPE HTML><html lang="en-US">
<head>
<meta charset="UTF-8">
<title>jQuery图片放大变小切换代码</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.banner.js"></script>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
.banner{width:100%;overflow:hidden;height:470px;position:relative}
.banList{position:absolute;left:50%;margin-left:-960px;height:470px}
.banList li{height:470px;opacity:0;position:absolute;transform:scale(0);transition:transform 0.5s ease 0s, opacity 1.5s ease 0s;z-index:1;}
.banList li.active{opacity:1;transform:scale(1);z-index:2;}
.fomW{position:absolute;bottom:20px;left:50%;height:20px;z-index:9;width:1000px;margin-left:-500px}
.jsNav{text-align:center;}
.jsNav a{display:inline-block;background:#fff;width:15px;height:15px;border-radius:50%;margin:0 5px;}
.jsNav a.current{background:#fc8f0f;cursor:pointer}
</style>
</head>
<body>
<div class="banner">
<ul class="banList">
<li class="active"><a href="http://sc.chinaz.com/"><img src="images/img1.jpg"/></a></li>
<li><a href="http://sc.chinaz.com/"><img src="images/img2.jpg"/></a></li>
<li><a href="http://sc.chinaz.com/"><img src="images/img3.jpg"/></a></li>
</ul>
<div class="fomW">
<div class="jsNav">
<a href="javascript:;" class="trigger current"></a>
<a href="javascript:;" class="trigger"></a>
<a href="javascript:;" class="trigger"></a>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
$(".banner").swBanner();
});
</script>
</body>
</html>
热心网友
时间：2022-04-24 02:13
悬赏低了 这个帮不了你！ 只要按照他的调用方法，路径保持一直，肯定没问题。
热心网友
时间：2022-04-24 03:48
主要是路径和id。要是方便的话你发一下代码看看。追问你好，不知道你方不文便留个联系方式呢，我把代码打包发你呢，麻烦你帮我看下呢，谢谢
热心网友
时间：2022-04-24 05:39
给我多少分我把我的代码给你
热心网友
时间：2022-04-24 07:47
JS里的图片链接地址你改了吗？追问图片是可以显示的，就是切换效果没有，就几张图静止在那
热心网友
时间：2022-04-24 10:12
JS和CSS调用路径有问题，或者是忘记标注ID=""
