js 图片切换效果

最新推荐文章于 2023-08-29 19:44:57 发布
最新推荐文章于 2023-08-29 19:44:57 发布
阅读量117 收藏
点赞数
分类专栏： javascript学习 文章标签： JSF CSS jQuery JavaScript J# ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jisuanjiyou/article/details/83724857
版权 

//代码一
<!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>


jisuanjiyou
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现图片切换效果图
LB228988的专栏
11-24 1136
许多网页的头条都要许多图片在不停的切换，其实这种效果图很简单！ 1：原理： 首先把你要显示的图片存入js数组中，然后根据循环取出数组中的图片元素进行显示 2：代码实现 ROBIN2013-12-24 var curIndex=0; //时间间隔 单位毫秒 var timeInterval=1500; var arr=new Array(); arr[0]="i
js实现图片切换
qq_43501963的博客
03-04 2301
1.按对应按钮切换到对应图片 html部分 <img width="400px" src="../images/image1.jpeg" alt=""> <hr> <div class="btnlist"> <button class="btn" num="1">按钮1</button> <button class="btn" num="2">按钮2</button&.
js实现图片切换（动画版）
11-28
学习了妙味课堂的图片切换（动画版） 这个小效果相对简单一点。 知识预备： 【1】background-position-x background-position属性设置背景原图像（由 background-image 定义）的位置，意味着使用这个属性的前提是必须设置背景原图像background-image。 background-position有两个属性值， background-position：x | y，用法上可以对其一个属性单独使用 background-position-x 和 background-position-y。 准备工作完毕，开始写代码 第一步 由于这次需要的div
js实现图片切换效果
qq_46162047的博客
03-09 2106
JS实现图片切换
分享111个JS图片切换特效，总有一款适合您
zdh13370188237的博客
02-03 832
JS
JS实现图片的切换效果
spl1491647262的博客
02-24 541
用JS实现图片的轮播效果
分享113个图片切换JS特效，总有一款适合您
zy0412326的专栏
02-03 1359
js特效
JavaScript图片切换效果.rar
07-04
JavaScript图片切换效果是一种常见的网页动态展示技术，常用于制作轮播图、相册或产品展示等。这种效果可以通过JavaScript库，如jQuery，或者原生JavaScript实现。本资源"JavaScript图片切换效果.rar"提供了一个实例...
简单实现JavaScript图片切换效果
10-21
总的来说，这个简单的JavaScript图片切换效果利用了基本的JavaScript事件处理和定时器功能，对于初学者来说是一个很好的实践项目。通过理解并实现这个示例，可以深入理解JavaScript如何与DOM交互，以及如何创建动态...
最简单的js图片切换效果实现代码
10-28
通过上述步骤，这个简单的JavaScript图片切换效果得以实现。用户在网页上看到的是图片每5秒自动切换到下一张，当达到最后一张后，会重新回到第一张，形成一个无限循环的效果。这种实现方式直观易懂，适合初级开发者...
js图片切换特效
03-19
NULL 博文链接：https://kinyum-li.iteye.com/blog/718772
纯JS实现点击多图片切换效果
04-14
纯JS实现点击多图片切换效果。 可以插入到你的网页中做用来做网页物资。
JavaScript图片切换效果特效代码
03-20
在本主题"JavaScript图片切换效果特效代码"中，我们主要探讨如何利用JavaScript来创建吸引人的图片轮播或切换效果，这在现代网页设计中是非常常见的功能。 图片切换效果通常是通过JavaScript库或框架如jQuery、...
js图片切换效果
12-17
以上就是关于"js图片切换效果"的一些核心知识点。通过理解和掌握这些，开发者可以创建出功能丰富、用户体验优秀的图片轮播组件。在实际开发中，还可以根据需求进行定制化，如添加预加载图、图片懒加载等高级特性。
使用js实现点击切换图片
IM_GOOD的博客
03-16 1512
【代码】使用js实现点击切换图片。
使用js实现图片切换的效果
最新发布
xiaocantongxue的博客
08-29 603
【代码】使用js实现图片切换的效果。
基于javascript实现图片切换效果_javascript技巧
01-08 3739
基于javascript实现图片切换效果_javascript技巧 本文实例为大家分享了js实现图片切换效果，供大家参考，具体内容如下 用js实现点击按钮，图片切换的效果： 结构：用一个固定宽高的div来做最外层的容器，设置overflow为hidden， 然后内层img_box设置宽度为四倍box的宽度，高度相同，也就是说img_box里面盛放四张img，但是可见的只有一张，下面的两个div，left和right是充当按钮实现点击切换图片，切换图片也就是改变img_box的left属
分享116个图片切换JS特效，总有一款适合您
zy0412326的专栏
02-04 646
js

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值