效果如下: 先看一看html代码,以及对应的CSS代码: <div id="scrollPics"> <ul class="s
效果如下:
用绝对定位设置列表 num 的位置,对 li 设置相关样式,on 表示显示图片对应的数字列表中 li 的样式类别。
接下来是 js 代码:
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");
}
--结束END--
本文标题: jQuery图片轮播的具体实现
本文链接: https://www.lsjlt.com/news/172728.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0