网上有很多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();
}
- http://localhost:2210其实对应网站的根目录,网站的根目录为某个物理地址,图片是在网站根目录下的某个文件夹中
- 如果访问当前web项目根目录下某文件夹中的图片,那其实跟相对路径没啥区别
- 如果访问本地其他端口号的web项目对应的根目录下某文件夹中的图片,那就是相对路径所不及的了,只能用这种格式的绝对路径
- 如果访问其他IP地址对应的网站的根目录下的某文件夹中的图片,那也是相对路径所不及的,只能用这种格式的绝对路径
jquery插件下载地
址:http://download.csdn.net/detail/xiaouncle/9612053