完美的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 相关文章推荐
Extjs列表详细信息窗口新建后自动加载解决方法
Apr 02 Javascript
jquery中通过过滤器获取表单元素的实现代码
Jul 05 Javascript
js过滤HTML标签以及空格的思路及代码
May 24 Javascript
用javascript关闭本窗口不弹出询问框的方法
Sep 12 Javascript
js无提示关闭浏览器窗口的两种方法分析
Nov 06 Javascript
搭建Bootstrap离线文档的方法
Dec 02 Javascript
ng2学习笔记之bootstrap中的component使用教程
Mar 09 Javascript
详解用webpack把我们的业务模块分开打包的方法
Jul 20 Javascript
深入理解Vue官方文档梳理之全局API
Nov 22 Javascript
layui table 表格上添加日期控件的两种方法
Sep 28 Javascript
Nautil 中使用双向数据绑定的实现
Oct 02 Javascript
vue实现简单瀑布流布局
May 28 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
《一拳超人》埼玉一拳下去,他们存在了800年毫无意义!
2020/03/02 日漫
dedecms防止FCK乱格式化你的代码的修改方法
2007/03/17 PHP
php生成的html meta和link标记在body标签里 顶部有个空行
2010/05/18 PHP
php数组函数序列之array_pop() - 删除数组中的最后一个元素
2011/11/07 PHP
解析php5配置使用pdo
2013/07/03 PHP
php动态生成函数示例
2014/03/21 PHP
PHP YII框架开发小技巧之模型(models)中rules自定义验证规则
2015/11/16 PHP
eclipse php wamp配置教程
2016/06/30 PHP
Cookie 小记
2010/04/01 Javascript
jquery控制listbox中项的移动并排序的实现代码
2010/09/28 Javascript
jQuery 常见操作实现方式和常用函数方法总结
2011/05/06 Javascript
javascript中方便增删改cookie的一个类
2012/10/11 Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
2013/09/02 Javascript
JQuery伸缩导航练习示例
2013/11/13 Javascript
JS根据生日算年龄的方法
2015/05/05 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
2015/06/19 Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
2016/05/03 Javascript
JavaScript提升性能的常用技巧总结【经典】
2016/06/20 Javascript
node.js中grunt和gulp的区别详解
2017/07/17 Javascript
微信小程序switch组件使用详解
2018/01/31 Javascript
webpack配置打包后图片路径出错的解决
2018/04/26 Javascript
Vue弹出菜单功能的实现代码
2018/09/12 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
2019/11/11 Javascript
在vue-cli中引入lodash.js并使用详解
2019/11/13 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
2020/11/23 Javascript
Python 深入理解yield
2008/09/06 Python
python抓取最新博客内容并生成Rss
2015/05/17 Python
用python写一个定时提醒程序的实现代码
2019/07/22 Python
浅谈Python3 numpy.ptp()最大值与最小值的差
2019/08/24 Python
Python实现图片识别加翻译功能
2019/12/26 Python
python 检测图片是否有马赛克
2020/12/01 Python
image-set实现Retina屏幕下图片显示详细介绍
2012/12/24 HTML / CSS
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上?
2013/03/30 面试题
见习报告的格式
2014/11/04 职场文书
七年级作文之我的梦想
2019/10/16 职场文书
Linux在两个服务器直接传文件的操作方法
2022/08/05 Servers