<div> <div class="connected-carousels"> <div class="stage"> <div class="carousel carousel-stage"> <ul> <li><img src="themes/68ecshopcom_360buy/designer/img/img1.jpg" width="800" height="400" alt=""></li> <li><img src="themes/68ecshopcom_360buy/designer/img/img2.jpg" width="800" height="400" alt=""></li> <li><img src="themes/68ecshopcom_360buy/designer/img/img3.jpg" width="800" height="400" alt=""></li> <li><img src="themes/68ecshopcom_360buy/designer/img/img4.jpg" width="800" height="400" alt=""></li> </ul> </div> <a href="javascript:void(0)" class="prev prev-stage"><span>‹</span></a> <a href="javascript:void(0)" class="next next-stage"><span>›</span></a> </div> <div class="pic-nav" style="width:100%;margin: 5px auto 0 auto; "> <div class="title">效果图:</div> <div class="canshu xuan"><a href="javascript:void(0)">全部(4) </a></div> <div class="canshu"><a href="javascript:void(0)" id="">客厅(2) </a></div> <div class="canshu"><a href="javascript:void(0)" id="">卧室(1) </a></div> <div class="canshu"><a href="javascript:void(0)" id="">平面图(1) </a></div> <div class="canshu"><a href="javascript:void(0)" id="">俯视图(1) </a></div> </div> <div class="navigation"> <a href="javascript:void(0)" class="prev prev-navigation">‹</a> <a href="javascript:void(0)" class="next next-navigation">›</a> <div class="carousel carousel-navigation"> <ul> <li><img src="themes/68ecshopcom_360buy/designer/img/img1_thumb.jpg" width="50" height="50" alt="客厅"></li> <li><img src="themes/68ecshopcom_360buy/designer/img/img2_thumb.jpg" width="50" height="50" alt="卧室"></li> <li><img src="themes/68ecshopcom_360buy/designer/img/img3_thumb.jpg" width="50" height="50" alt="平面图"></li> <li><img src="themes/68ecshopcom_360buy/designer/img/img4_thumb.jpg" width="50" height="50" alt="俯视图"></li> </ul> </div> </div> </div> </div>
你这个可以理解为,有多个轮播图。也可以理解为,动态替换轮播图图片,动态计算。一般轮播图都已经实现了这样的效果。只不过需要你自己写事件替换其中的图片
一周热门 更多>