精华内容
下载资源
问答
  • 很常见的javascript效果,写成控件,需要的时候可以直接拿来用 ...//原生JavaScript焦点图切换控件 function PicSlide(){ var controls = document.getElementById('slide-controls').getElementsByTagName(...

    很常见的javascript效果,写成控件,需要的时候可以直接拿来用

    点击这里查看原生Javascript焦点图切换控件的演示

    代码:

    //原生JavaScript焦点图切换控件
    function PicSlide(){
    	
    	var controls = document.getElementById('slide-controls').getElementsByTagName('li');//根据需要选择元素
    	var list = document.getElementById("slide-list").getElementsByTagName('li');//根据需要选择元素
    	
    	var delay = 3000;
    	var _this = this;
    	_this.active = 0; //当前显示内容的下标
    	_this.list = list;
    	_this.controls = controls;
    	
    	for(var i=0; i<controls.length; i++){
    		controls[i].index = i;
    		controls[i].onmouseenter = function(){
    			if(this.index === _this.active) return;
    			
    			clearInterval(_this.timer);
    			_this.clear();
    			_this.select(this);
    		};
    		
    		controls[i].onmouseleave  = function(){
    			clearInterval(_this.timer);
    			_this.timer = setInterval(function(){
    				_this.run()
    			}, delay);
    			
    		};
    	}
    	
    	_this.timer = setInterval(function(){ _this.run() }, delay);
    	
    };
    
    PicSlide.prototype = {
    	
    	/*内容淡入*/
    	select: function(target){
    		target.className = 'active';
    		this.active = target.index;
    		effect.animate(this.list[target.index], { 'opacity': 100 } );	
    	},
    	
    	/*内容淡出*/
    	clear: function(){
    		var controls = this.controls;
    		var list = this.list;
    		var active = this.active;
    		
    		controls[active].className = '';
    		effect.animate(list[active], { 'opacity': 0 });
    	},
    	
    	/*顺序播放焦点图*/
    	run: function(){
    		var controls = this.controls;
    		var list = this.list;
    		var active = this.active;	
    		
    		this.clear();
    		active += 1;
    		active = active % controls.length;
    		controls[active].className = 'active';
    		
    		effect.animate(list[active], { 'opacity': 100 } );
    		this.active = active;
    	}
    	
    };
    

     

    转载于:https://www.cnblogs.com/rentj1/archive/2012/09/30/2709392.html

    展开全文
  • 一款用JavaScript模仿3D立体切换效果的js焦点幻灯片特效,使用方法很简单:用鼠标拖拽图片向左右方向就好~
  • Js+CSS 带导向箭头的焦点图切换 javascript 图片切换效果 Js+CSS带导向箭头的焦点图切换,当切换到当前张的时候,箭头会指出位置,更具指引作用。本焦点图切换未使用jQuery,不过Js的核心代码好像与jQuery相似,值得...
  • 之前有一篇博客,实用的焦点图切换效果,结构行为相分离 解释的比较详细,脚本是分离式的,但在易用性和重用性方面并不理想,这里原作者进行了,优化。
  • 内容索引:脚本资源,Ajax/JavaScript,图片切换 四焦点图切换,唯美设计风格,JavaScript代码,比较经典的四张图片循环切换,请注意,只能用四张图片,图片多的话计数器会出错,不过修改一下代码也可以。
  • 焦点图封装(js封装类,javascript,焦点图,图片切换)
  • 动感图片标题的焦点图切换 - Liehuo.Net #fader{position:relative;overflow:hidden;height:300px;width:500px} #fader li{position:absolute;left:0;top:0;}

     

    <!Doctype html>
    <html>
    <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>动感图片标题的焦点图切换 - Liehuo.Net</title>
    <style type="text/css">
    #fader{position:relative;overflow:hidden;height:300px;width:500px}
    #fader li{position:absolute;left:0;top:0;}
    ul,li{list-style:none;margin:0;padding:0}
    img{display:block;}
    .fader-nav{display:inline-block;margin-right:8px;color:#fff;padding:2px 6px;background:#333;border:1px solid #fff;font-family:Tahoma;font-weight:bold;font-size:12px;cursor:pointer;}
    .fader-cur-nav{display:inline-block;margin-right:8px;color:#fff;padding:2px 6px;background:#ff7a00;border:1px solid #fff;font-family:Tahoma;font-weight:bold;font-size:12px;cursor:pointer;}
    </style>
    <script type="text/javascript">
    var Hongru={};
    function H$(id){return document.getElementById(id)}
    function H$$(c,p){return p.getElementsByTagName(c)}
    Hongru.fader = function(){
    function init(anchor,options){
    this.anchor = anchor;
    var wp = H$(options.id),
    ul = H$$('ul',wp)[0],
    li = this.li = H$$('li',ul);
    this.index = options.position?options.position:0;
    this.a = options.auto?options.auto:2;
    this.cur = this.z = 0;
    this.l = li.length;
    this.img = [];
    for(var k=0;k<this.l;k++){
    this.img.push(H$$('img',this.li[k])[0]);
    }
    this.curC = options.curNavClass?options.curNavClass:'fader-cur-nav';
    nav_wp = document.createElement('div');
    nav_wp.id = 'fader-nav';
    nav_wp.style.cssText = 'position:absolute;right:0;bottom:0;padding:8px 0;';
    var alt = this.alt = document.createElement('p');
    for(var i=0;i<this.l;i++){
    this.li[i].o = 100;
    //setOpacity(this.li[i],this.li.o);
    this.li[i].style.opacity = this.li[i].o/100;
    this.li[i].style.filter = 'alpha(opacity='+this.li[i].o+')';
    //绘制控制器
    var nav = document.createElement('a');
    nav.className = options.navClass?options.navClass:'fader-nav';
    nav.innerHTML = i+1;
    nav.onclick = new Function(this.anchor+'.pos('+i+')');
    nav_wp.appendChild(nav);
    }
    wp.appendChild(alt);
    wp.appendChild(nav_wp);
    this.textH = nav_wp.offsetHeight;
    alt.style.cssText = 'color:#fff;font-size:12px;padding-left:20px;margin:0;position:absolute;left:0;bottom:0;overflow:hidden;width:100%;background:#000;opacity:0.7;filter:alpha(opacity=70);';
    alt.style.height = alt.style.lineHeight = this.textH+'px';
    this.pos(this.index);
    }
    init.prototype={
    auto:function(){
    this.li.a = setInterval(new Function(this.anchor+'.move(1)'),this.a*1000);
    },
    move:function(i){
    var n = this.cur+i;
    var m = i==1?n==this.l?0:n:n<0?this.l-1:n;
    this.pos(m);
    },
    pos:function(i){
    clearInterval(this.li.a);
    clearInterval(this.li[i].f);
    var curLi = this.li[i];
    this.z++;
    curLi.style.zIndex = this.z;
    this.alt.style.zIndex = this.z+1;
    nav_wp.style.zIndex = this.z+2;
    this.li.a=false; //这句话是必要的
    this.cur = i;
    //setOpacity(curLi[i],0);
    if(this.li[i].o>=100){
    this.li[i].o = 0;
    curLi.style.opacity = 0;
    curLi.style.filter = 'alpha(opacity=0)';
    this.alt.style.height = '0px';
    }
    for(var x=0;x<this.l;x++){
    nav_wp.getElementsByTagName('a')[x].className = x==i?this.curC:'fader-nav';
    }
    this.alt.innerHTML = this.img[i].alt;
    this.li[i].f = setInterval(new Function(this.anchor+'.fade('+i+')'),20);
    },
    fade:function(i){
    var p=this.li[i];
    if(p.o>=100){
    clearInterval(p.f);
    if(!this.li.a){ //一定要在这里做个是否已经clearInterval的判断,要不然在快速点击的时候会导致图片不停地闪
    this.auto();
    }
    }
    else{
    p.o+=5;
    //setOpacity(this.li[i],this.li[i].o);
    p.style.opacity = p.o/100;
    p.style.filter = 'alpha(opacity='+p.o+')';
    this.alt.style.height = Math.ceil(p.o*this.textH/100)+'px';
    }
    }
    };
    return {init:init};
    }();
    </script>
    </head>
    <body>
    <div id="fader">
    <ul>
    <li><img src="http://www.veryhuo.com/uploads/common/images/p1.jpg" alt="我是图片一" /></li>
    <li><img src="http://www.veryhuo.com/uploads/common/images/p2.jpg" alt="哈哈,图片二" /></li>
    <li><img src="http://www.veryhuo.com/uploads/common/images/p3.jpg" alt="这是图片三" /></li>
    <li><img src="http://www.veryhuo.com/uploads/common/images/p4.jpg" alt="烈火学院,图四" /></li>
    <li><img src="http://www.veryhuo.com/uploads/common/images/p5.jpg" alt="图片五来咯" /></li>
    </ul>
    </div>
    <script type="text/javascript">
    var fader = new Hongru.fader.init('fader',{
    id:'fader'
    });
    </script>
    </body>
    </html><br /><center>如不能显示效果,请按Ctrl+F5刷新本页,更多网页代码:<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
    文章源自:烈火网,原文:http://www.veryhuo.com/a/view/27156.html
    展开全文
  • javascript焦点图(可以自动切换

    千次阅读 2014-05-08 14:31:22
    先编写好实现图片切换的函数,这里主要是包含for历遍所以图片并设置display为none和传递index(这里把index赋值给inew); ---->b.编写鼠标经过时候获取index,这里必须通过历遍和赋值把鼠标经过的index赋值个inew,...

    /*

    思路总结:

    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="images/00031.jpg">
            <img src="images/00032.jpg">
            <img src="images/00033.jpg">
            <img src="images/00034.jpg">
            <ul id="list">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
        </div>
    </div>
    </body>
    </html>
    展开全文
  • 内容索引:脚本资源,Ajax/JavaScript,焦点图切换,图片切换 横幅图片切换,5个焦点图切换,一张接一张自动向上滚,鼠标点击按钮也可滚动切换。
  • 主要介绍了js实现非常简单的焦点图切换特效,是一个非常简单的js焦点图切换效果,涉及javascript操作鼠标事件与图片的相关技巧,需要的朋友可以参考下
  • 内容索引:脚本资源,Ajax/JavaScript,图片切换 固定显示三幅的Flash焦点图切换,带缩略图显示,带箭头指示,结构清淅,风格流行,更新方便,演示效果如上图所示,娱乐站、新闻站都适合用。
  • 内容索引:脚本资源,Ajax/JavaScript,图片切换 一个带缩略图的JS+FLASH焦点图切换特效,现打包下载,其实已经很常见了,不过觉得挺不错,效果很漂亮,动画切换,源码爱好者截图如上,适合大部分网站使用。
  • 所以在原来的基础上改了下,封装起来,... } 在xhtml后调用函数,并传入对象参数: 完整的演示代码: 封装实用的焦点图切换效果,分离式js脚本 [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行] 更多的的缩略图效果

    所以在原来的基础上改了下,封装起来,并做了进一步的优化,这样同一个页面就可以使用多个这样的效果了,xhtm和css没有变化,感兴趣的朋友可以在js上面可以跟之前的代码做个对比,这样更容易理解和掌握。

    有什么问题和建议请回帖 @&@

    1.xhtml

    2.css

    .jfocus{width:300px;height:300px;border:#ccc 1px solid;background-color:#FFF;}#jfocuspic{FILTER: progid:DXImageTransform.Microsoft.Fade (duration=0.5,overlap=1.0 );width:300px;height:200px;overflow:hidden;}#jfocuspic a{display:none; font-size:2em; text-align:center; line-height:200px; font-weight:bold; background-color:#CCC; height:200px; cursor:pointer;}#jfocusnum li{cursor:pointer;height:50px; width:50px; line-height:50px;display:inline-block; color:#000; border:#999 1px solid; text-align:center; background-color:#CCC; float:left; margin:0 5px;}#jfocusnum li.on{color:#f00; font-weight:bold; border:#900 1px solid; font-size:14px;}

    3.js

    function $(id,tag){var re=(id&&typeof id!="string")?id:document.getElementById(id);if(!tag){return re;}else{return re.getElementsByTagName(tag);}}//获取元素对象

    function FocusImg(focbox,picobj,numbox,numobj,time){

    var n=0;

    var imglist=$(focbox,picobj);

    var Num=$(numbox,numobj);

    function setBg(value){for(var i=0;i

    function plays(value){

    if(document.all) $(focbox).filters[0].Apply();//滤镜

    for(i=0;i

    if(document.all) $(focbox).filters[0].play();

    }

    function mouse(n){//设置鼠标经过和离开后的事件;

    for(var i=0;i

    (function(n){

    Num[i].οnmοuseοver=imglist[i].οnmοuseοver=function(){clearInterval(autoStart);Mea(n);}

    Num[i].οnmοuseοut=imglist[i].οnmοuseοut=function(){setAuto();}

    })(i);

    }

    }

    function Mea(value){n=value;mouse(n);setBg(value);plays(value);}

    function auto(){n++;if(n>Num.length-1)n=0;    Mea(n);}

    function setAuto(){autoStart=setInterval(function(){auto();},time)}

    setAuto();

    }

    在xhtml后调用函数,并传入对象参数:

    完整的演示代码:

    封装实用的焦点图切换效果,分离式js脚本

    [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

    更多的的缩略图效果

    展开全文
  • 企业网站横幅焦点图切换JavaScript版的图片切换,右下角显示等比例的缩略图,缩略图是调用的大图片,整体唯美,采用淡入淡出的方式图片轮播,点击后切换,不点击时自动轮播。是一款不错的网页上的图片展示效果。
  • 内容索引:脚本资源,Ajax/JavaScript,搜狐视频,jQuery,焦点图切换 视频网站适合使用的jQuery缩略图焦点图切换,来源于搜狐视频,很大气而且漂亮的图片切换,可自由设定图片标题、图片简短介绍,点击缩略图即可切换到...
  • 内容索引:脚本资源,Ajax/JavaScript,图片切换,焦点图切换 傲游浏览器主页上的JS焦点图切换效果,当鼠标经过代表图片序号的小圆圈时,图片会跟着切换,操作体验非常不错,在兼容性方面,IE7/IE8/火狐等都运行正常,...
  • 内容索引:脚本资源,Ajax/JavaScript,图片切换,焦点图轮番 163网易的Js五屏焦点图切换代码,默认是五张图片循环,或许经过修改会支持更多图片的切换。本效果设计简洁大气,能用性强,适合新闻、资讯类网站使用,效果...
  • 今天推荐的这个又是一个原生的js焦点图效果 默认自动切换,也可以手动切换 javascript代码采用函数式对象编程,也就是javascript编程中的Module模式 基本用法很简单, 使用方法: 1、将文件中的css样式复制到你的...
  • 9种焦点图切换 1.普通切换效果 2.淡入效果的切换 3.淡入淡出效果的切换 4.向上翻转效果的切换 5.定时自动向上翻转效果的切换 6.无缝连接定时自动向上翻转效果的切换 7.左右推移效果的切换 8.选择图片左右推移效果的...
  • javaScript图像左右滑动切换焦点图,可左右切换,无需12345,很时尚的效果
  • 本文实例讲述了jQuery实现企业网站横幅焦点图切换功能的方法。分享给大家供大家参考。具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
  • 不管是高校的网站还是电商的页面,焦点图切换和轮播应该是一项不可或缺的应用。今天把焦点图轮播制作的技术要点做下笔记,以供日后查看。  一、结构层(HTML)  焦点图的HTML结构很简单,就是一个父容器(id=box...
  • 内容索引:脚本资源,Ajax/JavaScript,图片切换,广告幻灯 Csdn焦点图切换,仿Flash效果平滑,内附有两个大同小异的实例,这种效果看样式来说,确实是比较经典,两款样式基本一样,区别在于图片与图片的转场效果上,...
  • 摘要:脚本资源,Ajax/JavaScript,jQuery幻灯片,JS焦点图代码 jquery.cycle循环带数字按钮的焦点图切换,学习jQuery焦点图动画设计的素材范例,用了两个jQuery插件:jquery.cycle.all.min.js和jquery-1.4.1.min.js。...
  • jQuery全屏banner焦点图切换

    千次阅读 2017-07-03 11:09:41
    Query全屏banner焦点图切换
  • 内容索引:脚本资源,Ajax/JavaScript,jQuery,图片切换 五屏Flash焦点图切换,仿jQuery完成的效果,一边切换一边滚动,带缩略图,整体设计漂亮,XML配置文件,注意:标题和说明采用了Unicode编码,不支持直接输入中文...
  • css3宽屏满屏焦点图切换特效touchSlider插件,方便实用。
  • 这是一款基于jQuery实现的右侧选项卡焦点图片轮播动画特效源码,每个图片的内容信息可以根据自己的喜好进行...jQuery左侧大图右侧小图切换代码 </title> <link rel=stylesheet type=text/css href=css/inde

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 13,614
精华内容 5,445
关键字:

javascript焦点图切换

java 订阅