/*

思路总结：

1.实现图片滚动的function、鼠标经时候获取当前li的index、设置ndex自己主动递增的函数、实现淡入淡出效果的函数

2.整个实现效果一传递index为主线

3.我的编写代码过程

---->a.先编写好实现图片切换的函数，这里主要是包括for历遍所以图片并设置display为none和传递index（这里把index赋值给inew）；

---->b.编写鼠标经过时候获取index，这里必须通过历遍和赋值把鼠标经过的index赋值个inew，并传递给能够实现图片切换的函数move（）；

---->c. 编写实现图片淡入淡出的效果函数

---->d.move（）函数的功能实现能够在编写鼠标经过li的事件和编写淡入淡出函数的时候飞开编写进去 ，这样思路就会顺畅一点

*/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title></title>

<style>

*{margin:0;padding:0;}

#wrap{
width:500px;height:375px;overflow:hidden;margin:0 auto;
position:relative;;
}
#list{
position:absolute;
bottom:10px;
right:10px;
}
ul{
list-style: none;

}
li{float:left;width:20px;height:20px;margin:1px 1px;
border:1px #333333 dashed;text-align: center;line-height:
20px;background-color:aquamarine;}
  .active{background-color:royalblue;}//鼠标经过li的时候，调用的样式
</style>
    <script>
    window.οnlοad= function ds() {
            var im = document.getElementById("box").getElementsByTagName("img");
            var list= document.getElementById("list").getElementsByTagName("li");
            var timer;
          var timers; //这里一共须要两个定时器，一个是针对自己主动切换图片的，一个是针对实现淡入淡出效果的
           var inew=0;
           var al=1;
         function cgs(){
               im[inew].style.filter="alpha(opacity="+al+')';
               im[inew].style.opacity=al/100;
               if(al<100){
                   al+=2;
               }
        }
           function move() {
                for (var i = 0; i < im.length; i++) {
                   list[i].className="";//这里必须是数组
                    im[i].style.display = "none";
                    al=0;
                    clearInterval(timers);

}
                im[inew].style.display = "block";
                list[inew].className="active"
                timers=setInterval(cgs,10);

}

for (var i = 0; i < list.length; i++) {
                list[i].index = i;//这里必须把i赋值给list【i】，以此来获得index；（感觉这样解释不太对，还望给意见）
list[i].onmouseover = function () {
                    inew = this.index; //获取鼠标经过时候的index
move();
                   // this.className = "active";//也能够在这里调用样式
}

}
           timer=setInterval(function(){
                       inew++;
                       if(inew>=list.length){
                           inew=0;
                       }
                       move();
                   }
                   ,2000);

}
        </script>
        </head>
<body>
<div id="wrap">
    <div id="box">
        <img src="data:images/00031.jpg">
        <img src="data:images/00032.jpg">
        <img src="data:images/00033.jpg">
        <img src="data:images/00034.jpg">
        <ul id="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/hrhguanli/p/4061878.html

javascript焦点图（能够自己主动切换 ）相关推荐

  1. javascript焦点图(根据图片下方的小框自动播放)

    html和css就不详细说明了,也是简单布局,通过定位把跟随图片的小框,定位到图片下方 1 <!DOCTYPE html> 2 <html> 3 4 <head> ...

  2. 超酷实用的jQuery焦点图赏析及源码

    超酷实用的jQuery焦点图赏析及源码 焦点图应用在现代网页中使用十分广泛,有注重简单小巧的,也有注重华丽美观的,大部分jQuery焦点图都可以滑动和切换图片,并且在切换图片时产生不同的动画特效.今天 ...

  3. java焦点图_javascript焦点图（能够自己主动切换 ）

    /* 思路总结: 1.实现图片滚动的function.鼠标经时候获取当前li的index.设置ndex自己主动递增的函数.实现淡入淡出效果的函数 2.整个实现效果一传递index为主线 3.我的编写代 ...

  4. jquery点击缩略图切换视频播放的视频切换焦点图效果

    一款由jquery实现的视频切换特效,可以像图片切换那样切换所选择的视频来播放,图片切换相对来说较简单,但视频切换的话就需要播放插件的支持,选择视频缩略图后,上边原来显示大图片的地方是显示一个播放器, ...

  5. html 折叠焦点图切换,jQuery层叠式图片切换焦点图插件

    本文作者html5tricks,转载请注明出处 之前我们为大家分享过一款jQuery内容层叠滚动切换动画插件,主要是针对文字的层叠式切换.今天要介绍的也是一款层叠式切换插件,不过它是一款 下面我们一起 ...

  6. 简单的Jquery焦点图切换效果

    利用Jquery,优雅的实现焦点图切换 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  7. 基于jquery多种切换效果的焦点图(兼容ie6)

    随着html5和css3的诞生.各种非常酷.非常炫的网页焦点图在各个前端技术网上满天飞.基于html5和css3技术的焦点图有一个弊端就是要在ie9以上才支持.这让需兼容ie6到ie8的页面又爱又恨. ...

  8. 一款jQuery满屏自适应焦点图切换特效

    一款jQuery满屏自适应焦点图切换特效 ,自适应当前浏览器的宽度,可以作为网站整个大背景的却换效果,很不错的一款不jquery特效. 兼容性没的说直接秒杀了IE6.适用浏览器:IE6.IE7.IE8 ...

  9. 原生javascript淡入淡出焦点图 + Jquery实现方法

    淡入淡出焦点图效果类 这里是缓动焦点图链接: JavaScript 缓动焦点图实现的几种写法 封装 + 函数式 + JQuery 焦点图 实现思路: 原生JS的类的调用方式: var slider1 ...

最新文章

  1. 祝愿大家都是健康的！
  2. 计算机进桌面后反复重启,我的电脑一插网线就自动重启。到界面之后又马上重启。一直循环。...
  3. Python Django 表单类Form（py代码画form表单仅渲染页面）
  4. Ubuntu 下一个 vim 建立python 周围环境 构造
  5. 用ram实现寄存器堆_Verilog如何实现低功耗设计？
  6. outdated: 3.Adding Color
  7. 安装MongoDB [4.0.2版本]
  8. 10年嵌入式工程师经验之谈：对于研发工作的感悟
  9. 最好的方法，是为你们量身定制！
  10. Nodejs windows的安装
  11. Category：UITextField添加点击事件
  12. Atitit.得到网络邻居列表java php c#.net python
  13. odoo-OPENERP仓库各类知识详解
  14. 酒店电视方案 酒店建设高清数字电视系统的解决方案
  15. 一个屌丝程序猿的人生（八十七）
  16. 相控阵天线均匀面阵方向图（六）-----方向图函数的不同表达形式
  17. ＜数据结构＞单链表实战之实现两个有序链表的交并差集
  18. goldendict for linux,GoldenDict（for Linux）配置无道词典
  19. MATLAB频数表-tabulate/hist
  20. 托福网考网上报名程序说明

热门文章

  1. Flask 应用上下文
  2. 如何更改html广告,js 动态改变广告代码DIV的位置_原生JS通过innerHTML改变div位置...
  3. python简述列表特征_python高级特性简介
  4. 适用于 ESXi 6.x 中的 OpenSLP 安全漏洞 (CVE-2019-5544) 的权宜措施 (76372)
  5. CDM CDP及传统备份技术对比
  6. 分布式文件系统-HDFS(   HDFS全称是Hadoop Distributed System)
  7. Solr学习总结（1）——Apache Solr快速入门
  8. 专访｜从程序员到架构师：交流和分享最能让技术人进步
  9. 用户与计算机系统的交互换界面,人机交互期末PPT复习(GXNU李智老师)
  10. html中只能上传文件word,HTML文件表单，接受Word文档(HTML file form, accept Word documents)...