【jQuery】百分比自适应屏幕轮播图特效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Banner-jQuery</title>
<style type="text/css">
*{margin:0;padding: 0;}
.container{width: 80%;height: 500px;overflow: hidden;margin:0 auto;position: relative;}
#list{width: 700%;height: 500px;position: absolute;}
#list img{width: 14.285715%;;float: left;cursor: pointer;}
.arrow{position: absolute;color:#fff;text-decoration: none;bottom: 20px;text-align: center;width: 40px;height: 40px;font-size: 30px;top:230px;font-weight: bold;background: rgba(0,0,0,0.3);}
#left{left:20px;}
#right{right: 20px;}
.btns{width: 100px;height: 10px;position: absolute;bottom: 20px;left: 42%;}
.btns span{cursor: pointer;border: 1px solid #fff;border-radius: 50%;margin-right: 8px;-webkit-border-radius:50%;-moz-border-radius:50%;width: 10px;height: 10px;float: left;}
.btns .on{background: orange;}
</style>
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.js"></script>
</head>
<body>
<div class="container" id="container">
<div id="list">
<img alt="5" src='http://i1.piimg.com/576342/a59848cad8818bd4.jpg'>
<img alt="1" src='http://i1.piimg.com/576342/9bc3a6f38f9eca10.jpg'>
<img alt="2" src='http://i1.piimg.com/576342/82507633c9d21ebf.jpg'>
<img alt="3" src='http://image60.360doc.com/DownloadImg/2013/04/1613/31674132_21.jpg'>
<img alt="4" src='http://i1.piimg.com/576342/5935e1921d2d5fb0.jpg'>
<img alt="5" src='http://i1.piimg.com/576342/a59848cad8818bd4.jpg'>
<img alt="1" src='http://i1.piimg.com/576342/9bc3a6f38f9eca10.jpg'>
</div>
<a href="javascript:void(0)" class="arrow" id="left" ><</a>
<a href="javascript:void(0)" class="arrow" id="right" >></a>
<div class="btns">
<span class="on" index="1"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
<span index="5"></span>
</div>
</div> <script type="text/javascript">
$(function(){
var oList = $("#list");
var oRight = $("#right");
var oLeft = $("#left");
var oWidth = parseInt(oList.css('width')) / 7; //计算图片的宽度从而达到自适应屏幕宽度
var oSpan = $(".btns span");
var len = 5;
var index = 1;
var interval = 3000;
var timer = null;
oList.css('left',-oWidth); //图片加载完成时将图片向左偏移一张图片 function animate(offset){ //过渡效果
var newLeft = parseInt(oList.css('left')) + offset; //点击后的图片偏移量
oList.animate({'left':newLeft + 'px'},function(){
if(newLeft > 0){ //判断图片是否已经循环一次
oList.css('left',-oWidth * len);
}
if(newLeft < -oWidth * 5){
oList.css('left',-oWidth);
}
});
} function showBtns(){ //按钮过渡
oSpan.each(function(){ //遍历每个按钮将其Class设置为空
$(this).attr('class','');
});
$(".btns > span").eq(index - 1).addClass('on'); //将当前Span的索引Class设置为on
} function autoplay(){ //自动播放
timer = setTimeout(function(){
oRight.trigger('click');
autoplay();
},interval);
} function stop(){
clearInterval(timer);
} oList.on('mouseover',function(){ //判断鼠标是否在容器上面
stop();
}); oList.on('mouseout',function(){
autoplay();
}); oRight.on('click',function(){
if(oList.is(':animated')){
return;
}
if(index == 5){ //向右点击 index索引+1
index = 1;
}else{
index += 1;
}
animate(-oWidth);
showBtns();
}); oLeft.on('click',function(){
if(oList.is(':animated')){
return;
}
if(index == 1){ //向左点击 index索引-1
index = 5;
}else{
index -= 1;
}
animate(oWidth);
showBtns();
}); oSpan.each(function(){ //底部按钮点击切换图片
$(this).on('click',function(){
if(oList.is(":animated") || $(this).attr('class') == "on"){
return;
}
var myIndex = $(this).attr('index');
var offset = (myIndex - index) * -oWidth;
index = myIndex;
animate(offset);
showBtns();
})
}) autoplay();
});
</script>
</body>
</html>
复制代码，将图片改成相同像素图片即可直接使用
el.animate()确实好用，原生JS写一大串动画过渡代码，animate只写一行即可
这种方法的好处主要是在与百分比自适应屏幕，灵活性比之前的固定布局好不少
同时比上一篇轮播图增加了按钮点击切换图片
【jQuery】百分比自适应屏幕轮播图特效的更多相关文章
- JQuery图片自适应窗口轮播图（淡入淡出效果）
<script>var w = $(window).width();//获取窗口宽度var h = $(window).height();//获取窗口高度 $(".box&quo ...
- jQuery插件slides实现无缝轮播图特效
初始化插件: slides是一款基于jQuery无缝轮播图插件,支持图内元素动画,可以自定义动画类型 1 2 3 4 5 6 7 8 9 10 $(".slideInner").s ...
- 【JavaScript】固定布局轮播图特效
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 用jquery制作的简单轮播图
我也是进入H5前端的小菜鸟一枚,最近才进入jquery的学习,所以打算对自己的学习进行记录. 今天分享的是一个简单的轮播图,这个轮播图的特效很简单,能够进行图片的轮播以及点击相应图片,图片能够跳转到相 ...
- jQuery淡入淡出效果轮播图
用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div. html结构如下: & ...
- jquery手写焦点轮播图-------解决最后一张无缝跳转第一张的问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 2、原生js实现轮播图特效
很多很多网站经常会用到一个特效,那就是轮播图,对于日新月异的前端技术来说其实就是一个框架一个接口的事,但轮播的原理是什么?用最原始的javascript来写又是怎样的呢?本人是一枚菜鸟,这篇文章就当做 ...
- 【前端】javascript+jQuery实现旋转木马效果轮播图slider
实现效果: 实现原理: 技术栈: javascript+jQuery+html+css 实现步骤: // 0. 获取元素 // 1. 鼠标放置到轮播图上,显示两侧的控制按钮,移开后隐藏 // 2. 为 ...
- jQuery实现todo及轮播图
内容: 1.todo程序 2.轮播图 1.todo程序 需求: 实现一个todo程序,可以添加数据,可以删除数据,可以修改数据,可以查看所有数据 另外实现自己的一系列弹窗:用于提示用户的提示框.用于警 ...
随机推荐
- The communication of Linux Server and Localtion
当用Secure CRT远程登录服务器时,若建立本地与服务器间文件自由传输的机制,我们就可以实现远程办公.具体方法如下: 1. 确定远程服务器的IP.可以通过Secure CRT进行远程登录. 2.在 ...
- 携程Ctrip DAL的学习1
携程Ctrip DAL的学习 1 本人net开发菜鸟,原理请自行看github的官网源码. 我这里是简单的使用(helloworld的水平). Ctrip DAL是携程框架部开发的数据库访问框架,支持 ...
- Linux下不同服务器间数据传输
因为工作原因,需要经常在不同的服务器见进行文件传输,特别是大文件的传输,因此对linux下不同服务器间数据传输命令和工具进行了研究和总结.主要是rcp,scp,rsync,ftp,sftp,lftp, ...
- Less2css error 终极解决方案（转载）
用到less时遇到的问题 ,然后复制过来的 使用sublime Text3 的时候,安装less2Css后,和很多人一样以为大功告成,开始要运行编译less文件,结果开始发现 于是乎开始搜索问题和解决 ...
- C++学习注意点
1.cin,cout关同步再用,不然效率很糟cin,cout关同步再用,不然效率很糟cin,cout关同步再用,不然效率很糟.重要的事情说三遍.关同步代码:std::ios::sync_with_st ...
- 关于MySQL中的三种日期类型
Mysql中我们经常用来存储日期的数据类型有三种:Date.Datetime.Timestamp. Date数据类型用来存储没有时间的日期.Mysql获取和显示这个类型的格式为"YYYY-M ...
- 【Java】集合_学习笔记
一.集合 1.集合类也称容器类,主要负责保存.盛装其他数据. 2.集合可以保存数量不确定的数据,保存具有映射关系的数据(也称关联数组). 3.Java5后提供一些多线程安全的集合类,放在java.ut ...
- [android]判断位置服务是否打开
public boolean isLocationEnabled() { int locationMode = 0; String locationProviders; if (Build.VERSI ...
- JAVA开发错误总结(仅记录遇到的错误---后续不断更新......)
=======华丽分割线(工具总结)===================== 1:Maven项目中junit测试找不到主类的问题 Class not found com.test.utils.tes ...
- ArcGIS创建tpk切片缓存
一. 背景知识 1. tpk是什么? 从地图或底图生成切片,并将切片进行打包从而创建单个压缩的 .tpk 文件.切片包(.tpk)是在地图或栅格数据集中能作为 Web 切片或 Web 高程图层发布的一 ...