完美实现js焦点轮播效果(二)(图片可滚动)


Posted in Javascript onMarch 07, 2017

本文在前一篇js焦点轮播效果的基础上,使用函数递归实现图片滑动切换,采用辅助图片实现图片无限滚动等技巧,具体内容如下

假如前后不加一张图片的话,图片顺序为[1,2,3,4,5],当你点到第 5 张图时,再点“下一张”(就是要回到第 1 张图那里),这时候,你想象下那个画面,会一瞬间“刷刷刷”地闪过中间那几张图片才能到第 1 张图那里,这样,太难看了吧。

为了解决这个问题,所以要在第 5 张那里加多一张 1 图,图片顺序为 [1,2,3,4,5,1]。当你在第 5 张图点下一张时,图片滚动顺序是这样的:5 ----> (1) ----> 1,(注:中间的那个 1 是指后面多加的 1 图),一旦到了那个“多加的 1 图”,轮播就会瞬间回到 前面的 1 图那里。

因为都是“1 图”,所以视觉上不会有那个一次“刷刷刷”闪过好几张图片的效果。

效果如图:

完美实现js焦点轮播效果(二)(图片可滚动)

实现代码:

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    *{
      margin: 0;
      padding: 0;
      list-style: none;
      text-decoration: none;
    }
    .wrap{
      width: 490px;
      height: 170px;
      margin: 100px auto;
      border: 1px solid #000000;
      position: relative;
      overflow: hidden;
    }
    #pic{
      width: 3430px;
      position: absolute;
    }
    #pic li{
      float: left;
      height: 170px;
    }
    #list{
      position: absolute;
      bottom: 10px;
      left:150px ;
    }
    #list li{
      float: left;
      width: 15px;
      height: 15px;
      background: #fff;
      margin: 0 10px;
      border-radius: 50%;
      cursor: pointer;
    }
    #list .on{
      background: #e27a00;
    }
    .Prev{
      top: 30px;
      left: 0;
    }
    .Next{
      top: 30px;
      right: 0;
    }
    .Prev,.Next{
      position: absolute;
      font-size: 80px;
      font-weight: bold;
      color:#fff ;
      -webkit-transition: all 0.35s ease-in-out
    }
    .Next:hover,
    .Prev:hover{
      background: #ccc;
      background: rgba(204, 204, 204, 0.4);
    }

  </style>
  <script type="text/javascript">
    window.onload=function(){
      var wrap=document.getElementById('wrap');
      var pic=document.getElementById('pic');
      var Li=document.getElementById('list').getElementsByTagName('li');
      var prev=document.getElementById('Prev');
      var next=document.getElementById('Next');
      var animated=false;
      var index=0;
      var timer=null;
      next.onclick=function(){
        if(animated){//如果图片正在滚动时要返回,否则index会变化
          return;
        }
        else{
          index++;
          if(index>=Li.length){
            index=0;
          }
        }

        showlist();
        if(animated == false){//if(!animated)
          animate(-490);
        }
      }
      prev.onclick=function(){
        if(animated){
          return;
        }
        else{
          index--;
          if(index<=0){
            index=Li.length-1;
          }
        }

        showlist();
        if(!animated){//判断其是否滚动完
          animate(490);
        }
      }
      for(var i=0;i<Li.length;i++){
        Li[i].num=i;
        Li[i].onclick=function(){
          if(this.className=="on"){
            return;
          }
          var offset = -490*(this.num-index);
          if(!animated){
            animate(offset);
          }
          index=this.num;
          showlist();
        }
      }
      //图片变换
      function animate(offset){
        animated=true;
        var newLeft=parseInt(pic.style.left) + offset;
        var time=300//位移总时间
        var interval=10;//位移间隔时间
        var speed=offset/(time/interval);//每次位移量

        function go(){
          if((speed < 0 && parseInt(pic.style.left) > newLeft )|| (speed > 0 && parseInt(pic.style.left) < newLeft)){
            pic.style.left = parseInt(pic.style.left) + speed + 'px';
            setTimeout(go,interval);
          }else{
            animated=false;
            pic.style.left= newLeft + 'px';
            if(newLeft > -490){
              pic.style.left = -2450 + 'px';
            }
            if(newLeft < -2450){
              pic.style.left = -490 + 'px';
            }
          }
        }
        go();
      }
      //圆点变换
      function showlist(){
        for(var i=0;i<Li.length;i++){
          Li[i].className="";
        }
        Li[index].className="on";
      }
      //自动播放
      function play(){
        timer=setInterval(function(){
          next.onclick();
        },2000);
      }
      function stop(){
        clearInterval(timer);
      }
      wrap.onmouseover=stop;
      wrap.onmouseout=play;
      play();
    }
  </script>
</head>
<body>
<div class="wrap" id="wrap">
  <ul id="pic" style="left: -490px;">
    <li><a href="#"><img src="/54111d7d00018ba604900170.jpg" alt="5"/></a></li>
    <li><a href="#"><img src="/54111cd9000174cd04900170.jpg" alt="1"/></a></li>
    <li><a href="#"><img src="/54111dac000118af04900170.jpg" alt="2"/></a></li>
    <li><a href="#"><img src="/54111d9c0001998204900170.jpg" alt="3"/></a></li>
    <li><a href="#"><img src="/54111d8a0001f41704900170.jpg" alt="4"/></a></li>
    <li><a href="#"><img src="/54111d7d00018ba604900170.jpg" alt="5"/></a></li>
    <li><a href="#"><img src="/54111cd9000174cd04900170.jpg" alt="1"/></a></li>
  </ul>
  <ul id="list">
    <li class="on"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <a href="javascript:;" class="Prev" id="Prev"><</a>
  <a href="javascript:;" class="Next" id="Next">></a>
</div>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
window.addeventjs事件驱动函数集合addEvent等
Feb 19 Javascript
一个可绑定数据源的jQuery数据表格插件
Jul 17 Javascript
基于jquery的自定义鼠标提示效果 jquery.toolTip
Nov 14 Javascript
简单js代码实现selece二级联动(推荐)
Feb 18 Javascript
js 实现浏览历史记录示例
Apr 20 Javascript
node.js中的fs.rmdir方法使用说明
Dec 16 Javascript
javascript中undefined与null的区别
Aug 16 Javascript
JS实现黑色大气的二级导航菜单效果
Sep 18 Javascript
node.js路径处理方法以及绝对路径详解
Mar 04 Javascript
vue添加axios,并且指定baseurl的方法
Sep 19 Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
May 14 Javascript
vue监听滚动事件的方法
Dec 21 Vue.js
完美实现js焦点轮播效果(一)
Mar 07 #Javascript
Vue2.0组件间数据传递示例
Mar 07 #Javascript
js实现网页定位导航功能
Mar 07 #Javascript
Vuejs 组件——props数据传递的实例代码
Mar 07 #Javascript
js实现百度登录框鼠标拖拽效果
Mar 07 #Javascript
Vue获取DOM元素样式和样式更改示例
Mar 07 #Javascript
原生JavaScript实现Tooltip浮动提示框特效
Mar 07 #Javascript
You might like
PHP之COOKIE支持详解
2010/09/20 PHP
PHP json格式和js json格式 js跨域调用实现代码
2012/09/08 PHP
php权重计算方法代码分享
2014/01/09 PHP
PHP中把数据库查询结果输出为json格式简单实例
2015/04/09 PHP
学习php设计模式 php实现状态模式
2015/12/07 PHP
PHP面向对象继承用法详解(优化与减少代码重复)
2016/12/02 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
PHP基于session.upload_progress 实现文件上传进度显示功能详解
2019/08/09 PHP
smarty模板的使用方法实例分析
2019/09/18 PHP
从父页面读取和操作iframe中内容方法
2009/07/25 Javascript
document.execCommand()的用法小结
2014/01/08 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
2014/05/23 Javascript
javascript数组操作方法小结和3个属性详细介绍
2014/07/05 Javascript
JavaScript数组前面插入元素的方法
2015/04/06 Javascript
vue.js实现备忘录功能的方法
2017/07/10 Javascript
使用vs code开发Nodejs程序的使用方法
2017/09/21 NodeJs
echarts整合多个类似option的方法实例
2018/07/10 Javascript
vue实现后台管理权限系统及顶栏三级菜单显示功能
2019/06/19 Javascript
[03:11]DOTA2上海特锦赛小组赛第一日recap精彩回顾
2016/02/28 DOTA
Python实现网站文件的全备份和差异备份
2014/11/30 Python
Python脚本实时处理log文件的方法
2016/11/21 Python
python 剪切移动文件的实现代码
2018/08/02 Python
tensorflow学习教程之文本分类详析
2018/08/07 Python
python批量下载网站马拉松照片的完整步骤
2018/12/05 Python
Python操作配置文件ini的三种方法讲解
2019/02/22 Python
Python3实现发送邮件和发送短信验证码功能
2020/01/07 Python
Django Admin设置应用程序及模型顺序方法详解
2020/04/01 Python
哈工大自然语言处理工具箱之ltp在windows10下的安装使用教程
2020/05/07 Python
Python中过滤字符串列表的方法
2020/12/22 Python
定制别致的瑜伽垫:Sugarmat
2019/06/21 全球购物
什么是触发器(trigger)? 触发器有什么作用?
2013/09/18 面试题
Linux内核的同步机制是什么?主要有哪几种内核锁
2016/07/11 面试题
会议室标语
2014/06/21 职场文书
先进工作者个人总结
2015/02/15 职场文书
详解nginx.conf 中 root 目录设置问题
2021/04/01 Servers