纯javaScript、jQuery实现个性化图片轮播
纯javaScript实现个性化图片轮播
轮播原理说明<如上图所示>：
1. 画布部分（可视区域）属性说明：overflow:hidden使得超出画布部分隐藏或说不可见。position:relative 会导致自身位置的相对变化，而不会影响其他元素的位置、大小的变化。使得使用了position：absolute 元素相对于画布位置进行定位；
absolute元素脱离了文档结构，产生破坏性，导致父元素坍塌，float元素也会脱离文档结构，absolute元素会悬浮在页面上方，遮挡其他部分显示，这点和PhotoShop图层相似，所以要使用z-index控制出现顺序
2.轮播注意点：左右无限滚动
prev-button 第一张图片的前一张是最后一张图片，
next-button 最后一张图片的下一张图片是第一张，
prev-button、next-button位置的偏移是通过设置prev-img-container、next-img-container的left<相对于画布>属性值
click-select-show-button区域，点击该区域小圆圈是通过上一次图片的所在index，当前点击myIndex, 计算公式：（myIndex-index）*(-图片的宽度width)
3.动画过渡注意点：点击prev-button、next-button、click-select-show-button小圆圈，判定当前是否处于动画状态中
4.定时器setTimeout()、clearTimeout
<实现效果图>
Css样式
/**CSS-style**/
/**画布大小*/
#container {
margin: auto;
width: 600px;
height: 400px;
overflow: hidden;/*超出画布部分隐藏*/
position: relative;/*相对定位*/
cursor: pointer;
}
/**图片容器*/
#list {
width: 4200px;
height: 400px;
position: absolute;
z-index:;
}
#list img { float: left; }
/**轮播选中按钮样式*/
#button {
position: absolute;
bottom: 25px;
left: 175px;
width: 250px;
z-index: ;
}
#button ul li {
list-style: none;
width: 15px;
border-radius: %;
padding: .5px;
height: 15px;
margin-right: 10px;
background: green;
float: left;
font:15px/15px "microsoft yahei";
text-align: center;
font-weight: bold;
color: white;
cursor: pointer;
}
#button ul li.chos {
background: orange;
} #container:hover .arrow{
display: block;
}
#pre {
left: 20px;
}
#next {
right: 20px;
}
/**pre next定位*/
.arrow {
position: absolute;
width: 40px;
height: 40px;
background: black;
z-index: ;
top: 180px;
text-decoration: none;
text-align: center;
line-height: 40px;
font-size: 40px;
color: white;
opacity: 0.3;
filter: alpha(opacity=0.3);
display: none;
}
/**pre next按钮透明度*/
#container a:hover {
opacity: 0.7;
filter: alpha(opacity=0.7);
}
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>纯javaScript实现个性化图片轮播</title>
<link rel="stylesheet" type="text/css" href="styles/main.css">
<script type="text/javascript" src="scripts/scroImg.js"></script>
</head>
<body>
<div id="container">
<div id="list" style="left:-600px">
<img src="data:images/5.jpg">
<img src="data:images/1.jpg">
<img src="data:images/2.jpg">
<img src="data:images/3.jpg">
<img src="data:images/4.jpg">
<img src="data:images/5.jpg">
<img src="data:images/1.jpg">
</div>
<div id="button">
<ul>
<li index=''></li>
<li index=''></li>
<li index=''></li>
<li index=''></li>
<li index=''></li>
</ul>
</div>
<a href="#" class="arrow" id="prev"><</a>
<a href="#" class="arrow" id="next">></a>
</div>
</body>
</html>
一、javaScript实现图片轮播
window.onload=function(){
var container=document.getElementById('container');
var list=document.getElementById('list');
var buttons=document.getElementById('button').getElementsByTagName('li');
var prev=document.getElementById('prev');
var next=document.getElementById('next');
var index=;
var interval=;
var timer=null;
var animated=false;
//next
next.onclick=function(){
if (!animated) {
animate(-);
};
index+=;
if (index>) {
index=;
};
showButton();
console.info('next'+index);
}
//prev
prev.onclick=function(){
if(!animated){
animate();
}
index-=;
if(index<){
index=;
}
showButton();
console.info('prev'+index);
}
//animate
function animate(offset){
animated=true;
var left=parseInt(list.style.left)+offset;
var animateTime=;//位移总时间
var interval=;//时间间隔
var speed=offset/(animateTime/interval);//每次位移量
var go=function(){//animate内部函数
if ((speed< && parseInt(list.style.left)>left) || (speed> && parseInt(list.style.left)<left)) {//是否位移
list.style.left=parseInt(list.style.left)+speed+'px';
setTimeout(go,interval)
}else{
list.style.left=left+'px';
if (left<-) { //最后一张后面
list.style.left=-+'px'; //显示前一张
};
if(left>-){//第一张最前面
list.style.left=-+'px';//显示最后一张
}
animated=false;
};
}
go();
}
//chos
function showButton(){
for (var i = ; i < buttons.length; i++) {
buttons[i].className='';
};
buttons[index-].className='chos';
}
//buttons-click
for (var i = ; i < buttons.length; i++) {
buttons[i].onclick=function(){
if(this.className=='chos'){
return;
}
var myIndex=parseInt(this.getAttribute('index'));
var offset=(myIndex-index)*-; //偏移量
animate(offset);
index=myIndex;//set Index
showButton();
}
};
function play(){
timer=setTimeout(function(){
next.click();
play();
},interval)
}
function stop(){
clearInterval(timer);
}
play();
container.onmouseover=function(){
stop();
}
container.onmouseout=function(){
play();
}
}
二、jQuery实现图片轮播
$(function () {
var container = $('#container');
var list = $('#list');
var buttons = $('#container').find('li');
var prev = $('#pre');
var next = $('#next');
var index = ;
var len = ;
var interval = ;
var timer;
function animate (offset) {
var left = parseInt(list.css('left')) + offset;
if (offset>) {
offset = '+=' + offset;
}
else {
offset = '-=' + Math.abs(offset);
}
list.animate({'left': offset}, , function () {
if(left > -){
list.css('left', - * len);
}
if(left < (- * len)) {
list.css('left', -);
}
});
}
function showButton() {
buttons.eq(index-).addClass('chos').siblings().removeClass('chos');
}
function play() {
timer = setTimeout(function () {
next.trigger('click');
play();
}, interval);
}
function stop() {
clearTimeout(timer);
}
next.bind('click', function () {
if (list.is(':animated')) {
return;
}
if (index == ) {
index = ;
}
else {
index += ;
}
animate(-);
showButton();
});
prev.bind('click', function () {
if (list.is(':animated')) {
return;
}
if (index == ) {
index = ;
}
else {
index -= ;
}
animate();
showButton();
});
buttons.each(function () {
$(this).bind('click', function () {
if (list.is(':animated') || $(this).attr('class')=='chos') {
return;
}
var myIndex = parseInt($(this).attr('index'));
var offset = - * (myIndex - index);
animate(offset);
index = myIndex;
showButton();
})
});
container.hover(stop, play);
play();
});
学习网慕课网 http://www.imooc.com/video/665
源码下载 http://pan.baidu.com/s/1i4VA009
纯javaScript、jQuery实现个性化图片轮播的更多相关文章
- 使用javascript,jquery实现的图片轮播功能
使用javascript,jquery实现的图片轮播功能本功能采用最基础的javascript和一些简单的jquery技术实现,易理解,以修改使用,代码简易,适合刚开始接触到网站开发的朋友们参考.可以 ...
- jQuery个性化图片轮播效果
jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...
- jQuery轻量级京东图片轮播代码等
http://sc.chinaz.com/jiaoben/jiaodiantu.html jQuery轻量级京东图片轮播代码 查看全图点击预览 顶(17)踩(4)报错评论(0)下载地址 更新时间: ...
- JQuery插件之图片轮播插件–slideBox
来源:http://www.ido321.com/852.html 今天偶然发现了一个比较好用的图片轮播插件—slideBox 先看看效果:http://slidebox.sinaapp.com/ 代 ...
- js/jquery中实现图片轮播
一,jquery方法 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&qu ...
- JQuery slidebox实现图片轮播
jQuery图片轮播(焦点图)插件jquery.slideBox,简单设置下参数就可以多个多种动画效果,左右,上下,速度,还可指定默认显示第N张,点击的按钮在现代浏览中可以实现圆形或圆角效果,插件代码 ...
- JavaScript对象(document对象 图片轮播)
图片轮播: 需要注意的HTML需要img标签,他和input标签一样,是非封闭的标签 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...
- JQuery插件开发初探——图片轮播
在熟悉了插件开发的结构以后,自己尝试着做了一个稍微复杂一点的小功能:图片轮播插件. 由于之前使用的一款图片轮播插件,性能不高,页面加载的时候需要载入全部的图片,因此速度很慢. 通过自己做这个小插件,能 ...
- 超实用的JavaScript代码段 Item3 --图片轮播效果
图片轮播效果 图片尺寸 统一设置成:490*170px; 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒 ...
随机推荐
- UWP 律师查询 MVVM
APP简介 律师查询是基于聚合数据的律师查询接口做的,这个接口目前处于停用状态,但是,由于我是之前申请的,所以,还可以用,应该是无法再申请了. 效果图 开发 一.HttpHelper 既然是请求接口的 ...
- DDD 领域驱动设计－看我如何应对业务需求变化，愚蠢的应对？
写在前面 阅读目录: 具体业务场景 业务需求变化 "愚蠢"的应对 消息列表实现 消息详情页实现 消息发送.回复.销毁等实现 回到原点的一些思考 业务需求变化,领域模型变化了吗? 对 ...
- css-父标签中的子标签默认位置
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- webstorm下载&&安装过程&&打开项目
一.webstorm下载 WebStorm 是jetbrains公司旗下一款JavaScript 开发工具.被广大中国JS开发者誉为"Web前端开发神器"."最强大的HT ...
- 真假4K电视验证：一张图足矣
国庆期间笔者逛了一下电视卖场,考虑到国内电视台以及宽带的情况,1080P至少还能用十年,所以只想要个2k电视就够了.然而事与愿违,卖场中八成的都是4k电视,清一色的4k电视让人眼花缭乱.难道4k面板技 ...
- MediatorPattern（中介者模式）
/** * 中介者模式 * @author TMAC-J * 研究了这么多设计模式,觉得无非就是几点: * 1.若两个类有耦合关系,设立一个中间类,处理两个类的关系,把两个类的耦合降低 * 2.面向接 ...
- TCP的数据传输小结
TCP的交互数据流 交互式输入 通常每一个交互按键都会产生一个数据分组,也就是说,每次从客户传到服务器的是一个字节的按键(而不是每次一行) 经受时延的确认 通常TCP在接受到数据时并不立即发送ACK: ...
- [翻译]Orchard如何工作
Orchard一直是博主心中神一般的存在,由于水平比较菜,Orchard代码又比较复杂看了几次都不了了之了.这次下定决心要搞懂其工作原理,争取可以在自己的项目中有所应用.为了入门先到官网去学习一下相关 ...
- JQuery插件定义
一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#"),$("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人 ...
- ABP源码分析二十二：Navigation
MenuDefinition:封装了导航栏上的主菜单的属性. MenuItemDefinition:封装了主菜单的子菜单的属性.子菜单可以引用其他子菜单构成一个菜单树 UserMenu/UserMen ...