完美的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 相关文章推荐
js实现iframe动态调整高度的代码
Jan 06 Javascript
关于二级域名下使用一级域名下的COOKIE的问题
Nov 07 Javascript
jquery ui dialog实现弹窗特效的思路及代码
Aug 03 Javascript
JS获取地址栏参数的小例子
Aug 23 Javascript
jQuery is()函数用法3例
May 06 Javascript
JavaScript中字符串分割函数split用法实例
Apr 07 Javascript
JS、jQuery中select的用法详解
Apr 21 Javascript
深入浅析JS的数组遍历方法(推荐)
Jun 15 Javascript
简单的JS轮播图代码
Jul 18 Javascript
JS实现的随机排序功能算法示例
Jun 09 Javascript
JS去掉字符串末尾的标点符号及删除最后一个字符的方法
Oct 24 Javascript
微信小程序开发之转发分享功能
Oct 22 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中rename函数用法分析
2014/11/15 PHP
PHP内核探索之变量
2015/12/22 PHP
Jquery为a标签的href赋值实现代码
2013/05/03 Javascript
js获取dom的高度和宽度(可见区域及部分等等)
2013/06/13 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
2013/10/09 Javascript
JavaScript避免内存泄露及内存管理技巧
2014/09/05 Javascript
Javascript学习笔记之相等符号与严格相等符号
2014/11/23 Javascript
JavaScript实现文字跟随鼠标特效
2015/08/06 Javascript
window.onerror()的用法与实例分析
2016/01/27 Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
2016/07/24 Javascript
用NodeJS实现批量查询地理位置的经纬度接口
2016/08/16 NodeJs
详解nodejs微信公众号开发——6.自定义菜单
2017/04/13 NodeJs
如何用webpack4带你实现一个vue的打包的项目
2018/06/20 Javascript
vue打包使用Nginx代理解决跨域问题
2018/08/27 Javascript
webpack实现一个行内样式px转vw的loader示例
2018/09/13 Javascript
对angular 监控数据模型变化的事件方法$watch详解
2018/10/09 Javascript
django中使用vue.js的要点总结
2019/07/07 Javascript
微信小程序实现传递多个参数与事件处理
2019/08/12 Javascript
微信小程序 腾讯地图SDK 获取当前地址实现解析
2019/08/12 Javascript
[02:48]DOTA2超级联赛专访海涛:你们的选择没有错
2013/06/07 DOTA
Python2.x版本中基本的中文编码问题解决
2015/10/12 Python
Python 出现错误TypeError: ‘NoneType’ object is not iterable解决办法
2017/01/12 Python
win7 x64系统中安装Scrapy的方法
2018/11/18 Python
python单例模式原理与创建方法实例分析
2019/10/26 Python
对python中assert、isinstance的用法详解
2019/11/27 Python
Django框架之中间件MiddleWare的实现
2019/12/30 Python
HTML5新控件之日期和时间选择输入的实现代码
2018/09/13 HTML / CSS
HTMl5的存储方式sessionStorage和localStorage详解
2014/03/18 HTML / CSS
Wilson体育用品官网:美国著名运动器材品牌
2019/05/12 全球购物
韩语专业本科生求职信
2013/10/01 职场文书
自主招生自荐信格式
2013/12/03 职场文书
规范化管理年活动总结
2014/08/29 职场文书
基层干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
看古人们是如何赞美老师的?
2019/07/08 职场文书
python 模块重载的五种方法
2021/04/24 Python
深入浅析Django MTV模式
2021/09/04 Python