JQuery插件第三十一个：按钮点击换图片效果

最新推荐文章于 2024-09-13 08:33:26 发布
最新推荐文章于 2024-09-13 08:33:26 发布
阅读量2.2k 收藏
点赞数
分类专栏： 滚动图片 文章标签： jquery插件 function class stylesheet javascript scroll
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chinet_bridge/article/details/7393559
版权 
UL {
	BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; FONT-SIZE: 100%; BACKGROUND: none transparent scroll repeat 0% 0%; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; VERTICAL-ALIGN: baseline; PADDING-TOP: 0px; BORDER-RIGHT-WIDTH: 0px; outline: 0
}
LI {
	BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; FONT-SIZE: 100%; BACKGROUND: none transparent scroll repeat 0% 0%; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; VERTICAL-ALIGN: baseline; PADDING-TOP: 0px; BORDER-RIGHT-WIDTH: 0px; outline: 0
}
img{ border:0;}
.content-main {
	WIDTH: 676px; PADDING: 0px;FLOAT: left; POSITION: relative
}
#viewer 
{
    border:7px solid red;
    WIDTH: 676px;
    HEIGHT:280px;
    MARGIN: 0px; 
    PADDING: 0px; 
    POSITION: absolute; 
    Z-INDEX: 10; 
}
.panel {
	POSITION: relative
}
#prevBtn {
	LEFT: -19px;
	DISPLAY: block; Z-INDEX: 11; WIDTH: 39px; POSITION: absolute; TOP: 165px; HEIGHT: 39px
}
#nextBtn {
	RIGHT: -33px;
	DISPLAY: block; Z-INDEX: 11; WIDTH: 39px; POSITION: absolute; TOP: 165px; HEIGHT: 39px
}

.carousel 
{
	MARGIN-LEFT: 7px;
	CLEAR: left; 
	POSITION: relative;
	Z-INDEX: 6; 
	OVERFLOW: hidden; 
	WIDTH: 677px; 
	HEIGHT: 293px;
}
.carousel LI {
	FLOAT: left;
	Z-INDEX: 6; 
	OVERFLOW: hidden; 
	HEIGHT: 293px;
}
.carousel IMG {
	Z-INDEX: 1; 
	POSITION: relative;
	WIDTH: 677px;	
	HEIGHT: 293px;

}
.hoverNav {
	Z-INDEX: 9999; DISPLAY: none; POSITION: absolute; WIDTH: 172px;HEIGHT: 113px; TOP: 50px;
}
.hoverLeft {
	Z-INDEX: 9999; BACKGROUND: url(arrow-left-hover.png) no-repeat left top; LEFT: -30px;overflow:hidden;
}
.hoverRight {
	Z-INDEX: 9999; BACKGROUND: url(arrow-right-hover.png) no-repeat left top; RIGHT: -25px;overflow:hidden;
}
.hoverNav IMG {
	MARGIN: 15px 0px 0px 15px;
	 WIDTH: 142px;
	 HEIGHT: 74px;
}
A.text-replace {
	DISPLAY: block; OVERFLOW: hidden; TEXT-INDENT: -99999px
}
A.previous:hover {
	BACKGROUND: url(bg-all-previous-next-sprite-80x80.png) no-repeat 0px -41px
}
A.next:hover {
	BACKGROUND: url(bg-all-previous-next-sprite-80x80.png) no-repeat -41px -41px
}
A.previous {
	LEFT: -24px; 
	WIDTH: 39px; 
	POSITION: absolute; 
	TOP: 165px; 
	HEIGHT: 39px;
	BACKGROUND: url(bg-all-previous-next-sprite-80x80.png) no-repeat 0px 0px
}
A.next {
	RIGHT: -19px; 
	WIDTH: 39px; 
	POSITION: absolute; 
	TOP: 165px; 
	HEIGHT: 39px;
	BACKGROUND: url(bg-all-previous-next-sprite-80x80.png) no-repeat -41px 0px
}
HTM页面代码： 
<div class="content-main">
    <a class="previous text-replace" id="prevBtn" href="#">previous</a> <a class="next text-replace"
        id="nextBtn" href="#">next</a>
    <div class="hoverNav hoverLeft">
    </div>
    <div class="hoverNav hoverRight">
    </div>
    <div id="viewer">
    </div>
    <div class="carousel"   >
        <ul class="slider"  >
            <li class="panel" id="panel-matthewhenry" rel="/photo/100_0781.jpg"><a href="">
                <img  src="/photo/100_0781.jpg" ></a>
            </li>
            <li class="panel" id="Li1" rel="/photo/100_0785.jpg"><a href="">
                <img  src="/photo/100_0785.jpg" ></a>
            </li>
            <li class="panel" id="Li2" rel="/photo/100_0791.jpg"><a href="">
                <img  src="/photo/100_0791.jpg" ></a>
            </li>
        </ul>
    </div>
</div>

<script type="text/javascript"   >
    jQuery.run = {
        box: null,
        pic: null,
        x: null,
        over: function() { clearInterval(jQuery.run.x); },
        main: function(a,b,c) {
            var pos=Math.abs(b);
            var vertical = (c == 1);
            if (!vertical){
                var scrollLeft=Math.abs(this.box.scrollLeft);
                if (this.pic.offsetWidth - this.box.scrollLeft <= 0) {
                    jQuery.hor.box.scrollLeft -= this.pic.offsetWidth;
                } else {
                    if(a>0){
                           if(scrollLeft<pos)
                           {
                                this.box.scrollLeft+=a;
                           }else if(scrollLeft>pos){
                                this.box.scrollLeft+=-1*(scrollLeft-pos);
                           }
                     }
                   if(a<0){
                           if(scrollLeft>pos)
                           {
                                this.box.scrollLeft +=a;
                           }else if(scrollLeft<pos){
                                this.box.scrollLeft +=-1*(scrollLeft-pos);
                           }
                   }
                }
            }else{
                var scrollTop=Math.abs(this.box.scrollTop);
                if( this.pic.offsetHeight- this.box.scrollTop<=0){
                    this.box.scrollTop-= this.pic.offsetHeight;
                }else{
                    if(a>0){
                           if(scrollTop<pos)
                           {
                                this.box.scrollTop+=a;
                           }else if(scrollTop>pos){
                                this.box.scrollTop+=-1*(scrollTop-pos);
                           }
                     }
                   if(a<0){
                           if(scrollTop>pos)
                           {
                                this.box.scrollTop +=a;
                           }else if(scrollTop<pos){
                                this.box.scrollTop +=-1*(scrollTop-pos);
                           }
                   }
                }
            }           
        },
        speed: 10,
        star: function(a,b,c) {  $.run.x = setInterval("jQuery.run.main(" + a + "," + b + "," + c + ")", $.run.speed);},
        init: function(options) {
            var defaults = {
                boxid: null
            }
            var o = $.extend(defaults, options);
            this.box = o.boxid[0];
            this.pic = $('>*', this.box)[0];
        }
    };
(function($) {
    $.fn.smallEasySlider = function(options) {
        // default configuration properties
        var defaults = {
            prevId: 'prevBtn',
            prevText: 'Previous',
            nextId: 'nextBtn',
            nextText: 'Next',
            orientation: 'vertical',         //  'vertical' is optional;
            speed: 1300,
            hover: true
        };

        var options = $.extend(defaults, options);

        return this.each(function() {
            obj = $(this);
            var s = (options.s > 0) ? options.s : $("li.panel", obj).length;
            var ts = s - 1;
            var t = 0;
            var p = 0;

            var w = obj.width();
            var h = obj.height();
            var vertical = (options.orientation == 'vertical');
            $("li", obj).css('float', 'left');
            if (!vertical){
                $("ul", obj).css('width', s * w);
            }else{
               $("ul", obj).css('height', s * h);
            }
            jQuery.run.init({boxid:obj,speed:options.speed});


            $("#" + options.prevId).attr("href", 'javascript:void(0);');
            $("#" + options.nextId).attr("href", 'javascript:void(0);');

            $("#" + options.nextId).click(function() {
                animate("next");
                setLocation();
            });

            $("#" + options.prevId).click(function() {
                animate("prev");
                setLocation();
            });

            if (options.hover) {
                if ($.browser.msie) {
                    $("#" + options.nextId).hover(function() {
                        $(".hoverRight").show();
                    },
					function() { $(".hoverRight").hide(); });
                    $("#" + options.prevId).hover(function() { $(".hoverLeft").show(); },
					function() { $(".hoverLeft").hide(); });
                }
                else {
                    $("#" + options.nextId).hover(function() { $(".hoverRight").fadeIn(); },
						function() { $(".hoverRight").fadeOut(); });

                    $("#" + options.prevId).hover(function() { $(".hoverLeft").fadeIn(); },
						function() { $(".hoverLeft").fadeOut(); });
                }
            }

            function animate(dir) {
                if (dir != undefined) {
                    if (dir == "next") {
                        t = (t >= ts) ? 0 : t + 1;
                    } else {
                        t = (t <= 0) ? ts : t - 1;
                    };
                }

                if (!vertical) {
                    p = (t * w * -1);
                    if (dir == "next") {
                        $.run.over();
                        $.run.star(30,p,0);
                    }
                    else{
                        $.run.over();
                        $.run.star(-30,p,0);
                    }                    
                } else {
                    p = (t * h * -1);
                    if (dir == "next") {
                        $.run.over();
                        $.run.star(14,p,1);
                    }
                    else{
                        $.run.over();
                        $.run.star(-14,p,1);
                    }
                }
            };


            function jump(i) {
                t = (i - 1);
                p = (t * w * -1);
                $("ul", obj).css({ marginLeft: p });
                setLocation();
            }

            function setLocation() {
                $(".pagination a").removeClass("active");
                $(".pagination li").removeClass("active");
                $(".pagination li:eq(" + t + ")").addClass("active");

                // setup hover 
                var left = t - 1;
                var right = t + 1;

                if (left < 0) { left = ts }
                if (right > ts) { right = 0 }

                var hoverSrc = $("li:eq(" + left + ")", obj).attr("rel");
                $(".hoverLeft").html('<img src="' + hoverSrc + '" />');
                hoverSrc = $("li:eq(" + right + ")", obj).attr("rel");
                $(".hoverRight").html('<img src="' + hoverSrc + '" />');
            }



            // initial call
            setLocation();

            // check the hash
            if (location.hash != "" && location.hash != "#") {
                var h = location.hash;
                var i = h.replace("#", "");
                jump(i);
            }
        });
    };
})(jQuery);
以上是插件代码。
function getImg(n){
    var pics=[];
    switch(n){
        case 1:
                pics=["1.jpg","2.jpg","5.jpg"];
                break;       
        case 2: pics=["3.jpg","4.jpg"];
                break;
        case 3: pics=["5.jpg","6.jpg"];
                break;
    }
    
    var htm="";
    for(var key in pics){
         htm+="<li class=\"panel\" id=\"panel-matthewhenry\" rel=\"/photo/{0}\"><a href=\"\">";
         htm+="<img src=\"/photo/{1}\" ></a>";
         htm+="</li>";
         htm=htm.replace("{0}",pics[key]).replace("{1}",pics[key]);
    }
    
    $(".slider").html(htm);
    $(".carousel").smallEasySlider({});
}
</script>
后台初始化调用： 
    /// <summary>
    /// 放在调用页面头部
    /// </summary>
    public string Head {
        get {
            StringBuilder sb = new StringBuilder();
            sb.Append("<link media=\"screen, projection\" href=\"/Slider/combined.css\" type=\"text/css\" rel=\"stylesheet\">\n");
            sb.Append("<script type=\"text/javascript\">$(function(){$(\".carousel\").smallEasySlider({});});</script>");
            return sb.ToString();
        }
    }

chinet_bridge
关注
专栏目录
JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个
10-11
73. 一款jQuery插件slide幻灯片切换图片宽高自适应 74. 一款jQuery漂亮淡出淡入焦点大图切换源码 75. 一款jquery缩略图商品切换放大展示功能插件 76. 一款使用jQuery左右控制横向图片滚动的代码 77. 一款...
element UI自带的图片预览插件，实现点击按钮预览图片列表 el-image-viewer
qq_39906719的博客
07-01 1万+
Element UI 有个图片预览功能，即给图片加上preview-src-list属性，就可设置预览图数组。 <div class="demo-image__preview"> <el-image style="width: 100px; height: 100px" :src="url" :preview-src-list="srcList"> </el-image> </div> <script> e
ImageButton点击按钮改变图片
热门推荐
shenggaofei的博客
07-07 1万+
一.ImageButton点击按钮改变图片 **************************ImageButton点击按钮改变图片 有两种写法***************************** *****第一种：在代码中***** **MaActivity.class** import android.os.Build; import android.os.Bundle...
jquery网页特效
09-01
这些插件允许设定自动切换、过渡效果、导航按钮等功能，使图片展示更加生动有趣。 2. 图片放大：jQuery也提供了方便的图片预览和放大的功能，如Magnific Popup、Fancybox、Lightbox等插件。它们可以为用户提供高...
jquery笔记
01-24
27. **同级中的第一个或最后一个元素**：`$("对象:first-child")` 或 `$("对象:last-child")` —— 选取同级中的第一个或最后一个元素。 28. **只含单一子元素的元素**：`$("对象:only-child")` —— 选取只含有一...
jQuery 联动日历实现代码
10-28
1. **日历显示与隐藏**：点击“确定”按钮后，日历组件被显示出来，再次点击“确定”或执行隐藏操作，可使日历消失，实现重复的显示与隐藏切换。 2. **显示当前月份日期**：联动日历需要能够动态显示当前月份的...
软件工程师_经典收藏50个jQueryMobile开发技巧集萃.docx
07-06
28. **插件扩展**：发掘并使用第三方jQuery Mobile插件，丰富应用功能。 29. **触摸友好的导航**：创建适应触控操作的菜单和滑块，提高导航便捷性。 30. **无障碍访问**：遵循WCAG标准，确保应用对障碍人士友好。 ...
JQuery插件第三十个 : 图片批量滚动的封装功能增强版
chinet_bridge的专栏
03-26 985
图片批量滚动
自编JQuery插件第十二个:水平滚动图片
chinet_bridge的专栏
11-13 731
水平滚动图片效果: <SCRIPT language=javascript src="jquery-1.6.js" type=text/javascript> .margin_18 { MARGIN-RIGHT: 18px } #runbox { DISPLAY: block; OVERFLOW: hidden; WIDTH: 618px; HEIGHT: 87px } #runbo
JQ插件第四十九:图片滑动轮播
chinet_bridge的专栏
12-06 675
(function($) { $.fn.slide = function(option) { option = option || {}; var defaultOption = { W: $(window).width(), F: 5500, T: null,
软件著作权申请教程（超详细）（2024新版）软著申请
m0_75269526的博客
09-09 2689
软件著作权，软著，软著申请，软用户使用手册：提交登记软件的任何一种文档的连续的前30页和连续的后30页，每页不少于30行。如果是多人合作开发著作权人不是一个人的话，还需要准备一份合作开发协议。首先我们需要在官网里面注册一个账号，并且完成实名认证，一般是注册【个人】的身份。合作开发协议书：这个如果是著作权人有多个（多个人一起开发）就需要提供这个材料。在填报完成之后需要打印一个签章页签字（如果不是个人需要盖章）注册完成后点击下面进行登记，如果没有实名需要先实名认证（源代码：源程序前连续的30页和后连续的30页。
js中【Worker】相关知识点详细解读
2301_79858914的博客
09-11 591
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
echarts.js+china.js实现中国地图各省数据案例
qq_58258855的博客
09-11 409
实现中国地图各省数据案例
JavaScript基础
zhangh040629的博客
09-10 1270
//** 控制浏览器弹出一个警告框* alert()*/alert;/** 让计算机在页面中输出一个内容*/write;/** 向控制台输出一个内容*/log;</</</</
jEasyUI 创建带复选框的树形菜单
wjs2024的博客
09-10 342
jEasyUI 是一个基于 jQuery 的框架，它为用户提供了一套完整的用户界面组件，包括菜单、窗口、表格等。在本文中，我们将重点介绍如何使用 jEasyUI 创建一个带复选框的树形菜单。
JS的输出语句
最新发布
J3259392566的博客
09-13 176
js中严格区分大小写。
八十多种证件识别接口-JavaScript身份证识别API示例-护照识别-户口页识别
weixin_41711744的博客
09-12 498
证件识别API包含了身份证识别、护照识别、户口页识别、港澳台来往通行证识别等八十多种证件识别类型，提供了快速、精准的证件信息提取功能，广泛应用于实名认证 、机场出入口等场景。身份证识别API常用于在线支付、金融服务、酒店入住等需要进行实名认证和提取身份信息的场景。在这些场景中，通过快速识别和验证身份证信息，可以有效提高处理速度，减少人为错误，增强安全性。八十多种证件识别接口提供了一种高效、精准的识别方式来读取各类证件信息，通过合理应用这些技术，可以大幅提升用户体验和企业运营效率。
jQuery插件实践：创建图片hover效果
这个资源主要介绍了一个基于jQuery的图片hover效果插件的使用和编写方法。该插件能够实现当鼠标悬停在图片上时，展示附加内容的有趣效果，特别适合用于学习和实践jQuery插件开发。 首先，我们来看插件的使用。在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值