jq轮播图

最新推荐文章于 2022-03-02 03:54:15 发布

qq_32444825

最新推荐文章于 2022-03-02 03:54:15 发布

阅读量1.6k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_32444825/article/details/89148069

版权

前端专栏收录该内容

45 篇文章 0 订阅

订阅专栏

这是一个使用jQuery编写的简单轮播图实现，包括图片切换、导航点高亮以及前进后退按钮的功能。通过监听鼠标悬浮事件和点击事件，实现了手动和自动切换效果。

摘要由CSDN通过智能技术生成

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>login</title>
   <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; 
}
.prev,.next{
position: absolute;
top: 190px;
opacity: 0.6;
}
.next{
right: 0;
}
</style>
</head>
<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>

qq_32444825

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jq轮播图

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request...
复制链接

扫一扫

专栏目录