完美实现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 相关文章推荐
服务器端的JavaScript脚本 Node.js 使用入门
Mar 07 Javascript
js全屏显示显示代码的三种方法
Nov 11 Javascript
jQuery探测位置的提示弹窗(toolTip box)详细解析
Nov 14 Javascript
JS在可编辑的div中的光标位置插入内容的方法
Nov 20 Javascript
JS中setTimeout的巧妙用法前端函数节流
Mar 24 Javascript
Windows系统下安装Node.js的步骤图文详解
Nov 15 Javascript
iscroll.js滚动加载实例详解
Jul 18 Javascript
浅谈vue,angular,react数据双向绑定原理分析
Nov 28 Javascript
Vue之Vue.set动态新增对象属性方法
Feb 23 Javascript
JS验证输入的是否是数字及保留几位小数问题
May 09 Javascript
详解基于Vue,Nginx的前后端不分离部署教程
Dec 04 Javascript
node使用request请求的方法
Dec 20 Javascript
完美实现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
晶体管单管来复再生式收音机
2021/03/02 无线电
德生PL990,目前市面上唯一一款便携式插卡蓝牙全波段高性能收音机
2021/03/02 无线电
PHP Global定义全局变量使用说明
2013/08/15 PHP
php base64 编码与解码实例代码
2017/03/21 PHP
PHP实现的简单适配器模式示例
2017/06/22 PHP
PHP代码重构方法漫谈
2018/04/17 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
PHP网站常见安全漏洞,及相应防范措施总结
2021/03/01 PHP
js window.open弹出新的网页窗口
2014/01/16 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
2014/11/17 Javascript
js+jquery常用知识点汇总
2015/03/03 Javascript
JavaScript中获取HTML元素值的三种方法
2016/06/20 Javascript
JavaScript重定向URL参数的两种方法小结
2016/10/19 Javascript
利用ES6语法重构React组件详解
2017/03/02 Javascript
微信小程序表单验证错误提示效果
2017/05/19 Javascript
JS自定义函数实现时间戳转换成date的方法示例
2017/08/27 Javascript
详解nodejs中express搭建权限管理系统
2017/09/15 NodeJs
Angular angular-file-upload文件上传的示例代码
2018/08/23 Javascript
Javascript删除数组里的某个元素
2019/02/28 Javascript
[26:50]2018完美盛典DOTA2表演赛
2018/12/17 DOTA
Python中的赋值、浅拷贝、深拷贝介绍
2015/03/09 Python
为什么选择python编程语言入门黑客攻防 给你几个理由!
2018/02/02 Python
Django REST framework 分页的实现代码
2019/06/19 Python
Python中random模块常用方法的使用教程
2020/10/04 Python
详解Python3.8+PyQt5+pyqt5-tools+Pycharm配置详细教程
2020/11/02 Python
戴尔加拿大官网:Dell加拿大
2016/09/17 全球购物
英国在线滑雪板和冲浪商店:The Board Basement
2020/01/11 全球购物
工作鉴定评语
2014/05/04 职场文书
保护环境倡议书500字
2014/05/19 职场文书
最新离婚协议书范本
2014/08/19 职场文书
教师党员个人整改措施材料
2014/09/16 职场文书
2014年健康教育工作总结
2014/11/20 职场文书
技术支持岗位职责
2015/02/13 职场文书
少年犯观后感
2015/06/11 职场文书
Typescript类型系统FLOW静态检查基本规范
2022/05/25 Javascript
Python TypeError: ‘float‘ object is not subscriptable错误解决
2022/12/24 Python