zoukankan      html  css  js  c++  java
  • 基于jQuery商城网站全屏图片切换代码

    基于jQuery商城网站全屏图片切换代码。这是一款商城网站全屏多张图片滑动切换代码。效果图如下:

    在线预览    源码下载

    实现的代码。

    html代码:

    <div class="slides">
            <div class="slideInner">
                <a href="#" style="background: url(img/slide1.jpg) no-repeat;">
                    <div class="moveElem img1" rel="0,easeInOutExpo">
                        <img src="img/slide1p1.png" />
                    </div>
                    <div class="moveElem img2" rel="150,easeInOutExpo">
                        <img src="img/slide1p2.png" />
                    </div>
                </a><a href="#" style="background: url(img/slide2.jpg) no-repeat">
                    <div class="moveElem img1" rel="0,easeInOutExpo">
                        <img src="img/slide2p1.png" />
                    </div>
                </a><a href="#" class="slide3" style="background: url(img/slide3.jpg) no-repeat;">
                    <div class="moveElem img1" rel="0,easeInOutExpo">
                        <img src="img/slide3p1.png" />
                    </div>
                    <div class="moveElem img2" rel="150,easeInOutExpo">
                        <img src="img/slide3p2.png" />
                    </div>
                    <div class="moveElem img3" rel="300,easeInOutExpo">
                        <img src="img/slide3p3.png" />
                    </div>
                </a><a href="#" style="background: rgb(113, 209, 231);">
                    <div class="moveElem img1" rel="0,easeInOutExpo">
                        <img src="img/slide1p1.png" />
                    </div>
                    <div class="moveElem img2" rel="150,easeInOutExpo">
                        <img src="img/slide1p2.png" />
                    </div>
                </a><a href="#" style="background: rgb(178, 44, 44);">
                    <div class="moveElem img1" rel="0,easeInOutExpo">
                        <img src="img/slide1p1.png" />
                    </div>
                    <div class="moveElem img2" rel="150,easeInOutExpo">
                        <img src="img/slide1p2.png" />
                    </div>
                </a>
            </div>
            <div class="nav">
                <a class="prev" href="javascript:;"></a><a class="next" href="javascript:;"></a>
            </div>
        </div>

    js代码:

    $(document).ready(function () {
                $(".slideInner").slide({
                    slideContainer: $('.slideInner a'),
                    effect: 'easeOutCirc',
                    autoRunTime: 5000,
                    slideSpeed: 1000,
                    nav: true,
                    autoRun: true,
                    prevBtn: $('a.prev'),
                    nextBtn: $('a.next')
                });
            });

    via:http://www.w2bc.com/article/50926

  • 相关阅读:
    安卓学习第25课——imageswitcher
    安卓学习第24课——viewSwitcher
    安卓学习第23课——ratingBar
    安卓学习第22课——seekBar
    减治求有重复元素的全排列
    【POJ 1182 食物链】并查集
    【POJ 2823 Sliding Window】 单调队列
    ID3算法 决策树 C++实现
    用BFS和DFS解决圆盘状态搜索问题
    用哈希表实现图书管理系统
  • 原文地址:https://www.cnblogs.com/liaohuolin/p/4673979.html
Copyright © 2011-2022 走看看