使用JQuery制作幻灯片(轮播图)
2024-08-31 05:10:48
1.首先看一下目录结构
images文件夹放所需要播放的图片。
js文件夹放jquery库和main.js
2.html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JQuery slideShow</title>
<style>
*{margin: 0;padding: 0}
ul,ol{list-style: none;}
.slideShow{position: relative;margin: 100px auto;height: 140px;width: 340px;overflow: hidden;}
.slideShow ul{ position: relative;width: 2000px; }
.slideShow ul li{float: left;width: 340px}
.slideShow .nav{text-align: center;position: absolute;right: 10px;bottom: 10px;font-size: 12px;line-height: 18px;}
.slideShow .nav span{ -webkit-user-select:none;user-select:none;float: left;cursor: pointer;border-radius: 9px;display: inline-block;width: 18px;height: 18px;background:rgba(0,0,0,0.7);margin-left: 2px;color: #fff;opacity: 0.5;}
.slideShow .nav span.active{opacity: 1;}
</style>
</head>
<body>
<div class="slideShow">
<ul>
<li><a href="#"><img src="./images/01.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/02.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/03.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/04.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/05.jpg" alt=""></a></li>
</ul>
<div class="nav">
<span class="active">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
3.main.js代码:
$(document).ready(function(){
var slideShow = $(".slideShow"), //获取div
ul=slideShow.find("ul"),
nav=slideShow.find(".nav span"), //获取按钮
oneWidth=ul.find("li").eq(0).width(),
timer=null,
iNow=0;
slideShow.hover(function(){
clearInterval(timer);
},autoPlay); nav.on("click",function(){ //添加点击按钮
var me=$(this),
index=me.index();
iNow=index;
ul.animate({
"left":- oneWidth * iNow,
});
nav.removeClass("active");
me.addClass("active");
}); autoPlay();
function autoPlay(){
timer = setInterval(function(){
iNow++;
if(iNow>nav.length-1){
iNow=0;
}
nav.eq(iNow).trigger("click");
},2000);
}
});
4.效果图
当然了,大小可以利用CSS自己进行调整!
声明:代码非原创,取自网络。
最新文章
- IM服务器的架构
- unix network programming volume1 sorce code build and get(UNIX網絡編程卷1第三版)
- 使用Reflexil修改类库
- HTML DOM元素
- Tip提示框另类写法
- c 输出9x9乘法口诀表 这个学for循环绕不开的一题
- C# TryParse()用法
- linux systemctl 命令学习
- 关于TeeChart使用我会持续更新
- CopyTransform
- IBM、HPUX、Solaris不同之处
- Message小结(一)
- Dynamics 365 Customer Engagement 中对API的调整内容分享
- Android数据解析-JSON解析
- django 定制管理页面外观 模板文件不生效的解决方法
- 【CF960G】Bandit Blues
- Python 基础 变量和数据类型
- JS面向对象编程,对象,属性,方法。
- iOS如何实时查看App运行日志
- maya2018安装失败如何卸载重装