纯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 相关文章推荐
javascript字典探测用户名工具
Oct 05 Javascript
表单切换,用回车键替换Tab健(不支持IE)
Jul 20 Javascript
将文本输入框内容加入表中的js代码
Aug 18 Javascript
JS获取地址栏参数的小例子
Aug 23 Javascript
javascript中对Attr(dom中属性)的操作示例讲解
Dec 02 Javascript
JavaScript日期时间格式化函数分享
May 05 Javascript
javascript的alert box在java中如何显示多行
May 18 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
Feb 28 Javascript
JavaScript中DOM详解
Apr 13 Javascript
基于javascript制作经典传统的拼图游戏
Mar 22 Javascript
Angular学习教程之RouterLink花式跳转
May 03 Javascript
ES6中字符串的使用方法扩展
Jun 04 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
PHP 过滤页面中的BOM(实现代码)
2013/06/29 PHP
php过滤XSS攻击的函数
2013/11/12 PHP
php制作文本式留言板
2015/03/18 PHP
利用PHP将部分内容用星号替换
2020/04/21 PHP
PHP设计模式之工厂模式(Factory Pattern)的讲解
2019/03/21 PHP
phpStorm2020 注册码
2020/09/17 PHP
在网页中屏蔽快捷键
2006/09/06 Javascript
Extjs gridpanel 出现横向滚动条问题的解决方法
2011/07/04 Javascript
JSON语法五大要素图文介绍
2012/12/04 Javascript
禁止你的左键复制实用技巧
2013/01/04 Javascript
你未必知道的JavaScript和CSS交互的5种方法
2014/04/02 Javascript
IE下通过a实现location.href 获取referer的值
2014/09/04 Javascript
JavaScript中的some()方法使用详解
2015/06/09 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
2016/05/04 Javascript
Vue项目webpack打包部署到服务器的实例详解
2017/07/17 Javascript
React教程之封装一个Portal可复用组件的方法
2018/01/02 Javascript
element-ui 表格数据时间格式化的方法
2018/08/24 Javascript
解决vue 绑定对象内点击事件失效问题
2018/09/05 Javascript
[00:32]2018DOTA2亚洲邀请赛OpTic出场
2018/04/03 DOTA
python实现类的静态变量用法实例
2015/05/08 Python
Django接受前端数据的几种方法总结
2016/11/04 Python
Python如何实现守护进程的方法示例
2017/02/08 Python
python爬虫之xpath的基本使用详解
2018/04/18 Python
PIL对上传到Django的图片进行处理并保存的实例
2019/08/07 Python
sklearn+python:线性回归案例
2020/02/24 Python
浅谈pc和移动端的响应式的使用
2019/01/03 HTML / CSS
法国二手手袋、手表和奢侈珠宝购物网站:Collector Square
2018/07/05 全球购物
最畅销的视频游戏享受高达90%的折扣:CDKeys
2020/02/10 全球购物
人事行政主管岗位职责
2013/12/22 职场文书
拓展策划方案
2014/06/03 职场文书
软件研发工程师岗位职责
2014/09/30 职场文书
2014年内部审计工作总结
2014/12/09 职场文书
义诊活动通知
2015/04/24 职场文书
拾金不昧表扬信怎么写
2015/05/04 职场文书
审查起诉阶段律师意见书
2015/05/19 职场文书
python实现网络五子棋
2021/04/11 Python