js 图片切换效果

hduyou

浏览: 23871 次
性别:
来自: 杭州

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript学习

JSF CSS jQuery JavaScript J#

//代码一
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
<head>
<title>JS图片切换 -JS特效学院</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="generator" content="editplus" />
<meta name="author" content="eLore" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
* { margin:0; padding:0; }
body {
 margin:0;
 color:#88c; background:#333;
}
img { margin:0; padding:0; border:0; }
#js_F {
 position:relative;
 top:10px; left:10px;
 overflow:hidden;
 width:395px; height:185px;
 background:#33c;
}
.div_img {
 position:absolute; top:0;
 width:295px; height:185px;
 cursor:pointer;
}
#div_img_0 { z-index:5; left:0; }
#div_img_1 { z-index:4; left:25px; }
#div_img_2 { z-index:3; left:50px; }
#div_img_3 { z-index:2; left:75px; }
#div_img_4 { z-index:1; left:100px; }
</style>
</head>
<body>
<div id="js_F">
 <div id="div_img_0" class="div_img"><a href="#"><img src="http://www.lmwq.com.cn/imglist/01.jpg" /></a><img src="http://www.lmwq.com.cn/i/bg_showimg.gif" onmouseover="jsf_mmove(0)" /></div>
 <div id="div_img_1" class="div_img"><a href="#"><img src="http://www.lmwq.com.cn/imglist/02.jpg" /></a><img src="http://www.lmwq.com.cn/i/bg_showimg.gif" onmouseover="jsf_mmove(1)" /></div>
 <div id="div_img_2" class="div_img"><a href="#"><img src="http://www.lmwq.com.cn/imglist/03.jpg" /></a><img src="http://www.lmwq.com.cn/i/bg_showimg.gif" onmouseover="jsf_mmove(2)" /></div>
 <div id="div_img_3" class="div_img"><a href="#"><img src="http://www.lmwq.com.cn/imglist/04.jpg" /></a><img src="http://www.lmwq.com.cn/i/bg_showimg.gif" onmouseover="jsf_mmove(3)" /></div>
 <div id="div_img_4" class="div_img"><a href="#"><img src="http://www.lmwq.com.cn/imglist/05.jpg" /></a><img src="http://www.lmwq.com.cn/i/bg_showimg.gif" onmouseover="jsf_mmove(4)" /></div>
</div>
<script type="text/javascript">
<!--///*--><![CDATA[/*><!--*/
var div_imgs = document.getElementById("js_F").getElementsByTagName("div");
var imgLeft = [0, 25, 50, 75, 100]; //5个图片的初始left值
var imgWidth = 270; //图片的宽度
var atf = [true, true, true, true, true]; //5个图片的位置：true为右边，false为左边
var speed1 = 10, speed2 = 2000, mo = 15; //速度
var sTo;
function jsf_move(n){
 clearTimeout(sTo);
 var thisL; //图片left值
 if (atf[n]) { //要移动的图片在右边
  //需移动的图片（包括该图片左边的所有图片）向左边移动)
  for (var i=0; i<=n; i++) { //当前值-(图片宽度-(当前值-初始值))/速度
   thisL = parseInt(getStyle(div_imgs[i],"left"));
   div_imgs[i].style.left = thisL - Math.ceil((imgWidth-(imgLeft[i]-thisL))/mo) + "px";
   if (i<n) atf[i] = false; //更改图片的位置状态
  }
 } else { //要移动的图片在左边
  //需移动的图片（包括该图片右边的所有图片）向右边移动)
  for (var i=4; i>=n; i--) { //当前值+(当前值-初始值)/速度
   thisL = parseInt(getStyle(div_imgs[i],"left"));
   div_imgs[i].style.left = thisL + Math.ceil(Math.abs(thisL-imgLeft[i])/mo) + "px";
   if (i>n) atf[i] = true; //更改图片的位置状态
  }
 }
 thisL = parseInt(getStyle(div_imgs[n],"left"));
 if ((atf[n]  &&  thisL>(imgLeft[n]-imgWidth)) || (!atf[n]  &&  thisL<imgLeft[n])) {
  //当前图片移动未结束，继续移动当前图片
  sTo = setTimeout(function(){jsf_move(n);}, speed1);
 } else {
  //当前图片移动结束，准备移动下一张图片
  if (n>=3  &&  atf[n]) {
   atf[n] = false;
   sTo = setTimeout(function(){jsf_move(n);}, speed2);
  } else if (n==0  &&  !atf[n]) {
   atf[n] = true;
   sTo = setTimeout(function(){jsf_move(n);}, speed2);
  } else if (atf[n]){
   atf[n] = false;
   sTo = setTimeout(function(){jsf_move(++n);}, speed2);
  } else {
   sTo = setTimeout(function(){jsf_move(--n);}, speed2);
  }
 }
}
//判断图片的位置
function jsf_mmove(n){
 clearTimeout(sTo);
 switch (n){
 case 0 :
  atf[0] = false;
  jsf_move(0);
  break;
 case 1 :
 case 2 :
 case 3 :
  if (atf[n-1]) {
   sTo = setTimeout(function(){jsf_move(n-1);}, speed1);
  } else if (atf[n]) {
   atf[n-1] = true;
   sTo = setTimeout(function(){jsf_move(n-1);}, speed1);
  } else {
   sTo = setTimeout(function(){jsf_move(n);}, speed1);
  }
  break;
 case 4 :
  atf = [false, false, false, true, true];
  jsf_move(3);
  break; 
 }
}
window.onload = function(){
 sTo = setTimeout("jsf_move(0)",speed2);
}
function getStyle( elem, name ) {
 if (elem.style[name]) { return elem.style[name]; }
 else if (elem.currentStyle) { return elem.currentStyle[name]; }
 else if (document.defaultView  &&  document.defaultView.getComputedStyle) {
  name = name.replace(/([A-Z])/g,"-$1");
  name = name.toLowerCase();
  var s = document.defaultView.getComputedStyle(elem,"");
  return s  &&  s.getPropertyValue(name);
 }
 else { return null; }
}
/*]]>*///-->
</script>
</body>
</html>

//代码二
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<script type="text/javascript" src="http://www.CsrCode.cn/html/txdm_2/images/20100901/jquery-1.32pack.js"></script>
<script type="text/javascript">
/*
==轮播{对象|对象属性}==
对象属性{宽度|高度|文字大小|自动切换时间}
*/
(function($){
    dk_slideplayer = function(object,config){
        this.obj = object;
        this.n =0;
        this.j =0;
        var _this = this;
        var t;
        var defaults = {width:"300px",height:"200px",fontsize:"12px",right:"0px",bottom:"3px",time:"5000"};
        this.config = $.extend(defaults,config);
        this.count = $(this.obj + " li").size();
        if(this.config.fontsize == "14px"){
            this.size = "14px";this.height = "23px";this.right = "6px";this.bottom = "15px";
        }else{
            this.size = "12px";this.height = "21px";this.right = "6px";this.bottom = "10px";
        }
        this.factory = function(){
            //元素定位
            $(this.obj).css({position:"relative",zIndex:"0",margin:"0",padding:"0",width:this.config.width,height:this.config.height,overflow:"hidden"})
            $(this.obj).prepend("<div style='position:absolute;z-index:20;right:"+this.config.right+";bottom:"+this.config.bottom+"'></div>");
            $(this.obj + " li").css({position:"absolute",top:"0",left:"0",width:"100%",height:"100%",overflow:"hidden"}).each(function(i){
                $(_this.obj + " div").append("<a>"+(i+1)+"</a>");
            });
            $(this.obj + " img").css({border:"none",width:"100%",height:"100%"})
            this.resetclass(this.obj + " div a",0);
            //标题背景
            $(this.obj).prepend("<div class='dkTitleBg'></div>");
            $(this.obj + " .dkTitleBg").css({position:"absolute",margin:"0",padding:"0",zIndex:"1",bottom:"0",left:"0",width:"100%",height:_this.height,background:"#000",opacity:"0.4",overflow:"hidden"})
            //插入标题
            $(this.obj).prepend("<div class='dkTitle'></div>");
            $(this.obj + " p").each(function(i){   
                $(this).appendTo($(_this.obj + " .dkTitle")).css({position:"absolute",margin:"0",padding:"0",zIndex:"2",bottom:"0",left:"0",width:"100%",height:_this.height,lineHeight:_this.height,textIndent:"5px",textDecoration:"none",fontSize:_this.size,color:"#FFFFFF",background:"none",opacity:"1",overflow:"hidden"});
                if(i!= 0){$(this).hide()}
            });
            this.slide();
            this.addhover();
            t = setInterval(this.autoplay,this.config.time);
        }
        //图片渐影
        this.slide = function(){
            $(this.obj + " div a").mouseover(function(){
                _this.j = $(this).text() - 1;
                _this.n = _this.j;
                if (_this.j >= _this.count){return;}
                $(_this.obj + " li:eq(" + _this.j + ")").fadeIn("200").siblings("li").fadeOut("200");
                $(_this.obj + " .dkTitle p:eq(" + _this.j + ")").show().siblings().hide();
                _this.resetclass(_this.obj + " div a",_this.j);
            });
        }
        //滑过停止
        this.addhover = function(){
            $(this.obj).hover(function(){clearInterval(t);}, function(){t = setInterval(_this.autoplay,_this.config.time)});
        }
        //自动播放 
        this.autoplay = function(){
            _this.n = _this.n >= (_this.count - 1) ? 0 : ++_this.n;
            $(_this.obj + " div a").eq(_this.n).triggerHandler('mouseover');
        }
        //翻页函数
        this.resetclass =function(obj,i){
            $(obj).css({float:"left",marginRight:"3px",width:"15px",height:"14px",lineHeight:"15px",textAlign:"center",fontWeight:"800",fontSize:"12px",color:"#000",background:"#FFFFFF",cursor:"pointer"});
            $(obj).eq(i).css({color:"#FFFFFF",background:"#FF7D01",textDecoration:"none"});
        }
        this.factory();
    }
})(jQuery)
</script>
</head>
<body>

<div style="clear:both; margin-bottom:20px;">
    <ul id="pub_slideplay">
        <li>
            <a target="_blank" href="#">
                <img alt="" src="http://www.csrcode.cn/html/txdm_2/images/20100901/01.gif">
                <p>昨天身材超好的新娘晒马代蜜月</p>
            </a>
        </li>
        <li>
            <a target="_blank" href="#">
                <img alt="" src="http://www.csrcode.cn/html/txdm_2/images/20100901/02.jpg">
                <p>给我人生中第一个一克拉的钻</p>
            </a>
        </li>
        <li>
            <a target="_blank" href="#">
                <img alt="" src="http://www.csrcode.cn/html/txdm_2/images/20100901/03.jpg">
                <p>我喜欢自己二十岁时甜美的笑</p>
            </a>
        </li>
        <li>
            <a target="_blank" href="#">
                <img alt="" src="http://www.csrcode.cn/html/txdm_2/images/20100901/04.jpg">
                <p>单眼皮MM也可以很漂亮</p>
            </a>
        </li>
        <li>
            <a target="_blank" href="#">
                <img alt="" src="http://www.csrcode.cn/html/txdm_2/images/20100901/05.jpg">
                <p>一桌子好菜大餐都没人敢吃</p>
            </a>
        </li>
        <li>
            <a target="_blank" href="#">
                <img alt="" src="http://www.csrcode.cn/html/txdm_2/images/20100901/06.jpg">
                <p>大学女生寝室真的很“丰满”</p>
            </a>
        </li>
    </ul>
</div>

<script type="text/javascript">new dk_slideplayer("#pub_slideplay",{width:"320px",height:"170px",fontsize:"12px",time:"5000"});</script>

</body>
</html>

分享到：

js 牛人的博客学习的好地方 | js 几款图片切换特效

2010-09-27 23:33
浏览 841
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

js 图片切换效果

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

js 图片切换效果

评论

发表评论

相关推荐

屏蔽表单修改

css 分页效果

全景展示

js 动画

css+java 侧面导航栏

js 关于鼠标在页面中坐标显示的种种

js 牛人的博客 学习的好地方

js 几款图片切换 特效

js 107个常用javascript语句

js 判断浏览器类型以及操作系统

js 一些正则表达式（转载）

js 自定范围产生随机数字

js 两种方式进行字符匹配

js 简单代码 有个疑问 请高手解答

js 杨辉三角

js 减少全局变量污染的方法

js replace使用

js 方法扩展

js 判断数组以及数字

js学习 伪类及原型

最近访客更多访客>>

js 牛人的博客学习的好地方

js 几款图片切换特效

js 简单代码有个疑问请高手解答

js学习伪类及原型