特效描述:基于jQuery实现 多屏幻灯片 滚动切换特效。基于jQuery实现多屏幻灯片滚动切换特效
代码结构
1. 引入CSS
<link rel="stylesheet" href="css/owl.carousel.css" type="text/css" />
2. 引入JS
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="js/owl.carousel.js"></script>
3. HTML代码
<!-- Demo --> <div id="owl-demo" class="owl-carousel"> <div class="itme"> <ul> <li class="li1"> <a href="http://www.51qianduan.com/"><img src="img/a1.jpg" alt=""></a> <div class="txt"> <h3><a href="http://www.51qianduan.com/">阿根廷备战 队友倒地引梅西大笑</a></h3> <p>北京时间6月13日,阿根廷队训练备战,众将心情轻松,训练中,队友摔倒引梅西大笑。</p> </div> </li> <li class="li2"> <a href="http://www.51qianduan.com/"><img src="img/b1.jpg" alt=""></a> <div class="txt"> <h3><a href="http://www.51qianduan.com/">葡萄牙备战 C罗情绪激动对队友指手画脚</a></h3> </div> </li> <li class="li3"> <a href="http://www.51qianduan.com/"><img src="img/c1.jpg" alt=""></a> <div class="txt"> <h3><a href="http://www.51qianduan.com/">鲁尼投入训练不敢怠慢</a></h3> </div> </li> <li class="li3"> <a href="http://www.51qianduan.com/"><img src="img/c2.jpg" alt=""></a> <div class="txt"> <h3><a href="http://www.51qianduan.com/">巴神备战炫酷墨镜拉风</a></h3> </div> </li> </ul> </div> <div class="itme"> <ul> <li class="li1"> <a href="http://www.51qianduan.com/"><img src="img/a2.jpg" alt=""></a> <div class="txt"> <h3><a href="http://www.51qianduan.com/">荷兰5-1血洗西班牙 罗本范佩西梅开二度</a></h3> <p>6月14日凌晨,西班牙队迎战荷兰队,荷兰5-1逆转获胜。范佩西罗本梅开二度,德弗里头球破门。</p> </div> </li> <li class="li2"> <a href="http://www.51qianduan.com/"><img src="img/b2.jpg" alt=""></a> <div class="txt"> <h3><a href="http://www.51qianduan.com/">西荷大战 橙衣球迷"巨胸"造型抢镜</a></h3> </div> </li> <li class="li3"> <a href="http://www.51qianduan.com/"><img src="img/c3.jpg" alt=""></a> <div class="txt"> <h3><a href="http://www.51qianduan.com/">哈维重演卡纳瓦罗悲剧</a></h3> </div> </li> <li class="li3"> <a href="http://www.51qianduan.com/"><img src="img/c4.jpg" alt=""></a> <div class="txt"> <h3><a href="http://www.51qianduan.com/">科比观西荷战疑似爆粗</a></h3> </div> </li> </ul> </div> <div class="itme"> <ul> <li class="li1"> <a href="http://www.51qianduan.com/"><img src="img/a3.jpg" alt=""></a> <div class="txt"> <h3><a href="http://www.51qianduan.com/">两度献唱世界杯的洛佩兹 身材惊呆小贝</a></h3> <p>1994年曾为美国世界杯献声,2014年以出位着装现场演唱巴西世界杯主题曲。</p> </div> </li> <li class="li2"> <a href="http://www.51qianduan.com/"><img src="img/b3.jpg" alt=""></a> <div class="txt"> <h3><a href="http://www.51qianduan.com/">世界杯女主播太太团 斯内德妻子小三逆袭</a></h3> </div> </li> <li class="li3"> <a href="http://www.51qianduan.com/"><img src="img/c5.jpg" alt=""></a> <div class="txt"> <h3><a href="http://www.51qianduan.com/">英格兰太太团声名狼藉</a></h3> </div> </li> <li class="li3"> <a href="http://www.51qianduan.com/"><img src="img/c6.jpg" alt=""></a> <div class="txt"> <h3><a href="http://www.51qianduan.com/">本田德罗巴领衔型男PK</a></h3> </div> </li> </ul> </div> <div class="itme"> <ul> <li class="li1"> <a href="http://www.51qianduan.com/"><img src="img/a4.jpg" alt=""></a> <div class="txt"> <h3><a href="http://www.51qianduan.com/">日本混血名模私房写真助威蓝武士</a></h3> <p>日本-加拿大混血名模maggy为《GQ》杂志拍摄私房写真,爱好体育的她曾采访过香川真司。</p> </div> </li> <li class="li2"> <a href="http://www.51qianduan.com/"><img src="img/b4.jpg" alt=""></a> <div class="txt"> <h3><a href="http://www.51qianduan.com/">比利时小姐举行内衣足球赛 应景世界杯</a></h3> </div> </li> <li class="li3"> <a href="http://www.51qianduan.com/"><img src="img/c7.jpg" alt=""></a> <div class="txt"> <h3><a href="http://www.51qianduan.com/">GQ里约最性感海滩特辑</a></h3> </div> </li> <li class="li3"> <a href="http://www.51qianduan.com/"><img src="img/c8.jpg" alt=""></a> <div class="txt"> <h3><a href="http://www.51qianduan.com/">央五女主播扮足球宝贝</a></h3> </div> </li> </ul> </div> <div class="itme"> <ul> <li class="li1"> <a href="http://www.51qianduan.com/"><img src="img/a5.jpg" alt=""></a> <div class="txt"> <h3><a href="http://www.51qianduan.com/">空姐变身足球宝贝 万米高空造势世界杯</a></h3> <p>中国云南某航空公司航班上,空姐穿着巴西队服为旅客服务。</p> </div> </li> <li class="li2"> <a href="http://www.51qianduan.com/"><img src="img/b5.jpg" alt=""></a> <div class="txt"> <h3><a href="http://www.51qianduan.com/">孔卡美女翻译与乳神合影 气场丝毫不逊</a></h3> </div> </li> <li class="li3"> <a href="http://www.51qianduan.com/"><img src="img/c9.jpg" alt=""></a> <div class="txt"> <h3><a href="http://www.51qianduan.com/">泳装美女大玩水上足球</a></h3> </div> </li> <li class="li3"> <a href="http://www.51qianduan.com/"><img src="img/c10.jpg" alt=""></a> <div class="txt"> <h3><a href="http://www.51qianduan.com/">TVB美女主播看台抢镜</a></h3> </div> </li> </ul> </div> </div> <!-- Demo end -->