本文實例講述了jQuery橫向擦除焦點圖特效。分享給大家供大家參考。具體如下:
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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>住趣家居網滿屏jQuery焦點圖</title><link href="css/home.css" rel="stylesheet" /><script src="js/jquery.js" type="text/javascript"></script><script src="js/home.js" type="text/javascript"></script></head><body><div class="zq_homeView" id="jobs_home_homeView"> <div class="zq_pictureBox" node-type="pictureBox"> <div class="zq_pictures" node-type="pictures"> <a node-type="picItem" href="http://www.49028c.com/jiaoben/" target="_blank"><img alt="廚房收納整理工具" src="images/5.jpg" /></a> <a node-type="picItem" href="http://www.49028c.com/jiaoben/" target="_blank"><img alt="百搭落地燈" src="images/1.jpg" /></a> <a node-type="picItem" href="http://www.49028c.com/jiaoben/" target="_blank"><img alt="百搭落地燈" src="images/2.jpg" /></a> <a node-type="picItem" href="http://www.49028c.com/jiaoben/" target="_blank"><img alt="清新格子床品" src="images/3.jpg" /></a> <a node-type="picItem" href="http://www.49028c.com/jiaoben/" target="_blank"><img alt="特色墻紙壁紙" src="images/4.jpg" /></a> <a node-type="picItem" href="http://www.49028c.com/jiaoben/" target="_blank"><img alt="開放式簡約現代一居室裝修" src="images/5.jpg" /></a> <a node-type="picItem" href="http://www.49028c.com/jiaoben/" target="_blank"><img alt="廚房收納整理工具" src="images/1.jpg" /></a> </div> <div class='zq_mask zq_maskLeft' node-type="maskLeft"></div> <div class='zq_mask zq_maskRight' node-type="maskRight"></div> </div> <div class="zq_imgBox"> <div class="zq_imgs clearfix"> <a node-type="smallPic" target="_blank" data-index="1" href="http://www.49028c.com/jiaoben/" class="currentImg"><img alt="百搭落地燈" src="images/1.jpg" /></a> <a node-type="smallPic" target="_blank" data-index="2" href="http://www.49028c.com/jiaoben/"><img alt="清新格子床品" src="images/2.jpg" /></a> <a node-type="smallPic" target="_blank" data-index="3" href="http://www.49028c.com/jiaoben/"><img alt="特色墻紙壁紙" src="images/3.jpg" /></a> <a node-type="smallPic" target="_blank" data-index="4" href="http://www.49028c.com/jiaoben/"><img alt="開放式簡約現代一居室裝修" src="images/4.jpg" /></a> <a node-type="smallPic" target="_blank" data-index="5" href="http://www.49028c.com/jiaoben/"><img alt="廚房收納整理工具" src="images/5.jpg" /></a> </div> <div class="zq_slides"> <a href="javascript:;" class="zq_slideLeft" action-type="prev"><em> </em></a> <a href="javascript:;" class="zq_slideRight" action-type="next"><em> </em></a> </div> </div></div><div style="text-align:center;clear:both"></div></body></html>
以上就是為大家分享的jQuery滿屏焦點圖左右滾動特效代碼,希望大家可以喜歡,并應用到實踐中。
新聞熱點
疑難解答