特效描述:图片滚动 选项卡结合。jquery图片滚动选项卡结合插件
代码结构
1. 引入JS
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
2. HTML代码
<style type="text/css"> *{margin:0;list-style-type:none;} a,img{border:0;} body{font:12px/180% Arial, Helvetica, sans-serif,"宋体";} #wrap_slide{width:251px;height:255px;position:relative;margin:40px auto 0 auto;} .slide_box ul{border-bottom:2px solid #A8CF36;padding:5px 0 15px 2px;height:10px;} .slide_box li{float:left;text-align:center;color:#555555;margin-right:1px;padding:0 1px;} .slide_box li a{text-decoration:none;padding:0 1px;color:#555555;} .slide_box li a.current{background-color:#AACF34;color:#fff;} .slide_box li:hover{background-color:#AACF34;padding:0 1px;color:#ffffff;} #slide{width:194px;height:203px;overflow:hidden;position:absolute;left:25px;top:45px;} #slide p{margin:10px 0 0 0;font-size:12px;line-height:20px;color:#545454;text-align:center;} #slide div{text-decoration:none;display:block;width:194px;height:203px;position:absolute;left:480px;} #previous{width:12px;height:24px;line-height:99em;overflow:hidden;background:url(images/left.gif);position:absolute;left:5px;top:100px;cursor:pointer;} *html #previous{background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/left.gif', sizingMethod='crop');} #next{width:12px;height:24px;line-height:99em;overflow:hidden;background:url(images/right.gif);position:absolute;left:230px;top:100px;cursor:pointer;} *html #next{background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/right.gif', sizingMethod='crop');} </style> <script type="text/javascript"> $(document).ready(function(){ current = 1; button = 1; images = 6; width = 194; $('#p1').animate({"left":"0px"},400,"swing"); $("#next").click(function(){ button = current; current++ if(current==(images + 1)){ current = 1 } animateLeft(current, button) }); $("#previous").click(function(){ button = current; current-- if(current == 0){ current = images } animateRight(current, button) }); $("#abuttons li").mouseover(function(){ button = current; clickButton = $(this).attr('id'); current = parseInt(clickButton.slice(1)); if(current > button){ animateLeft(current, button) } if(current < button){ animateRight(current, button) } }); function animateLeft(current, button){ $('#p' + current).css("left", width + "px"); $('#p' + current).animate({"left": "0px"},400,"swing"); $('#p' + button).animate({"left": -width + "px"},400,"swing"); setbutton() } function animateRight(current, button) { $('#p' + current).css("left", -width + "px"); $('#p' + current).animate({"left": "0px"},400,"swing"); $('#p' + button).animate({"left": width + "px"},400,"swing"); setbutton() } function setbutton(){ $('#a' + button).children("a").removeClass("current"); $('#a' + current).children("a").addClass("current"); } }); </script> <div id="wrap_slide"> <div class="slide_box"> <ul id="abuttons"> <li id="a1"><a class="current">IT家电</a></li> <li id="a2"><a>快消</a></li> <li id="a3"><a>交通</a></li> <li id="a4"><a>服饰</a></li> <li id="a5"><a>日化</a></li> <li id="a6"><a>其他</a></li> </ul> </div> <div id="slide"> <div id="p1"> <a target="_blank" href="http://www.51qianduan.com"><img src="images/1340009975.jpg" /></a> <p><strong>戴尔</strong><br />戴尔存钱罐:平台化社交引力</p> </div> <div id="p2"> <a target="_blank" href="http://www.51qianduan.com"><img src="images/1344919279.png" /></a> <p><strong>美年达</strong><br />美年达开心果味研究院</p> </div> <div id="p3"> <a target="_blank" href="http://www.51qianduan.com"><img src="images/1342421413.jpg" /></a> <p><strong>宝马</strong><br />宝马文化之旅</p> </div> <div id="p4"> <a target="_blank" href="http://www.51qianduan.com"><img src="images/1341819635.jpg" /></a> <p><strong>贵人鸟</strong><br />贵人鸟“RUN中国更快乐”</p> </div> <div id="p5"> <a target="_blank" href="http://www.51qianduan.com"><img src="images/1342151710.jpg" /></a> <p><strong>海飞丝</strong><br />海飞丝:中国达人秀3腾讯合作案例</p> </div> <div id="p6"> <a target="_blank" href="http://www.51qianduan.com"><img src="images/1342421405.jpg" /></a> <p><strong>北大青鸟</strong><br />北大青鸟:人人都是学士后</p> </div> </div> <div id="previous">Previous</div> <div id="next">Next</div> </div>