如何用js实现天猫那种图片滑动效果，ie不支持transition，求详细代码

JavaScript021

如何用js实现天猫那种图片滑动效果，ie不支持transition，求详细代码,第1张

这个使用js包 比如jquery等 淘宝用的是kissy 下面是operamasks实现这个效果的完整代码

<style>

        .slider-demo{

            width: 500px

            height: 375px

            padding: 0

        }

        body p{

            font-weight: bold

            font-size: 13px

        }

    </style>

    <script type="text/javascript">

        $(document).ready(function(){

            $('#slider-slide-v').omSlider({effect:'slide-v'})

        })

    </script>

     

    <div id="effect_tab">

        <ul>

            <li><a href="#slider-slide-h">水平滑动效果</a></li>

        </ul>

 

        <div id="slider-slide-v" class="slider-demo">

            <img src="images/turtle.jpg" />

            <a href="#"><img src="images/rabbit.jpg" /></a>

            <img src="images/penguin.jpg" />

            <img src="images/lizard.jpg" />

            <img src="images/crocodile.jpg" />

        </div>

    </div>

实现方法就是生成页面的时候把这个商品（SKU）对应的各种库存信息取出来，然后赋值给 javascript 。javascript 根据用户选择事件来确定条件（点击的颜色，尺寸），然后对应取出库存量，通过 DOM 操作显示给用户。

具体可以点击右键查看源码：

<li data-value="1627207:28341" title="0020黑色">

<a href="#" tyle="background:url(图片路径地址_30x30.jpg) center no-repeat">

<span>0020黑色</span>

</a>

</li>

上面的属性 data-value 内容就是标记选定颜色的，假设同样有尺寸的属性 123:321。那么 123:321&1627207:28341 就能确定库存。查看 javascript ，搜索一下 skuMap 就会发现库存数据全在里面了。

你这个设置图片为嘛是手工输入图片地址？为什么不用框架提供的 fileupload上传工具；

看你这毛事3张图片一组，建议拿数据库保存地址就是了，建表也简单；上传一下就可以加载了挺方便也实用