html图片随圆点下标轮播,基于JavaScript实现轮播图代码
一、要点:
1.页面加载时,图片重合,叠在一起[绝对定位];
2.第一张显示,其它隐藏;
3.设置下标,给下标设置颜色让它随图片移动;
4.鼠标移动到图片上去,显示左右移动图标,鼠标移走,继续轮播;
二、实现代码:
html代码:
轮播图
css代码:
* {
padding:0px;
margin:0px;
}
.swapImg {
position:absolute;
}
.btn {
position:absolute;
height:90px;
width:60px;
background:rgba(0,0,0,0.5);/*设置背景颜色为黑色,透明度为50%*/
color:#ffffff;
text-align:center;
line-height:90px;
font-size:40px;
top:155px;/*图片高度400/2-45*/
cursor:pointer;
/*display:none;*/
}
.btnRight {
left:840px;/*图片宽度900-导航宽度60*/
}
#tabs {
position:absolute;
top:370px;
margin-left:350px;
}
.tab {
height:20px;
width:20px;
background:#05e9e2;
line-height:20px;
text-align:center;
font-size:10px;
float:left;
color:#ffffff;
margin-right:10px;
border-radius:100%;
cursor:pointer;
}
.bg {
background:#00ff21;
}
js代码:
///
var i = 0;//全局变量
//定义一个变量用来获取轮播的过程
var time;
$(function ()
{
//1.页面加载后,找到Class等于swapImg的第一个对象,让它显示,它的兄弟元素隐藏
$(".swapImg").eq(0).show().siblings().hide();
showTime();
//当鼠标放到下标上显示该图片,鼠标移走继续轮播
$(".tab").hover(
function ()
{
//获取到当前鼠标所在的下标的索引
i = $(this).index();
show();
//鼠标放上去之后,怎么停止呢?获取到变量的过程,清除轮播,把变量传进去
clearInterval(time);
}, function ()
{
showTime();
});
//要求四,当我点击左右切换
$(".btnLeft").click(function ()
{
//1.点击之前要停止轮播
clearInterval(time);
//点了之后,-1
if (i == 0)
{
i =6;
}
i--;
show();
showTime();
});
$(".btnRight").click(function () {
//1.点击之前要停止轮播
clearInterval(time);
//点了之后,-1
if (i == 5) {
i = -1;
}
i++;
show();
showTime();
});
});
function show() {
//$("#allswapImg").hover(function ()
//{
// $(".btn").show();
//}, function ()
//{
// $(".btn").hide();
//});
//fadeIn(300)淡入,fadeout(300)淡出,过滤时间0.3s
$(".swapImg").eq(i).fadeIn(300).siblings().fadeOut();
$(".tab").eq(i).addClass("bg").siblings().removeClass("bg");
}
function showTime()
{
time = setInterval(function () {
i++;
if (i == 6) {
//只有6张图片,所以i不能超过6,如果i等于6时,我们就让它等于第一张
i = 0;
}
show();
}, 3000);
}
以上所述是小编给大家介绍的基于JavaScript实现轮播图代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
html图片随圆点下标轮播,基于JavaScript实现轮播图代码相关推荐
- 曼哈顿距离java实现_基于javascript实现获取最短路径算法代码实例
这篇文章主要介绍了基于javascript实现获取最短路径算法代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 代码如下 //A算法 自动寻路 ...
- 基于javascript的div浮动效果代码
今天接到一个添加网页图片浮动的任务,花了一中午的时间进行了学习和编码,实现了两种方式的图片浮动,这里把遇到的问题和解决的方法做一个总结. 两种实现分别为:1)Z字形浮动 2)反弹浮动: 具体来说,需 ...
- html js制作高级拼图,基于JavaScript实现十五拼图代码实例
顾名思义,十五拼图就是将游戏画面中的数字从上到下,从左到右按顺序从1到15排列下来,看起来很简单,但是玩起来不容易. css代码 body { font-family: cursive; font-s ...
- html年会抽奖代码实例,基于JavaScript实现简单抽奖功能代码实例
为什么会做这个东西呢,纯属好玩,闲的 其实是在上次班会的时候想到的,班会的时候叫人回答问题,没人回答 当时就想,我如果抽签抽到你了,你还是不回答吗??好吧,一切都是扯淡 先来看看页面效果吧: 点击抽取 ...
- PHP代码猜数字游戏,基于JavaScript实现猜数字游戏代码实例
环境 vscode 1.46 Microsoft Edge 83 示例 以下内容为了解和熟悉 JavaScript,不需要理解,能够复制粘贴并正确运行即可. 新建网页模板 在 vscode 中新建一个 ...
- js轮播图片小圆点变化_JavaScript banner轮播 左右切换 圆点点击切换
JavaScript banner轮播 左右切换 圆点点击切换 #banner { overflow:hidden; width:100%; height:400px; position:relati ...
- c语言实现图片轮播,纯css实现轮播图
轮播图的实现原理其实是比较简单的 举个例子 main的宽度是100px div-main的宽度是500px 我们用js控制div-main往左或往右移动,这样就实现了轮播,简单把 好了,先介绍个 cs ...
- 基于JQuery 编写轮播图插件
基于JQuery 编写轮播图插件 不管是实际开发还是平时的小项目中 ,页面一定有且多个的轮播图,那么为了效率大家可以考虑封装这样的小插件.下面一起看看他的使用方法吧 使用需要准备(往下滑动会看到): ...
- ZMY_viewpager滑动轮播图片小圆点
//viewpager滑动轮播图片小圆点 创建drawable-----shape类型 [亮点false_shape <?xml version="1.0" encoding ...
- axure轮播图怎么设置循环轮播_Axure教程:轮播图制作步骤详解
不管是在PC端还是移动端,轮播图是常见的设计元素.下面详细讲解轮播图的制作步骤. 作为Axure初学者,把最近学到的记录下来,和大家一起学习. 如何实现轮播图: 循环展示轮播图片: 将圆点与轮播图一一 ...
最新文章
- Python:if判断与while、for循环语句
- SDK Manager failed to install 'java.exe' locking directory
- Linux文件属性1——文件类型
- 开放搜索助力提升趣店商城20%转化率
- Js获取当前日期时间及其它操作(转)
- 如何使用Magit管理Git项目
- 史上最全:PostgreSQL DBA常用SQL查询语句(建议收藏学习)
- TensorFlow学习笔记03:单变量线性回归
- 文件上传 jqueryForm
- java web 之 WebRoot和WebContent目录
- jQuery选择器,用逗号分隔的时候需要注意范围问题
- cxVerticalGrid赋值是实时更新
- sql server完全卸载
- IDEA配置方法注释模板
- 可视化工具 VTK 简介
- 实验一 第2关:从自然数中取3个数进行组合之递归算法任务描述
- 青岛科技大学计算机转专业,2021年青岛科技大学大一新生转专业及入学考试相关规定...
- android 7.0 新功能介绍(Nougat)
- buct oj 最大公共子序列问题
- STM32(C语言)内存分布