CSS+jQuery实现轮播
2024-08-30 10:51:13
CSS+jQuery实现轮播
CSS jQuery 前端
实现功能:
- 自动轮播;
- 鼠标放在上面停止轮播;
- 鼠标放在上面显示左右切换的按钮;
- 鼠标放在小圆圈上显示对应的图片;
轮播效果图
style.css
.outer{
width: 790px;
height: 340px;
margin: 80px auto;
position: relative;
}
.img li{
position: absolute;
list-style: none;
top:0;
left: 0;
}
.num{
position: absolute;
bottom: 18px;
left: 270px;
list-style: none;
}
.num li{
display: inline-block;
width: 18px;
height: 18px;
background-color: white;
border-radius: 50%;
text-align: center;
line-height: 18px;
margin-left: 4px;
}
.btn{
position: absolute;
top:50%;
width: 30px;
height: 60px;
background-color: lightgray;
color: white;
text-align: center;
line-height: 60px;
font-size: 30px;
opacity: 0.7;
margin-top: -30px;
display: none;
}
.left{
left:0;
}
.right{
right: 0;
}
.outer:hover .btn{
display: block;
}
.num .active{
background-color: red;
}
html文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
<script src="jquery-3.1.1.js"></script>
</head>
<body>
<div class="outer">
<ul class="img">
<li><a href=""><img src="img/1.jpg" alt=""></a></li>
<li><a href=""><img src="img/2.jpg" alt=""></a></li>
<li><a href=""><img src="img/3.jpg" alt=""></a></li>
<li><a href=""><img src="img/4.jpg" alt=""></a></li>
<li><a href=""><img src="img/5.jpg" alt=""></a></li>
<li><a href=""><img src="img/6.jpg" alt=""></a></li>
</ul>
<ul class="num">
<!--<li class="active"></li>-->
<!--<li></li>-->
<!--<li></li>-->
<!--<li></li>-->
<!--<li></li>-->
<!--<li></li>-->
</ul>
<div class="left btn"> < </div>
<div class="right btn"> > </div>
</div>
<script>
// 通过jQuery自动创建按钮
var img_num = $(".img li").length;
for (var i=0;i<img_num;i++){
$(".num").append("<li></li>")
}
$(".num li:first").addClass("active");
// 手动轮播
$(".num li").mouseover(function () {
var index = $(this).index();
$(this).addClass("active").siblings().removeClass("active");
$(".img li").eq(index).stop().fadeIn(500).siblings().stop().fadeOut(500);
});
//自动轮播
var c = setInterval(GO_R,1500);
var i = 0;
function GO_R() {
if(i == img_num-1){
i = -1
}
i ++;
$(".num li").eq(i).addClass("active").siblings().removeClass("active");
$(".img li").eq(i).stop().fadeIn(500).siblings().stop().fadeOut(500);
}
function GO_L() {
if(i == 0){
i = img_num-1;
}
i --;
$(".num li").eq(i).addClass("active").siblings().removeClass("active");
$(".img li").eq(i).stop().fadeIn(500).siblings().stop().fadeOut(500);
}
$(".outer").hover(function () {
clearInterval(c);
}, function () {
c = setInterval(GO_R, 1500);
});
// button
$(".right").click(GO_R);
$(".left").click(GO_L);
</script>
</body>
</html>
以上代码基本实现了所要功能,但存在一个问题,就是当鼠标放在下方小圆圈的时候会显示对应图片,而鼠标移开后不是从当前图片开始轮播,反而是从上次轮播后的地方开始。
解决方法很简单,将全局变量i
放在代码的最前端,代码当中的index
变量换成变量i
,此时应注意用于循环的i
应该变成j
。
以下为完整版本:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
<script src="jquery-3.1.1.js"></script>
</head>
<body>
<div class="outer">
<ul class="img">
<li><a href=""><img src="img/1.jpg" alt=""></a></li>
<li><a href=""><img src="img/2.jpg" alt=""></a></li>
<li><a href=""><img src="img/3.jpg" alt=""></a></li>
<li><a href=""><img src="img/4.jpg" alt=""></a></li>
<li><a href=""><img src="img/5.jpg" alt=""></a></li>
<li><a href=""><img src="img/6.jpg" alt=""></a></li>
</ul>
<ul class="num">
<!--<li class="active"></li>-->
<!--<li></li>-->
<!--<li></li>-->
<!--<li></li>-->
<!--<li></li>-->
<!--<li></li>-->
</ul>
<div class="left btn"> < </div>
<div class="right btn"> > </div>
</div>
<script>
var i = 0;
// 通过jQuery自动创建按钮
var img_num = $(".img li").length;
for (var j=0;j<img_num;j++){
$(".num").append("<li></li>")
}
$(".num li:first").addClass("active");
// 手动轮播
$(".num li").mouseover(function () {
i = $(this).index();
$(this).addClass("active").siblings().removeClass("active");
$(".img li").eq(i).stop().fadeIn(500).siblings().stop().fadeOut(500);
});
//自动轮播
var c = setInterval(GO_R,1500);
function GO_R() {
if(i == img_num-1){
i = -1
}
i ++;
$(".num li").eq(i).addClass("active").siblings().removeClass("active");
$(".img li").eq(i).stop().fadeIn(500).siblings().stop().fadeOut(500);
}
function GO_L() {
if(i == 0){
i = img_num-1;
}
i --;
$(".num li").eq(i).addClass("active").siblings().removeClass("active");
$(".img li").eq(i).stop().fadeIn(500).siblings().stop().fadeOut(500);
}
$(".outer").hover(function () {
clearInterval(c);
}, function () {
c = setInterval(GO_R, 1500);
});
// button
$(".right").click(GO_R);
$(".left").click(GO_L);
</script>
</body>
</html>
最新文章
- 【BZOJ1497】[NOI2006]最大获利 最小割
- C#中日期记忆日期的格式化,日期格式化说明
- 上下文管理、线程池、redis订阅和发布
- 关于通过jq /js 实现验证单选框 复选框是否都有被选中
- 5 个 Composer 小技巧
- (置顶)js实现超过页面一屏后,点击图标滚动到页面顶部top
- .net软件反编译笔记
- 使用WebEx录制视频并转换为MP4
- python爬取拉勾网职位数据
- Windows 定时任务对数据库进行操作
- 内网IP外网IP的关联及访问互联网原理
- HoloLens开发手记 - HoloLens上的应用视图 App views on HoloLens
- JAVA Selenium PHONCOMJS 获取js动态生成完整网页
- Uber优步北京第一组奖励政策
- DirectShow中写push模式的source filter流程 + 源码(内附具体凝视)
- PHP5+APACHE2.2配置
- python开发进程:互斥锁(同步锁)&;进程其他属性&;进程间通信(queue)&;生产者消费者模型
- 【转】使用母版页时内容页如何使用css和javascript
- Android 给EditText添加下划线
- Python-7-字典方法
热门文章
- 【WebRTC】简介
- apt-cyg update --2017-02-17 07:57:24-- http://mirrors.163.com/cygwin//x86_64/setup.bz2 正在解析主机 mirrors.163.com... 123.58.173.185, 123.58.173.186 正在连接 mirrors.163.com|123.58.173.185|:80... 已连接。 已发出 HTT
- oracle create user &;tablespace &; imp
- JavaScript的编译原理
- git 删除本地分支和远程分支
- 面试题: Struts2
- Linux 大页面使用与实现简介(转)
- Flask框架 之 功能详解
- GUID介绍
- gRPC官方文档(通讯协议)