完美的js图片轮换效果


Posted in Javascript onFebruary 05, 2017

本文实例为大家分享了js轮播图焦点的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>轮播图焦点</title>
  <meta content="还是有地点小瑕疵,1左转变4,4右转变1的时候,图片切换有空白,换下动画模式应该可以?">
  <style>
    *{
      padding: 0;
      margin: 0;
    }
    ul{
      list-style: none;
    }
    .scroll{
      width: 300px;
      height: 200px;
      border: 1px solid red;
      margin: 100px auto;
      position: relative;
      overflow: hidden;
    }
    .scroll ul.imgUl{
      width: 400%;
      position: absolute;
      top: 0;
      left: 0;
    }
    .scroll ul.imgUl li{
      float: left;
    }
    .scroll .imgUl img{
      vertical-align: middle; /* 消除图片间3px的间距 */
    }
    .scroll ul.focus{
      position: absolute;
      left: 50%;
      bottom: 10px;
      margin-left: -80px;
    }
    .scroll ul.focus li{
      width: 20px;
      height: 20px;
      padding: 5px;
      text-align: center;
      margin-right: 10px;
      border: 2px solid yellow;
      float: left;
      color: red;
      font-weight: 700;
      background-color: #333;
      color: white;
    }
    .scroll ul.focus li.current{
      background-color: deeppink;
    }
    .scroll .arrow{
      width: 100%;
      position: absolute;
      top: 50%;
      left: 0;
      margin-top: -20px;
      display: none;
    }
    .scroll .arrow div{
      width: 40px;
      height: 40px;
      font: 700 18px/40px "宋体";
      text-align: center;
      background: rgba(0,0,0,.3);
      color: #fff;
      cursor: pointer;
    }
    .scroll .arrow div.left{
      float: left;
    }
    .scroll .arrow div.right{
      float: right;
    }
  </style>
  <script>
    window.onload = function(){
      function $(id){ return document.getElementById(id);}
      var scrollDiv = $('scrollDiv');
      var imgul = $('images');
      var focusUl = $('focuses');
      var imgLis = imgul.children;
      var leader = 0, target = 0;
      var curIndex = 0;//记录当前图片的序号
      var leftArrow = $('leftArrow');
      var rightArrow = $('rightArrow');
      //可自动生成和图片对应的序号
      /*for(var i=0; i< imgLis.length; i++){
        var newLi = document.createElement('li');
        newLi.innerHTML=i+1;
        focusUl.appendChild(newLi);
      }*/
      var focusLis = focusUl.children;
      for(var i=0; i<focusLis.length; i++){
        focusLis[i].index = i;
        focusLis[i].onmouseover = function(){
          curIndex = this.index;
          switchFocus(curIndex);
          target = -this.index * 300;
        }
      }
      scrollDiv.onmouseover = function(){
        $('arrowDiv').style.display="block";
        clearInterval(timer);
      }
      scrollDiv.onmouseout = function(){
        $('arrowDiv').style.display="none";
        timer = setInterval(autoPlay,3000);
      }
      leftArrow.onclick = function(){
        target +=300;
        curIndex = curIndex==0 ? focusLis.length-1 : curIndex-1;
        switchFocus(curIndex);
      }
      rightArrow.onclick = function(){
        target -=300;
        curIndex = (curIndex+1) % focusLis.length;
        switchFocus(curIndex);
      }
      //缓动效果
      setInterval(function(){
        if(target > 0){
          target = -900;
          leader = -1000;
        }else if(target < -900){
          target = 0;
          leader = 100;
        }

        leader = leader + (target - leader) / 10;
        imgul.style.left = leader +"px";

      } ,10);

      switchFocus(0);
      //每隔3s左移图片
      var timer = null;
      timer = setInterval(autoPlay,3000);
      function autoPlay(){
        target -= 300;
        curIndex = (curIndex+1) % focusLis.length;
        switchFocus(curIndex);
      }
      //转换样式
      function switchFocus(curIndex){
        for(var j=0; j<focusLis.length;j++){
            focusLis[j].className="";
          }
        focusLis[curIndex].className="current";
      }

    }
  </script>
</head>
<body>
  <div class="scroll" id="scrollDiv">
    <ul class="imgUl" id="images">
      <li><img src="images/01.jpg" alt=""></li>
      <li><img src="images/02.jpg" alt=""></li>
      <li><img src="images/03.jpg" alt=""></li>
      <li><img src="images/04.jpg" alt=""></li>
    </ul>
    <ul class="focus" id="focuses">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
    <div class="arrow" id="arrowDiv">
      <div class="left" id="leftArrow"><</div>
      <div class="right" id="rightArrow">></div>
    </div>
  </div>
</body>
</html>

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

Javascript 相关文章推荐
prototype1.4中文手册
Sep 22 Javascript
jQuery插件 tabBox实现代码
Feb 09 Javascript
javascript中打印当前的时间实现思路及代码
Dec 18 Javascript
jQuery使用andSelf()来包含之前的选择集
May 19 Javascript
javascript实现支持移动设备画廊
Aug 24 Javascript
手机图片预览插件photoswipe.js使用总结
Aug 25 Javascript
javascript 网页进度条简单实例
Feb 22 Javascript
js禁止表单重复提交
Aug 29 Javascript
Vue.js如何使用Socket.IO的示例代码
Sep 05 Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
Oct 15 Javascript
基于JavaScript实现猜数字游戏代码实例
Jul 30 Javascript
关于uniApp editor微信滑动问题
Jan 15 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
Feb 05 #Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
Feb 05 #Javascript
Vue.js学习示例分享
Feb 05 #Javascript
JavaScript定时器制作弹窗小广告
Feb 05 #Javascript
JavaScript制作简易计算器(不用eval)
Feb 05 #Javascript
flexslider.js实现移动端轮播
Feb 05 #Javascript
简单实现js悬浮导航效果
Feb 05 #Javascript
You might like
国外PHP程序员的13个好习惯小结
2012/02/20 PHP
PHP Streams(流)详细介绍及使用
2015/05/12 PHP
PHP实现获取中英文首字母
2015/06/19 PHP
关于PHP中Session文件过多的问题及session文件保存位置
2016/03/17 PHP
PHP7新特性foreach 修改示例介绍
2016/08/26 PHP
PHP文件类型检查及fileinfo模块安装使用详解
2019/05/09 PHP
解决laravel groupBy 对查询结果进行分组出现的问题
2019/10/09 PHP
js window.event对象详尽解析
2009/02/17 Javascript
Javascript 刷新全集常用代码
2009/11/22 Javascript
jQuery通过Ajax返回JSON数据
2015/04/28 Javascript
微信小程序 Flex布局详解
2016/10/09 Javascript
TypeScript入门-基本数据类型
2017/03/28 Javascript
Nodejs搭建wss服务器教程
2017/05/24 NodeJs
Angular之toDoList的实现代码示例
2017/12/02 Javascript
jQuery实现的点击按钮改变样式功能示例
2018/07/21 jQuery
vue中axios实现数据交互与跨域问题
2019/05/12 Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
2020/04/01 Javascript
vue中jsonp插件的使用方法示例
2020/09/10 Javascript
JS实现公告上线滚动效果
2021/01/10 Javascript
[01:36:57]【09DOTA2第一视角】小骷髅
2014/04/16 DOTA
[01:28]国服启动器接入蒸汽平台操作流程视频
2021/03/11 DOTA
详解Python当中的字符串和编码
2015/04/25 Python
Python连接MySQL并使用fetchall()方法过滤特殊字符
2016/03/13 Python
Python中死锁的形成示例及死锁情况的防止
2016/06/14 Python
Python3多进程 multiprocessing 模块实例详解
2018/06/11 Python
Python Flask前后端Ajax交互的方法示例
2018/07/31 Python
Python3操作YAML文件格式方法解析
2020/04/10 Python
Python matplotlib图例放在外侧保存时显示不完整问题解决
2020/07/28 Python
Python如何获取文件路径/目录
2020/09/22 Python
中国领先的专业演出票务网:永乐票务
2016/08/29 全球购物
客服文员岗位职责
2013/11/29 职场文书
教师实习自我鉴定
2013/12/18 职场文书
iPhone13 Pro外观确定,升级4800万镜头,4月20日发新品
2021/04/15 数码科技
Python中for后接else的语法使用
2021/05/18 Python
python 中的@运算符使用
2021/05/26 Python
Python 如何利用ffmpeg 处理视频素材
2021/11/27 Python