Jquery手动控制切换的图片展示效果

Jquery手动控制切换的图片展示效果...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>手动控制切换的图片展示效果丨芯晴网页特效丨CsrCode.Cn</title> <meta http-equiv="content-type" content="text/html;charset=gb2312">  <style type="text/css"> div,img,ul,li{margin:0;padding:0;border:0;} li{list-style-type:none;} a:link,a:visited{color:#336699;text-decoration:none;} a:hover,a:active{color:#3B70A6;text-decoration:underline;} #newPic{width:860px;margin:0 auto;} #newPic .bg_3,#newPic .bg_4{height:20px;border-bottom:1px solid #DAEBFF;} #newPic .bg_3 span{ margin-left:-999px;} #newPic .list{overflow:hidden;} #newPic .list li{float:left;width:132px;margin-right:13px;margin-bottom:12px;} .col2{position:relative;} .col2 .jcarousel-skin-tango{margin:10px 0 5px 0;} .col2 .jcarousel-skin-tango li h4{margin-top:5px;} .col2 .jcarousel-skin-tango li h4 a{font-size:12px;color:#3d3d3d;font-weight:normal;margin-top:5px;} .col2 .jcarousel-clip{z-index:2;padding:0;margin:0;overflow:hidden;position:relative;} .col2 .jcarousel-list{z-index:1;overflow:hidden;position:relative;width:858px;} .col2 .jcarousel-list li,.col2 .jcarousel-item{float:left;list-style:none;width:133px;text-align:center;} .col2 .jcarousel-list li img{display:block;} .col2 .jcarousel-next{z-index:3;display:none;} .col2 .jcarousel-prev{z-index:3;display:none;} .col2 .jcarousel-skin-tango .jcarousel-item-horizontal{margin-right:12px;} .col2 .jcarousel-skin-tango .jcarousel-container-horizontal{position:relative;} .col2 .jcarousel-skin-tango .jcarousel-clip-horizontal{width:858px;} .col2 .jcarousel-skin-tango .jcarousel-next-horizontal{position:absolute;top:40px;right:-26px;width:16px;height:16px;cursor:pointer;background:url(../../js_img/9-04/images/bg.gif) no-repeat 0 -224px;} .col2 .jcarousel-skin-tango .jcarousel-next-horizontal:active{background-position:-17px -224px;border:2px;border-color:#ff0000;} .col2 .jcarousel-skin-tango .jcarousel-next-disabled-horizontal, .col2 .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active{cursor:default;background-position:-17px -224px;border:2px;border-color:#ff0000;} .col2 .jcarousel-skin-tango .jcarousel-prev-horizontal{position:absolute;top:40px;left:-26px;width:16px;height:16px;cursor:pointer;background:transparent url(../../js_img/9-04/images/bg.gif) no-repeat 0 -188px;} .page em{background:transparent url(../../js_img/9-04/images/bg.gif) no-repeat 0 -188px;} .col2 .jcarousel-skin-tango .jcarousel-prev-horizontal:active{background-position:-17px -224px;} .col2 .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal, .col2 .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active{cursor:default;background-position:-17px -188px;} .scrollnav{position:absolute;top:-32px;right:5px;} #mycarousel li{float:left;} </style> <script language="javascript" src="../../images/js/j.js"></script> <script type="text/javascript" src="../../js_img/9-04/js/jquery.jcarousel.pack.js"></script> </head> <body> 预览效果时左下角会提示错误，而且看不到效果，刷新一下就可以看到效果了；当然，在实际使用中，不会出现这样的问题。<br>  <div id="newPic"> <div class="col2"> <ul id="mycarousel" class="carousel-list jcarousel-skin-tango"> <li> <a href="#" title="www.CsrCode.cn"><img src="../../js_img/8-24/images/01.jpg" width="133" height="100"></a> <h4><a href="#">红叶传情</a></h4> </li> <li> <a href="#" title="www.CsrCode.cn"><img src="../../js_img/8-24/images/02.jpg" width="133" height="100"></a> <h4><a href="#">野花绽放</a></h4> </li> <li> <a href="#" title="www.CsrCode.cn"><img src="../../js_img/8-24/images/03.jpg" width="133" height="100"></a> <h4><a href="#">往事如茶</a></h4> </li> <li> <a href="#" title="www.CsrCode.cn"><img src="../../js_img/8-24/images/05.jpg" width="133" height="100"></a> <h4><a href="#">玫瑰情思</a></h4> </li> <li> <a href="#" title="www.CsrCode.cn"><img src="../../js_img/8-24/images/04.jpg" width="133" height="100"></a> <h4><a href="#">油菜花开</a></h4> </li> <li> <a href="#" title="www.CsrCode.cn"><img src="../../js_img/8-24/images/06.jpg" width="133" height="100"></a> <h4><a href="#">玫瑰情思</a></h4> </li> <li> <a href="#" title="www.CsrCode.cn"><img src="../../js_img/8-24/images/07.jpg" width="133" height="100"></a> <h4><a href="#">小雏菊</a></h4> </li> <li> <a href="#" title="www.CsrCode.cn"><img src="../../js_img/8-24/images/04.jpg" width="133" height="100"></a> <h4><a href="#">玫瑰情思</a></h4> </li> <li> <a href="#" title="www.CsrCode.cn"><img src="../../js_img/8-24/images/02.jpg" width="133" height="100"></a> <h4><a href="#">往事如茶</a></h4> </li> <li> <a href="#" title="www.CsrCode.cn"><img src="../../js_img/8-24/images/05.jpg" width="133" height="100"></a> <h4><a href="#">玫瑰情思</a></h4> </li> <li> <a href="#" title="www.CsrCode.cn"><img src="../../js_img/8-24/images/03.jpg" width="133" height="100"></a> <h4><a href="#">往事如茶</a></h4> </li> <li> <a href="#" title="www.CsrCode.cn"><img src="../../js_img/8-24/images/07.jpg" width="133" height="100"></a> <h4><a href="#">玫瑰情思</a></h4> </li> <li> <a href="#" title="www.CsrCode.cn"><img src="../../js_img/8-24/images/01.jpg" width="133" height="100"></a> <h4><a href="#">油菜花开</a></h4> </li> <li> <a href="#" title="www.CsrCode.cn"><img src="../../js_img/8-24/images/06.jpg" width="133" height="100"></a> <h4><a href="#">玫瑰情思</a></h4> </li> <li> <a href="#" title="www.CsrCode.cn"><img src="../../js_img/8-24/images/05.jpg" width="133" height="100"></a> <h4><a href="#">往事如茶</a></h4> </li> <li> <a href="#" title="www.CsrCode.cn"><img src="../../js_img/8-24/images/02.jpg" width="133" height="100"></a> <h4><a href="#">野花绽放</a></h4> </li> <li> <a href="#" title="www.CsrCode.cn"><img src="../../js_img/8-24/images/04.jpg" width="133" height="100"></a> <h4><a href="#">玫瑰情思</a></h4> </li> <li> <a href="#" title="www.CsrCode.cn"><img src="../../js_img/8-24/images/03.jpg" width="133" height="100"></a> <h4><a href="#">红叶传情</a></h4> </li> </ul> <div class="scrollnav"> <img src="../../js_img/9-04/images/icon_scrollnav_hover.gif" class="firstSlide"> <img src="../../js_img/9-04/images/icon_scrollnav.gif" class="secondSlide"> <img src="../../js_img/9-04/images/icon_scrollnav.gif" class="thirdSlide"> </div> </div> </div> </body> </html> <p align="center">本特效由 <a href="http://www.update8.com">中国技术教程网</a> 收集于互联网，只为兴趣与学习交流，不作商业用途。</p>

使一行文字变形产生弯曲弧度特效的jQu	10款有关交互和通讯的jQuery插件
使用jquery控制select左右内容转换	分享6款键盘导航的jQuery插件
jQuery LigerUI V1.1.5 (包括API和全部源码) 发布	jQuery制作图片旋转效果
jQuery 图片横向滚动插件	jQuery 阴影插件代码分享
jQuery在IE下使用未闭合的xml代码创建元素	jquery ajax 同步异步的执行 return值不能取得