<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{padding: 0;margin: 0;}
ul,li{list-style-type: none;}
div.main{width: 590px;height: 470px;margin: 50px auto;position: relative;}
div.main ul>li{display: none;}
div.main ul>li.on{display: block;}
div.main ul.cs img{width: 590px;height: 470px;}
div.main a.arrow{display: inline-block;width: 40px;height: 40px; background: rgba(0, 0, 0, 0.3);text-align: center;line-height: 40px;font-size: 20px; text-decoration: none;color: white;position: absolute;top: 50%;margin-top: -20px;}
div.main a.ar{right: 0px;}
div.main a.arrow:hover{background: rgba(0, 0, 0, 0.6);}
div.main ol.slt {position: absolute;bottom: 15px;left: 50%;margin-left: -35px;}
div.main ol.slt li{float: left;width: 10px;height: 10px;border-radius: 50%; border: 1px solid gray;margin-right: 10px;}
div.main ol.slt li.current{background: white;}
</style>
</head>
<body>
<!-- 轮播区 -->
<div class="main">
<!-- 轮播图 -->
<ul class="cs">
<li class="on"><a href="javascript:void(0)">
<img src="images/p01.webp" alt=""></a></li>
<li><a href="javascript:void(0)"><img src="images/p02.webp" alt=""></a></li>
<li><a href="javascript:void(0)"><img src="images/p03.webp" alt=""></a></li>
<li><a href="javascript:void(0)"><img src="images/p04.webp" alt=""></a></li>
</ul>
<!-- 指示器 -->
<ol class="slt">
<li class="current"></li>
<li></li>
<li></li>
<li></li>
</ol>
<!-- 箭头 -->
<a href="javascript:void(0)" class="arrow al"><</a>
<a href="javascript:void(0)" class="arrow ar">></a>
</div>
<script src="js/jquery.js"></script>
<script>
var $index=0;//记录当前显示的轮播图的索引
var $len=$('ol>li').size();//总长度
//1.自动轮播
var timer=setInterval(moveNext,2000);
$('.main').hover(function(){
clearInterval(timer);
},function(){
timer=setInterval(moveNext,2000);
});
//2.箭头轮播
$('.al').click(function(){
movePre();
});
$('.ar').click(function(){
moveNext();
});
//3.指示器轮播
$('ol.slt li').click(function(){
$(this).addClass('current').siblings().removeClass('current');//指示器变化
// var myIndex=$(this).index(); //被点击的li的索引
$index=$(this).index(); //修改索引
//轮播图
$('ul.cs li').eq($index).addClass('on').siblings().removeClass('on');
//修改索引
// $index=myIndex;
});
//下一张
function moveNext(){
$index++;//索引递增
if($index==$len){
$index=0;
}
//轮播图
$('ul.cs li').eq($index).addClass('on').siblings().removeClass('on');
//指示器
$('ol.slt li').eq($index).addClass('current').siblings().removeClass('current');
}
//上一张
function movePre(){
$index--;
if($index==-1){
$index=$len-1;
}
//轮播图
$('ul.cs li').eq($index).addClass('on').siblings().removeClass('on');
//指示器
$('ol.slt li').eq($index).addClass('current').siblings().removeClass('current');
}
</script>
</body>
</html>
轮播图
最新推荐文章于 2024-08-15 11:09:11 发布