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"> <!--把下面代码加到<head>与</head>之间--> <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> <!--把下面代码加到<body>与</body>之间--> <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>