基于基于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;
}
资源评论
weixin_38642636
- 粉丝: 12
- 资源: 931
最新资源
- redis-standalone.yml redis k8s单点部署
- 2000-2023年省级产业结构升级数据-最新出炉.zip
- Python基于Scrapy兼职招聘网站爬虫数据分析设计（源码）
- zipkin.yml zipkin k8s部署
- YY9706.102-2021医用电气设备第2-47部分
- 通过运用时间序列ARIMA模型与循环神经网络（LSTM）对中国包装机器数量进行预测（python源码）
- 基于ARIMA模型的股票预测（python源码）
- 基于阿里云对象存储的对文件进行批量修改、批量解冻、批量上传
- 山东联通-海信IP501H-GK6323V100C-1+8G-4.4.2-当贝桌面-卡刷包
- IMG_6338.PNG
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
