完美的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 相关文章推荐
用javascript控制iframe滚动的代码
Apr 10 Javascript
javascript数组随机排序实例分析
Jul 22 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
Aug 05 Javascript
简单实现限制uploadify上传个数
Nov 16 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
Feb 18 Javascript
基于jquery实现最简单的选项卡切换效果
May 08 Javascript
基于Bootstrap和jQuery构建前端分页工具实例代码
Nov 23 Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
Dec 02 Javascript
简单实现node.js图片上传
Dec 18 Javascript
使用webpack打包后的vue项目如何正确运行(express)
Oct 26 Javascript
基于vue实现一个禅道主页拖拽效果
May 27 Javascript
layui的表单提交以及验证和修改弹框的实例
Sep 09 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发电子邮件
2006/10/09 PHP
PHP新手上路(十三)
2006/10/09 PHP
10条PHP编程习惯助你找工作
2008/09/29 PHP
php array_walk() 数组函数
2011/07/12 PHP
关于mysql字符集设置了character_set_client=binary 在gbk情况下会出现表描述是乱码的情况
2013/01/06 PHP
php实现屏蔽掉黑帽SEO的搜索关键字
2015/04/15 PHP
window.js 主要包含了页面的一些操作
2009/12/23 Javascript
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
2012/01/15 Javascript
jquery获取div宽度的实现思路与代码
2013/01/13 Javascript
jQuery动态添加删除select项(实现代码)
2013/09/03 Javascript
页面实时更新时间的JS实例代码
2013/12/18 Javascript
JS去掉第一个字符和最后一个字符的实现代码
2014/02/20 Javascript
js实现键盘操作实现div的移动或改变的原理及代码
2014/06/23 Javascript
javascript中加var和不加var的区别 你真的懂吗
2016/01/06 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)
2016/02/16 Javascript
Bootstrap缩略图的创建方法
2017/03/22 Javascript
原生JS实现不断变化的标签
2017/05/22 Javascript
JS实现简单短信验证码界面
2017/08/07 Javascript
angularjs实现柱状图动态加载的示例
2017/12/11 Javascript
vue实现div拖拽互换位置
2020/07/29 Javascript
vue实现分页组件
2020/06/16 Javascript
JavaScript常见鼠标事件与用法分析
2019/01/03 Javascript
Vue自定义指令写法与个人理解
2019/02/09 Javascript
Swiper.js实现移动端元素左右滑动
2019/09/08 Javascript
基于Python爬取爱奇艺资源过程解析
2020/03/02 Python
如何用PyPy让你的Python代码运行得更快
2020/12/02 Python
HelloFresh澳大利亚:订购你的美味食品盒、健康餐食
2018/03/28 全球购物
Michael Kors香港官网:美国奢侈品品牌
2019/12/26 全球购物
Happy Plugs官网:瑞典无线耳机品牌
2020/07/16 全球购物
口腔医学技术应届生求职信
2013/11/09 职场文书
毕业典礼主持词大全
2014/03/26 职场文书
python基于机器学习预测股票交易信号
2021/05/25 Python
基于tensorflow权重文件的解读
2021/05/26 Python
深入理解margin塌陷和margin合并的解决方案
2021/06/26 HTML / CSS
Python 数据科学 Matplotlib图库详解
2021/07/07 Python
【DOTA2】当街暴打?PSG LGD vs VG - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA