jquery图片轮播

最新推荐文章于 2024-03-14 19:48:19 发布

changuncle

最新推荐文章于 2024-03-14 19:48:19 发布

阅读量801

点赞数 3

分类专栏： JavaScript 文章标签： jquery 图片轮播相对路径绝对路径

本文链接：https://blog.csdn.net/xiaouncle/article/details/52304007

版权

JavaScript 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

网上有很多jquery图片轮播效果的例子，这个是我平时使用较多的方法，主要是使用了jquery插件，作为经历记录下来。

<img>的src为相对路径：

前台代码：

<div class="container">
    <header class="codrops-header">
        <nav class="codrops-demos">
            <a class="current-demo" href="index.html">Small Component</a>
            <a href="index2.html">Full Width</a>
            <a href="index3.html">Transparent</a>
        </nav>
    </header>
    <section>
        <div class="custom-select">
            <!-- 如果不想显示效果下拉列表，可以设置为不显示 -->
            <select id="fxselect" name="fxselect" style="display:none">
                <option value="-1" >选择一种效果...</option>
                <option value="fxCorner">Corner scale</option>
                <option value="fxVScale">Vertical scale</option>
                <option value="fxFall">Fall</option>
                <option value="fxFPulse">Forward pulse</option>
                <option value="fxRPulse">Rotate pulse</option>
                <option value="fxHearbeat">Hearbeat</option>
                <option value="fxCoverflow" selected>Coverflow</option>
                <option value="fxRotateSoftly">Rotate me softly</option>
            </select>
        </div>
        <div id="component" class="component component-small">
            <ul class="itemwrap">
                <!-- 写死的轮播图，图片路径为相对路径 -->
                <%--<li class="current"><img src="Script/jquery-tpzs/img/1.jpg" alt="img01"/><p>img01</p></li>
                <li><img src="Script/jquery-tpzs/img/2.jpg" alt="img02"/><p>img02</p></li>
                <li><img src="Script/jquery-tpzs/img/3.jpg" alt="img03"/><p>img03</p></li>
                <li><img src="Script/jquery-tpzs/img/4.jpg" alt="img04"/><p>img04</p></li>
                <li><img src="Script/jquery-tpzs/img/5.jpg" alt="img05"/><p>img05</p></li>--%>
                <!-- 根据实际情况在后台动态拼接图片信息进行展示，必须是<%=%>不能是<%:%> -->
                <%=BindImgData() %>
            </ul>
            <nav>
                <a class="prev" href="#">Previous item</a>
                <a class="next" href="#">Next item</a>
            </nav>
        </div>
    </section>
</div><!-- /container -->
<!-- 这两个script不能放到<head/>中否则没效果 -->
<script src="Script/jquery-tpzs/js/classie.js"></script>
<script src="Script/jquery-tpzs/js/main.js"></script>

后台代码：

<!-- public或protected类型方法，前台可调用 -->
protected string BindImgData()
{
    StringBuilder sb = new StringBuilder();
    <!-- 字符串格式必须一致，内容可根据实际情况改变，图片路径为相对路径 -->
    sb.AppendFormat("<li class=\"current\"><img src=\"{0}\" alt=\"{1}\"><p>{2}</p></li>", "Script/jquery-tpzs/img/1.jpg","img01","img01");
    sb.AppendFormat("<li><img src=\"{0}\" alt=\"{1}\"><p>{2}</p></li>", "Script/jquery-tpzs/img/2.jpg", "img02", "img02");
    sb.AppendFormat("<li><img src=\"{0}\" alt=\"{1}\"><p>{2}</p></li>", "Script/jquery-tpzs/img/3.jpg", "img03", "img03");
    sb.AppendFormat("<li><img src=\"{0}\" alt=\"{1}\"><p>{2}</p></li>", "Script/jquery-tpzs/img/4.jpg", "img04", "img04");
    sb.AppendFormat("<li><img src=\"{0}\" alt=\"{1}\"><p>{2}</p></li>", "Script/jquery-tpzs/img/5.jpg", "img05", "img05");
    return sb.ToString();
}

<img>的src为绝对路径：

<!-- web程序不支持这样的绝对路径 -->
<img src="D：/001/001.jpg"/>
<!-- web程序支持这样格式的绝对路径 -->
<img src="http://localhost:2210/Script/jquery-tpzs/img/1.jpg"/>
<!-- 后台代改写后 -->
protected string BindImgData()
{
    StringBuilder sb = new StringBuilder();
    <!-- 特殊格式的绝对路径 -->
    sb.AppendFormat("<li class=\"current\"><img src=\"{0}\" alt=\"{1}\"><p>{2}</p></li>", "http://localhost:2210/Script/jquery-tpzs/img/1.jpg", "img01", "img01");
    sb.AppendFormat("<li><img src=\"{0}\" alt=\"{1}\"><p>{2}</p></li>", "http://localhost:2210/Script/jquery-tpzs/img/2.jpg", "img02", "img02");
    sb.AppendFormat("<li><img src=\"{0}\" alt=\"{1}\"><p>{2}</p></li>", "http://localhost:2210/Script/jquery-tpzs/img/3.jpg", "img03", "img03");
    sb.AppendFormat("<li><img src=\"{0}\" alt=\"{1}\"><p>{2}</p></li>", "http://localhost:2210/Script/jquery-tpzs/img/4.jpg", "img04", "img04");
    sb.AppendFormat("<li><img src=\"{0}\" alt=\"{1}\"><p>{2}</p></li>", "http://localhost:2210/Script/jquery-tpzs/img/5.jpg", "img05", "img05"); 
    return sb.ToString();
}