JQuery实现轮播图及其原理
源码:
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>JQuery轮播图</title>
<style>
*{
padding:0;
margin:0;
}
.container{
width:600px;
height:400px;
overflow: hidden;
position:relative;
margin:0 auto;
}
.list{
width:3000px;
height:400px;
position:absolute; }
.list>img{
float:left;
width:600px;
height:400px;
}
.pointer{
position:absolute;
width:100px;
bottom:20px;
left:250px;
}
.pointer>span{
cursor:pointer;
display:inline-block;
width:10px;
height:10px;
background: #7b7d80;
border-radius:50%;
border:1px solid #fff;
}
.pointer .on{
background: #28a4c9;
}
.arrow{
position:absolute;
text-decoration:none;
width:40px;
height:40px;
background: #727d8f;
color:#fff;
font-weight: bold;
line-height:40px;
text-align:center;
top:180px;
display:none;
}
.arrow:hover{
background: #0f0f0f;
}
.left{
left:0;
}
.right{
right:0;
}
.container:hover .arrow{
display:block;
}
</style>
</head> <body>
<div class="container">
<div class="list" style="left:0px;">
<!--<img src="../static/image/photo1.jpg" alt="5"/>-->
<img src="../static/image/banner.jpg" alt="1"/>
<img src="../static/image/slide1.jpg" alt="2"/>
<img src="../static/image/slide1.jpg" alt="3"/>
<img src="../static/image/slide1.jpg" alt="4"/>
<img src="../static/image/photo1.jpg" alt="5"/>
<!--<img src="../static/image/banner.jpg" alt="1"/>-->
</div>
<div class="pointer">
<span index="1" class="on"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
<span index="5"></span>
</div>
<a href="#" class="arrow left">></a>
<a href="#" class="arrow right"><</a>
</div> <script src="../static/js/jquery-3.2.1.min.js"></script>
<script>
var imgCount = 5;
var index = 1;
var intervalId;
var buttonSpan = $('.pointer')[0].children;//htmlCollection 集合
//自动轮播功能 使用定时器
autoNextPage();
function autoNextPage(){
intervalId = setInterval(function(){
nextPage(true);
},3000);
}
//当鼠标移入 停止轮播
$('.container').mouseover(function(){
console.log('hah');
clearInterval(intervalId);
});
// 当鼠标移出,开始轮播
$('.container').mouseout(function(){
autoNextPage();
});
//点击下一页 上一页的功能
$('.left').click(function(){
nextPage(true);
});
$('.right').click(function(){
nextPage(false);
});
//小圆点的相应功能 事件委托
clickButtons();
function clickButtons(){
var length = buttonSpan.length;
for(var i=0;i<length;i++){
buttonSpan[i].onclick = function(){
$(buttonSpan[index-1]).removeClass('on');
if($(this).attr('index')==1){
index = 5;
}else{
index = $(this).attr('index')-1;
}
nextPage(true); };
}
}
function nextPage(next){
var targetLeft = 0;
//当前的圆点去掉on样式
$(buttonSpan[index-1]).removeClass('on');
if(next){//往后走
if(index == 5){//到最后一张,直接跳到第一张
targetLeft = 0;
index = 1;
}else{
index++;
targetLeft = -600*(index-1);
} }else{//往前走
if(index == 1){//在第一张,直接跳到第五张
index = 5;
targetLeft = -600*(imgCount-1);
}else{
index--;
targetLeft = -600*(index-1);
} }
$('.list').animate({left:targetLeft+'px'});
//更新后的圆点加上样式
$(buttonSpan[index-1]).addClass('on'); } </script>
</body> </html>
效果图:
原理:
页面结构方面:
- 将轮播图容器设置成相对定位,宽度设置成图片的宽度;容器中分为四部分:轮播的图片;点击的小按钮;前一张;后一张
样式方面:
- 轮播图容器为相对定位,宽度/高度设置成图片的宽度/高度,设置overflow为hidden;
- 容器中的每一部分都设置成绝对定位,放到相应的位置;
- 轮播图片的容器宽度设置成所有图片的宽度和,left开始先设置为0;
- 每张图片宽度一样,都设成左浮动,左右图片都在一行排列,所以轮播图的实质是装有图片的容器的移动,每次移动的距离为一张图片的宽度,这样每次就只显示一张图片;
- 前一张/后一张设置成display为none,当鼠标移入总容器时,再设置成display为block
功能方面:
- 自动轮播为一个定时循环机制setInteval,鼠标移入,循环停止,移除循环继续;
JQuery实现轮播图及其原理的更多相关文章
- 用jQuery实现轮播图效果,js中的排他思想
---恢复内容开始--- jQuery实现轮播图不用单独加载. 思路: a. 通过$("#id名");选择需要的一类标签,获得一个伪数组 b.由于是伪数组的原因,而对数组的处理最多 ...
- 用js和jQuery做轮播图
Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...
- 自实现PC端jQuery版轮播图
最近其他项目不是很忙,被安排给公司的官网项目做一个新的页面(之前没接触公司官网项目),其中有一个用到轮播图的地方,最开始想直接用swiper.js插件实现就好了,可是发现官网项目里之前都没有引入过sw ...
- Jquery无缝轮播图的制作
轮播是html页面中比较常见的一种展现形式,也是基础,把轮播图做好,是排版中比较关键的 1.首先是轮播的html元素放置:做轮播之前,要有一个初步的认识 2.每个元素的位置怎样摆放,也是很关键的,这里 ...
- jquery优化轮播图2
继续优化 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- jquery改造轮播图1
g改造轮播图1:https://www.cnblogs.com/huanghuali/p/8677338.html <!DOCTYPE html> <html lang=" ...
- jQuery无缝轮播图思路详解-唯品会
效果图如上: 需求:图片自动轮播,鼠标移上停止播放,离开恢复播放,箭头切换图片. html代码 <!--轮播图大盒子开始--> <div class="wrap" ...
- jQuery封装轮播图插件
// 布局要求,必须有一个容器,图片和两个按钮,布局方式自定,小圆点样式固定 // <div class="all"> // <img src="img ...
- 自己随意写了个简单的依赖jquery的轮播图
//轮播图 function Switcher(obj){ this.box = $(obj.box); this.width = this.box.width(); this.banner = $( ...
随机推荐
- HDU 1236 排名(Microsoft_zzt)
http://acm.hdu.edu.cn/showproblem.php?pid=1236 Problem Description 今天的上机考试虽然有实时的Ranklist,但上面的排名只是根据完 ...
- 安裝CentOS7后修復win7引导
想尝试双系统的心情想必大家都能理解,但是安装了双系统之后的收尾工作也是必不可少的,由于对Linux并不算很熟悉,所以在这方面花了不少时间,这里将CentOS7下修復windows7引导的解决方案记录下 ...
- 常用的查询DOM的方法
查询body的方法=========== document.body // document.getElementsTagname("body")[0]; 查询html的方法=== ...
- ASP.NET MVC与WebForm对比
MVC优点:1.分离更彻底,分层清晰,易于维护和扩展.2.验证更加方便快捷.3.无ViewState,页面更加干净4.路由更容易定义url,对SEO比较好.5.强类型VIEW实现,更安全高效. Web ...
- SAP顾问岗位要求
岗位职责: 1.负责SAP系统各模块日常运维工作,解决用户在系统操作过程中遇到的问题: 2.评估用户需求(新需求.功能优化)的可实现性,完成SAP系统及相关系统的配置调整及功能实现: 3.负责CRM等 ...
- Fantacy团队周二站立会议
词频分析模型 1.这次站会是周二开的,但是由于我个人的疏忽,哎,不说了. 2.会议时间:2016年3月29日12:03~12:30. 持续时长:27分钟 会议参加成员:组长:杨若鹏 http://ww ...
- hadoop故障及其应对
为更好了解各种故障,可以修改数据块的大小和提升NameNode的日志级别 <property> <name>dfs.block.size</name> <va ...
- ZJOI2019 Day1游记
退役吧垃圾 考的再烂还是要把自己捡起来 如果不想让自己的OI生涯就到这里止步的话 就给我滚去拿剩下的300分吧 浙江省前十六,学校前五,day1比别人差一百多分.如果这样还能进省队的话,我就成为传说了 ...
- tomcat 查看和修改内存
为了解决tomcat在大进行大并发请求时,出现内存溢出的问题,请修改tomcat的内存大小,其中分为以下两种方式: 一.使用 catalina.bat 等命令行方式运行的 tomcat 查看系统最大支 ...
- BZOJ2822[AHOI2012]树屋阶梯——卡特兰数+高精度
题目描述 暑假期间,小龙报名了一个模拟野外生存作战训练班来锻炼体魄,训练的第一个晚上,教官就给他们出了个难题.由于地上露营湿气重,必须选择在高处的树屋露营.小龙分配的树屋建立在一颗高度为N+1尺(N为 ...