仿京东商城商品图片 缩略图+放大镜效果

Jquery包文件及样式下载 具体效果可参考京东商城商品图片展示
第一步:需要导入Jquery包文件和样式文件(放在<head></head>中间):
<script src="jquery/jquery-1.2.6.pack.js" type="text/javascript"></script>
<%--Jquery基础包 1.2.6版本--%>
<script src="jquery/jquery.jcarousel.js" type="text/javascript"></script>
<%--底部小图左右滚动脚本--%>
<script src="jquery/jquery.jqzoom.js" type="text/javascript"></script>
<%--放大镜效果脚本--%>
<link href="Style/jqzoom.css" rel="stylesheet" type="text/css" />
<%--放大镜效果样式--%>
<link href="Style/jcarousel.css" rel="stylesheet" type="text/css" />
<%--
底部左右滚动图片样式 此样式表中样式需根据实际需要进行调整
关键的是以下几个样式的width,height,padding,margin的数值
.jcarousel-skin-tango .jcarousel-container-horizontal {}
.jcarousel-skin-tango .jcarousel-container-vertical {}
.jcarousel-skin-tango .jcarousel-clip-horizontal {}
.jcarousel-skin-tango .jcarousel-clip-vertical {}
--%>

第二步:添加相关 20989;数方法(放在<head></head>中间):

<script type="text/javascript">
//作为页面onload事件当页面加载时将底部小图片加载到上面大的div中
        function attachImgEventListener() {
            var imageArray = document.getElementById("mycarousel").getElementsByTagName("img");
            if (imageArray.length == 0) {
                document.getElementById("PicBig").src = "Image/Blank.gif";
                document.getElementById("Product_BigImage").jqimg = document.getElementById("PicBig").src;
                document.getElementById("Product_LittleImage").style.display = "none";
            }
            else {
                document.getElementById("PicBig").src = imageArray[0].src;
                document.getElementById("PicBig").jqimg = imageArray[0].src;
            }
        }
    </script>

    <script type="text/javascript">
//加载底部左右滚动小图片
        function mycarousel_initCallback(carousel) {
            $("#mycarousel li").mouseover(function() {
                $("#Product_BigImage img")[0].src = this.getElementsByTagName("img")[0].name;
                $("#Product_BigImage img")[0].jqimg = this.getElementsByTagName("img")[0].name;
                $(this).siblings().each(function() {
                    this.getElementsByTagName("img")[0].className = "";
                })
                this.getElementsByTagName("img")[0].className = "curr";
            })
        };
        //图片放大的相关方法和参数
        $(document).ready(function() {
            $(".jqzoom").jqueryzoom({
                xzoom: 280, // 放大图的宽
                yzoom: 220, // 放大图的高
                offset: 10,   // 放大图距离原图的位置
                position: ‘right‘,   // 放大图在原图的右边(默认为right)
                lens: 1
            });
//底部小图片滚动函数 详细参数说明见底部
            jQuery("#mycarousel").jcarousel({
                initCallback: mycarousel_initCallback
            });
        });
    </script>

第三步:页面中的代码
                <div style="float: left; width:282px">
<!--此div中class必须为jqzoom-->
                    <div id="Product_BigImage">
                        <img id="PicBig" name="PicBig" style="width: 280px; height: 220px" />
                    </div>
                   <div id="Product_LittleImage" style="float: left;">
<!--此ul中id必须为mycarousel, class可根据实际需要在jcarousel.css中调整-->
                        <ul id="mycarousel">
                            <!--Repeater控件在后台绑定数据,此例中PicBig字段为图片地址-->
<asp:Repeater runat="server" ID="PicList">
                                <ItemTemplate>
                                    <li>
                                        <img id=‘<%# Eval("PicBig") %>‘ name=‘<%# Eval("PicBig") %>‘ src=‘<%# Eval("PicBig") %>‘ />
                                    </li>
                                </ItemTemplate>
                            </asp:Repeater>
                        </ul>
                    </div>
                </div>

第四步:很重要但很容易忘记的一个地方

   在<body>中添加οnlοad="attachImgEventListener()"
此处如果忘记在body中添加onload事件则在页面首次加载时底部小图片上方的大图没有图片,当鼠标移动到小图片上时才会加载

jquery-jCarousel 配置选项

属性 类型 

默认值 描述 
vertical bool false 指定carousel是水平还是垂直方向滚动。 


start integer 1 开始的元素编号。 
offset integer 1 初始化后第一个可见的元素编号。 
size integer 如果size属性没指定,则为<li>元素的个数 元素的个数。 
scroll integer 3 每次滚动切换的元素数量。 
visible integer null 如果设置此项,元素的宽度和高度值将根据区域的宽度和高度值来重新计算,以显示此数量的元素。 
animation mixed "fast" 滚动效果的速度("slow"或者"fast"),也可以是毫秒的整数(参见 jQuery Documentation)。如果设置为0,关闭切换效果。 
easing string null 你想使用的缓冲效果的名字 (参见 jQuery Documentation). 
auto integer 0 指定每隔多少秒自动滚动内容。如果设置为0(默认值)将关闭自动切换。 
wrap string null 表示是否将第一个和最后一个元素实现连接效果。选项值可以是

"first"

,

"last"

或者

"both"

。如果设置为

null

,默认关闭连接效果。你也可以设置

"circular"选项实现循环效果。

例子 Circular carousel 演示如何实现此效果。

initCallback function null 在初始化carousel后调用的JavaScript函数。包含两个参数:调用函数的carousel实例对象和carousel的初始化状态(init, reset 或者reload)。 
itemLoadCallback function null 在carousel动态载入内容后调用的JavaScript函数。包含两个参数:调用函数的carousel实例对象和carousel的动作状态(prev, next or init)。你还可以传递一个或两个函数的列表,分别表示切换前和切换后的动作。

itemLoadCallback: {

onBeforeAnimation: callback1,

onAfterAnimation: callback2

}

itemFirstInCallback function null 当某个元素成为carousel显示范围的第一个元素时调用的JavaScript函数(在滚动效果之后)。需要四个参数:调用函数的 实例对象,<li>对象本身,元素在列表中中序号,以及carousel的动作状态 (prev, next or init)。你还可以传递一个或两个函数的列表,分别表示切换前和切换后的动作。

itemFirstInCallback: {

onBeforeAnimation: callback1,

onAfterAnimation: callback2

}

itemFirstOutCallback function null 当某个元素不再是carousel显示范围的第一个元素时调用的JavaScript函数(在滚动效果之后)。需要四个参数:调用函数 的实例对象,<li>对象本身,元素在列表中中序号,以及carousel的动作状态 (prev, next or init)。你还可以传递一个或两个函数的列表,分别表示切换前和切换后的动作。

itemFirstOutCallback: {

onBeforeAnimation: callback1,

onAfterAnimation: callback2

}

itemLastInCallback function null 当某个元素成为carousel显示范围的最后一个元素时调用的JavaScript函数(在滚动效果之后)。需要四个参数:调用函数 的实例对象,<li>对象本身,元素在列表中中序号,以及carousel的动作状态 (prev, next or init)。你还可以传递一个或两个函数的列表,分别表示切换前和切换后的动作。

itemLastInCallback: {

onBeforeAnimation: callback1,

onAfterAnimation: callback2

}

itemLastOutCallback function null 当某个元素不再是carousel显示范围的最后一个元素时调用的JavaScript函数(在滚动效果之后)。需要四个参数:调用函 数的实例对象,<li>对象本身,元素在列表中中序号,以及carousel的动作状态 (prev, next or init)。你还可以传递一个或两个函数的列表,分别表示切换前和切换后的动作。

itemLastOutCallback: {

onBeforeAnimation: callback1,

onAfterAnimation: callback2

}

itemVisibleInCallback function null 当某个元素成为carousel显示范围的某个元素时调用的JavaScript函数(在滚动效果之后)。需要四个参数:调用函数的实 例对象,<li>对象本身,元素在列表中中序号,以及carousel的动作状态 (prev, next or init)。你还可以传递一个或两个函数的列表,分别表示切换前和切换后的动作。

itemVisibleInCallback: {

onBeforeAnimation: callback1,

onAfterAnimation: callback2

}

itemVisibleOutCallback function null 当某个元素不再是carousel显示范围的某个元素时调用的JavaScript函数(在滚动效果之后)。需要四个参数:调用函数的 实例对象,<li>对象本身,元素在列表中中序号,以及carousel的动作状态 (prev, next or init)。你还可以传递一个或两个函数的列表,分别表示切换前和切换后的动作。

itemVisibleOutCallback: {

onBeforeAnimation: callback1,

onAfterAnimation: callback2

}

buttonNextCallback function null 当‘next‘按钮状态改变时调用的JavaScript函数。方法的返回值用于控制‘next‘按钮可用还是不可用。需要三个参数:调用函数的实例对象,按钮控件元素和该按钮是否可用的标记。 
buttonPrevCallback function null 当‘previous‘按钮状态改变时调用的JavaScript函数。方法的返回值用于控制‘previous‘按钮可用还是不可用。需要三个参数:调用函数的实例对象,按钮控件元素和该按钮是否可用的标记。 
buttonNextHTML string

<div></div>
自动生成的next按钮的HTML标记。如果设置为空,不创建next按钮。 
buttonPrevHTML string

<div></div>
自动生成的prev按钮的HTML标记。如果设置为空,不创建prev按钮。 
buttonNextEvent string "click" 指定触发next操作的事件名。 
buttonPrevEvent string "click" 指定触发prev操作的事件名。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值