jQuery 图片轮播的代码分离
2024-08-22 18:16:42
以前遇到过jQuery实现列表自动滚动，这次的图片轮播在原理上与之相同，只有一些细微的差别，就是需要在图片的右下角显示当前图片的序号。
html代码，以及对应的css代码：
<div id="scrollPics">
<ul class="slider" >
<li><img src="data:images/ads/1.gif"/></li>
<li><img src="data:images/ads/2.gif"/></li>
<li><img src="data:images/ads/3.gif"/></li>
<li><img src="data:images/ads/4.gif"/></li>
<li><img src="data:images/ads/5.gif"/></li>
</ul>
<ul class="num" >
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
css代码：
#scrollPics{
height: 150px;
width: 100%;
margin-bottom: 10px;
overflow: hidden;
position:relative;
}
.num{
position:absolute;
right:5px;
bottom:5px;
}
#scrollPics .num li{
float: left;
color: #FF7300;
text-align: center;
line-height: 16px;
width: 16px;
height: 16px;
cursor: pointer;
overflow: hidden;
margin: 3px 1px;
border: 1px solid #FF7300;
background-color: #fff;
}
#scrollPics .num li.on{
color: #fff;
line-height: 21px;
width: 21px;
height: 21px;
font-size: 16px;
margin: 0 1px;
border: 0;
background-color: #FF7300;
font-weight: bold;
}
用绝对定位设置列表 num 的位置，对 li 设置相关样式，on 表示显示图片对应的数字列表中 li 的样式类别。
js 代码：
//滚动广告
var len = $(".num > li").length;
var index = 0; //图片序号
var adTimer;
$(".num li").mouseover(function() {
index = $(".num li").index(this); //获取鼠标悬浮 li 的index
showImg(index);
}).eq(0).mouseover();
//滑入停止动画，滑出开始动画.
$('#scrollPics').hover(function() {
clearInterval(adTimer);
}, function() {
adTimer = setInterval(function() {
showImg(index)
index++;
if (index == len) { //最后一张图片之后，转到第一张
index = 0;
}
}, 3000);
}).trigger("mouseleave"); function showImg(index) {
var adHeight = $("#scrollPics>ul>li:first").height();
$(".slider").stop(true, false).animate({
"marginTop": -adHeight * index + "px" //改变 marginTop 属性的值达到轮播的效果
}, 1000);
$(".num li").removeClass("on")
.eq(index).addClass("on");
}
最新文章
- Effective前端2：优化html标签
- 【转】OBJECT_ID和DATA_OBJECT_ID的区别
- 计算机系列：CUDA 深入研究
- Python基础语法（二）
- web iis服务器安全性配置实例
- 软件安装失败，导致ubuntu软件中心软件消失
- 理解CSS3 transform中的Matrix(矩阵)
- 手写一个更好用的performSelector/msgSend(详细修改版)
- Jpush推送模块
- VC6项目移植到VS2008的若干问题——好的代码，从我做起，从如今做起。
- LAMBDA表达式常用 (全)
- 老李推荐：第14章3节《MonkeyRunner源码剖析》 HierarchyViewer实现原理-HierarchyViewer实例化
- 提升R代码运算效率的11个实用方法——并行、效率
- ROS新闻 Towards ROS-native drones 无人机支持方案
- 无法删除另一个分区的windows文件夹
- 二分查找、two points、排序
- oauth2-server-php-docs 概念
- Echarts学习记录——如何给x轴文字标签添加事件
- Python3 实现（wxpy）用微信自动定时给朋友定时推广
- VS2017+CMake+OpenCV下报错 set OpenCV_FOUND to FALSE