基于基于JQuery实现图片轮播效果实现图片轮播效果(焦点图焦点图)
自己写了一个纯jq形式的横向轮播焦点图，可点击小圆点或者左右按钮进行切换，属于定宽类型。改成自适应宽度的也不难，
将css里面的bannerCon宽度改为百分比，再在js里面将ul和li的宽度跟随父级容器的宽度变化即可，需要用到
$(window).resize。
兼容到IE6+以上浏览器，有轮播速度和切换间隔两个参数可以改。
效果图如下：
Html代码如下：
<html>
<head>
<meta charset="utf-8">
<title>banner图</title>
<link href="css/style.css" rel="stylesheet"/>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/common.js"></script>
</head>
<body>
<div class="wrap">
<div class="banner">
<div class="bannerCon">
<ul class="imgList">
<li><a href="#"><img src="images/banner01.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/banner02.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/banner03.jpg" alt=""/></a></li>
</ul>
<ul class="btnList clearfix">
<li class="cur"><span></span></li>
<li><span></span></li>
<li><span></span></li>
</ul>
<span class="pre-nex prev"><</span>
<span class="pre-nex next">></span>
</div>
</div>
</div>
</body>
</html>
Css样式如下：
@charset "utf-8";
/* 简单reset */
body, p, ul, ol, li {
margin: 0;
padding: 0;
}
资源评论
