完美实现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 相关文章推荐
event对象的方法 兼容多浏览器
Jun 27 Javascript
JS增加行复制行删除行的实现代码
Nov 09 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
Jan 02 Javascript
jQuery选择器源码解读(三):tokenize方法
Mar 31 Javascript
jQuery实现图片加载完成后改变图片大小的方法
Mar 29 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
Sep 23 Javascript
基于javascript实现数字英文验证码
Jan 25 Javascript
微信小程序之页面拦截器的示例代码
Sep 07 Javascript
微信小程序版翻牌小游戏
Jan 26 Javascript
Vant picker 多级联动操作
Nov 02 Javascript
js实现头像上传并且可预览提交
Dec 25 Javascript
javascript实现倒计时关闭广告
Feb 09 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
如何在php中正确的使用json
2013/08/06 PHP
繁简字转换功能
2006/07/19 Javascript
慎用 somefunction.prototype 分析
2009/06/02 Javascript
javascript 写类方式之十
2009/07/05 Javascript
基于jQuery的消息提示插件 DivAlert之旅(二)
2010/04/01 Javascript
js身份证判断方法支持15位和18位
2014/03/18 Javascript
jquery分隔Url的param方法(推荐)
2016/05/25 Javascript
Node.js检测端口(port)是否被占用的简单示例
2016/09/29 Javascript
jquery仿京东商品放大浏览页面
2017/06/06 jQuery
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
2018/12/05 Javascript
JavaScript canvas绘制折线图
2020/02/18 Javascript
AutoJs实现刷宝短视频的思路详解
2020/05/22 Javascript
Python生成随机数的方法
2014/01/14 Python
python matplotlib坐标轴设置的方法
2017/12/05 Python
pygame游戏之旅 按钮上添加文字的方法
2018/11/21 Python
使用matplotlib中scatter方法画散点图
2019/03/19 Python
python实现爬山算法的思路详解
2019/04/09 Python
python tkinter组件摆放方式详解
2019/09/16 Python
python读取ini配置文件过程示范
2019/12/23 Python
django中url映射规则和服务端响应顺序的实现
2020/04/02 Python
伦敦一家非常流行的时尚精品店:Oxygen Boutique
2017/01/15 全球购物
日本小田急百货官网:Odakyu
2018/07/19 全球购物
标记环网Toke Ring IEEE802.5
2014/05/26 面试题
应届本科生推荐信范文
2013/12/25 职场文书
心得体会范文
2014/01/04 职场文书
儿媳婚宴答谢词
2014/01/14 职场文书
校庆接待方案
2014/03/18 职场文书
事业单位竞聘上岗实施方案
2014/03/28 职场文书
连带责任保证书
2014/04/29 职场文书
汽车广告策划方案
2014/05/31 职场文书
公司优秀员工获奖感言
2014/08/14 职场文书
经营目标责任书
2015/05/08 职场文书
图书馆义工感想
2015/08/07 职场文书
幼儿园家长心得体会
2016/01/21 职场文书
简单谈谈Python面向对象的相关知识
2021/06/28 Python
《乙女游戏世界对路人角色很不友好》OP主题曲无字幕动画MV公开
2022/04/05 日漫