简单的jq轮播需求，可以如下实现：
引入jq库：
<script type="text/javascript" src="<%=basePath%>js/jquery-3.3.1.min.js"></script>
加入样式：
<style>
ul{
list-style: none;
position: absolute;
bottom: 0;
left: 175px;
}
ul li{
float: left;
}
ul li a{
display: block;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #ffbeaa;
margin-left: 5px;
opacity: 0.6;
}
ul li a.active{
background-color: red;
}
.inner{
width: 3000px;
height: 400px;
}
.inner img{
display: block;
float: left;
}
.pic{
width: 600px;
overflow: hidden;
position: relative;
margin:0 auto; <!-- div会自动根据网页来居中 -->
}
.prev,.next{
position: absolute;
top: 190px;
opacity: 0.6;
}
.next{
right: 0;
}
</style>
jsp code:
<body>
<div class="pic" >
<div class="inner">
<a href="https://www.cnblogs.com/yewenxiang/p/6100206.htm">
<img src="img/1.jpg" alt="">
</a>
<a href="#">
<img src="img/2.jpg" alt="">
</a>
<a href="#">
<img src="img/3.jpg" alt="">
</a>
<a href="#">
<img src="img/4.jpg" alt="">
</a>
<img src="img/5.jpg" alt="">
</div>
<ul>
<li><a href="#" class="active"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
<a href="#" class="prev"><img src="img/left.png" alt=""></a>
<a href="#" class="next"><img src="img/right.png" alt=""></a>
</div>
<script>
var num=0;
var timer=null;
var timeout=null;
// 设置鼠标悬浮在按钮切换事件
$("ul li a").mouseenter(function(event){
//设置定时器前应先判断有没有定时器，有就清除
if(timeout){
clearTimeout(timeout);
timeout=null;
}
num=$(this).parent().index();
//设置悬浮时500毫秒时切换，不足500毫秒时不会切换
timeout=setTimeout(changgeMg,500);
return false;
})
//悬浮在窗口时停止轮播
$(".pic").mouseenter(function(){
//清除定时器
clearInterval(timer);
})
//鼠标移除窗口时开始轮播
$(".pic").mouseleave(function(){
//设置一个3秒的自动轮播定时器
timer=setInterval(changeTab,1000);
})
//点击next切换
$(".next").click(function(){
//设置定时器前应先判断有没有定时器，有就清除
if(timeout){
clearTimeout(timeout);
timeout=null;
}
if(num<4){
num++;
}else{
num=0;
}
//设置点击后500毫秒去切换，如果点击间隔小于500毫秒不停点击则不会切换
timeout=setTimeout(changgeMg,500);
//不让a元素去默认跳转
return false;
})
//点击prev切换
$(".prev").click(function(){
if(timeout){
clearTimeout(timeout);
timeout=null;
}
if(num>0){
num--;
}else{
num=4;
}
//设置点击后500毫秒去切换，如果点击间隔小于500毫秒不停点击则不会切换
timeout=setTimeout(changgeMg,500);
return false;
})
//轮播定时器
timer=setInterval(changeTab,1000);
//移动盒子和给当前索引上色
function changgeMg(){
var movePx=num*-600+"px";
$(".inner").animate({"marginLeft":movePx},500);
$("ul li").eq(num).find("a").addClass("active").parent().siblings().find("a").removeClass("active");
}
//定时器函数
function changeTab(){
if (num<4){
num++;
}else{
num=0;
}
changgeMg();
}
</script>
</body>
</html>
本文暂时没有评论，来添加一个吧(●'◡'●)