纯javaScript、jQuery实现个性化图片轮播【推荐】


Posted in Javascript onJanuary 08, 2017

纯javaScript实现个性化图片轮播

纯javaScript、jQuery实现个性化图片轮播【推荐】

轮播原理说明<如上图所示>:

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

<实现效果图>

纯javaScript、jQuery实现个性化图片轮播【推荐】

Css样式

/**CSS-style**/
/**画布大小*/
#container { 
 margin:0 auto;
 width: 600px;
 height: 400px;
 overflow: hidden;/*超出画布部分隐藏*/
 position: relative;/*相对定位*/
 cursor: pointer;
}
/**图片容器*/
#list { 
 width: 4200px;
 height: 400px; 
 position: absolute; 
 z-index:1;
}
#list img { float: left; }
/**轮播选中按钮样式*/
#button { 
 position: absolute; 
 bottom: 25px; 
 left: 175px; 
 width: 250px; 
 z-index: 2; 
}
#button ul li {
 list-style: none;
 width: 15px;
 border-radius: 50%;
 padding: 7.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: 3;
 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="images/5.jpg">
  <img src="images/1.jpg">
  <img src="images/2.jpg">
  <img src="images/3.jpg">
  <img src="images/4.jpg">
  <img src="images/5.jpg">
  <img src="images/1.jpg">
 </div>
 <div id="button">
  <ul>
  <li index='1'>1</li>
  <li index='2'>2</li>
  <li index='3'>3</li>
  <li index='4'>4</li>
  <li index='5'>5</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=1;
 var interval=1000;
 var timer=null;
 var animated=false;
 //next
 next.onclick=function(){
 if (!animated) {
  animate(-600);
 };
 index+=1;
 if (index>5) {
  index=1;
 };
 showButton();
 console.info('next'+index);
 }
 //prev
 prev.onclick=function(){
 if(!animated){
  animate(600);
 }
 index-=1;
 if(index<1){
  index=5;
 }
 showButton();
 console.info('prev'+index);
 }
 //animate
 function animate(offset){
 animated=true;
 var left=parseInt(list.style.left)+offset;
 var animateTime=600;//位移总时间
 var interval=10;//时间间隔
 var speed=offset/(animateTime/interval);//每次位移量
 var go=function(){//animate内部函数
  if ((speed<0 && parseInt(list.style.left)>left) || (speed>0 && 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<-3000) { //最后一张后面
   list.style.left=-600+'px'; //显示前一张
  };
  if(left>-600){//第一张最前面
   list.style.left=-3000+'px';//显示最后一张
  }
  animated=false;
  };
 }
 go(); 
 }
 //chos
 function showButton(){
 for (var i = 0; i < buttons.length; i++) {
  buttons[i].className='';
 };
 buttons[index-1].className='chos';
 }
 //buttons-click
 for (var i = 0; i < buttons.length; i++) {
 buttons[i].onclick=function(){
  if(this.className=='chos'){
  return;
  }
  var myIndex=parseInt(this.getAttribute('index'));
  var offset=(myIndex-index)*-600; //偏移量
  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 = 1;
 var len = 5;
 var interval = 3000;
 var timer;
 function animate (offset) {
  var left = parseInt(list.css('left')) + offset;
  if (offset>0) {
  offset = '+=' + offset;
  }
  else {
  offset = '-=' + Math.abs(offset);
  }
  list.animate({'left': offset}, 300, function () {
  if(left > -200){
   list.css('left', -600 * len);
  }
  if(left < (-600 * len)) {
   list.css('left', -600);
  }
  });
 }
 function showButton() {
  buttons.eq(index-1).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 == 5) {
  index = 1;
  }
  else {
  index += 1;
  }
  animate(-600);
  showButton();
 });
 prev.bind('click', function () {
  if (list.is(':animated')) {
  return;
  }
  if (index == 1) {
  index = 5;
  }
  else {
  index -= 1;
  }
  animate(600);
  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 = -600 * (myIndex - index);
   animate(offset);
   index = myIndex;
   showButton();
  })
 });
 container.hover(stop, play);
 play();
});

源码下载 http://pan.baidu.com/s/1kVfnGF1

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jquery 插件学习(四)
Aug 06 Javascript
JavaScript创建一个欢迎cookie弹出窗实现代码
Mar 15 Javascript
JavaScript常用函数工具集:lao-utils
Mar 01 Javascript
Jquery 自定义事件实现发布/订阅的简单实例
Jun 12 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
Aug 01 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
Sep 23 Javascript
js实现一键复制功能
Mar 16 Javascript
React 项目迁移 Webpack Babel7的实现
Sep 12 Javascript
Node.js Event Loop各阶段讲解
Mar 08 Javascript
DatePickerDialog 自定义样式及使用全解
Jul 09 Javascript
vue实现配置全局访问路径头(axios)
Nov 01 Javascript
解决vue项目获取dom元素宽高总是不准确问题
Jul 29 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
Jan 08 #Javascript
Javascript 实现计算器时间功能详解及实例(二)
Jan 08 #Javascript
JS 实现计算器详解及实例代码(一)
Jan 08 #Javascript
详解百度百科目录导航树小插件
Jan 08 #Javascript
Three.js基础部分学习
Jan 08 #Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
Jan 08 #Javascript
jQuery实现页面滚动时智能浮动定位
Jan 08 #Javascript
You might like
全国FM电台频率大全 - 15 山东省
2020/03/11 无线电
各种咖啡的英文名子是什么
2021/03/03 新手入门
ZF等常用php框架中存在的问题
2008/01/10 PHP
ThinkPHP缓存方法S()概述
2014/06/13 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(九)
2014/06/24 PHP
避免Smarty与CSS语法冲突的方法
2015/03/02 PHP
PHP二分查找算法示例【递归与非递归方法】
2016/09/29 PHP
php+resumablejs实现的分块上传 断点续传功能示例
2017/04/18 PHP
PHP使用微信开发模式实现搜索已发送图文及匹配关键字回复的方法
2017/09/13 PHP
JS 实现双色表格实现代码
2009/11/24 Javascript
JS 对象介绍
2010/01/20 Javascript
原生Javascript封装的一个AJAX函数分享
2014/10/11 Javascript
HTML5实现留言和回复页面样式
2015/07/22 Javascript
学习javascript面向对象 理解javascript对象
2016/01/04 Javascript
jQuery弹出层插件popShow用法示例
2017/01/23 Javascript
BootStrap table删除指定行的注意事项(笔记整理)
2017/02/05 Javascript
bootstrap daterangepicker汉化以及扩展功能
2017/06/15 Javascript
dts文件中删除一个node或属性的操作方法
2018/08/05 Javascript
微信小程序 网络通信实现详解
2019/07/23 Javascript
Vue+Node实现的商城用户管理功能示例
2019/12/23 Javascript
一篇文章搞懂Python的类与对象名称空间
2018/12/10 Python
Python中@property的理解和使用示例
2019/06/11 Python
Python爬虫动态ip代理防止被封的方法
2019/07/07 Python
python画蝴蝶曲线图的实例
2019/11/21 Python
Python如何使用ConfigParser读取配置文件
2020/11/12 Python
卫校中专生个人自我评价
2013/09/19 职场文书
自动化专业本科毕业生求职信
2013/10/20 职场文书
生产经理的自我评价分享
2013/11/07 职场文书
高职教师岗位职责
2013/12/24 职场文书
行政文秘岗位职责范本
2014/02/10 职场文书
讲解员培训方案
2014/05/04 职场文书
十佳好少年事迹材料
2014/08/21 职场文书
2014年组织委员工作总结
2014/12/01 职场文书
人事任命书范本
2015/09/21 职场文书
全新239军机修复记
2022/04/05 无线电
java获取一个文本文件的编码(格式)信息
2022/09/23 Java/Android