标签：JQuery 轮播 color ul1 li num var position
JQuery轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQ轮播图</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
#center {
width: 800px;
height: 600px;
margin: auto;
background-color: black;
/*作为ul定位的父级*/
position: relative;
}
#center:hover #ul1{
display: block;
}
/*左右箭头*/
#ul1 {
position: relative;
top: 40%;
display: none;
}
#ul1 li {
font-size: 80px;
color: white;
}
/*四个点*/
#ul2 {
position: absolute;
top: 92%;
left: 40%;
}
#ul2 li {
width: 20px;
height: 20px;
border: 3px slateblue solid;
/*透明度*/
opacity: 0.7;
/*将li的边框设置为圆*/
border-radius: 50%;
float: left;
margin-left: 10px;
position: relative;
}
#ul1 li:hover {
color: aqua;
}
#ul2 li:hover {
background-color: darkseagreen;
}
#imgs li{
/*定位使四张图片重叠在一起*/
position: absolute;
}
.on{
background-color: darkseagreen;
}
</style>
<body>
<div id="center">
<ul id="imgs">
<li><a href="javascript:void(0)"><img src="http://imgsrc.baidu.com/forum/pic/item/9e3df8dcd100baa1436c441e4710b912c9fc2ed6.jpg"></a></li>
<li><a href="javascript:void(0)"><img src="http://www.datongchun.com/upload/image/20150817101824_89175.jpg" ></a></li>
<li><a href="javascript:void(0)"><img src="http://img2.imgtn.bdimg.com/it/u=1563165482,1097507544&fm=214&gp=0.jpg" ></a></li>
<li><a href="javascript:void(0)"><img src="http://hiphotos.baidu.com/%D4%C6%C8%B8%B5%C4%B3%E7%B0%DD%D5%DF/pic/item/c6ba270b9a23e670e9248891.jpg"></a></li>
</ul>
<ul id="ul1">
<li><span style="float:left" ><</span></li>
<li><span style="float: right" >></span></li>
</ul>
<ul id="ul2">
<li class="li_dot"></li>
<li class="li_dot"></li>
<li class="li_dot"></li>
<li class="li_dot"></li>
</ul>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
// 获取图片
var imgs = $("#imgs li");
// 获取箭头
var change = $("#ul1 li");
// 获取圆点
var li_dot = $("#ul2 li");
// 图片数量
var len = imgs.length;
// 当前图片的索引
var first =0;
var timer;
// 圆点点击事件
li_dot.click(function () {
var num = $(this).index();
if(num != first){
ani(num);
}
});
// 箭头点击事件
change.click(function () {
// 当前图片的索引
var num = first;
if($(this).index()){
// 向右翻图
num ++;
// 图片数量的余数即为索引
num %= len;
}else {
// 向左翻图
num --;
//当索引小于0时，从最后一张开始
if (num<0) num=len-1;
}
ani(num);
});
// 变化函数
function ani(num) {
//将之前的图片，去除样式和隐藏
li_dot.eq(first).removeClass("on");
imgs.eq(first).fadeOut(800);
//对现在选中的图片，增加样式和显示
first = num;
li_dot.eq(first).addClass("on");
imgs.eq(first).fadeIn(800);
}
// 定时器：轮播
function auto() {
timer = setInterval(function () {
var num = first;
num++;
num %= len;
ani(num);
},2000)
}
// 清除轮播：鼠标移上去时，停止轮播,移开时，继续轮播
$("#center").hover(function () {
clearInterval(timer);
},auto);
// 隐藏所有图片，并只显示第一张图片
imgs.hide().eq(0).show();
//添加 class：on，表示选中
li_dot.eq(0).addClass("on");
//定时轮播
auto();
</script>
</body>
</html>标签：JQuery,轮播,color,ul1,li,num,var,position 来源： https://www.cnblogs.com/jiyu-hlzy/p/12049529.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。