使用方法：
1、head引入css文件
<link rel="stylesheet" type="text/css" href="style.css" />
2、head引入js文件
<script src="statics/js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="statics/js/jquery.SuperSlide.2.1.3.js" type="text/javascript" charset="utf-8"></script>3、body引入部分
<div class="pro-new"> <div class="container"> <div class="title">新品展示</div> <div class="sub-title"> <span>——</span> <span class="text">New Products</span> <span>——</span> </div> <div class="pro-new-show"> <!--新品列表--> <div class="pro-list"> <ul> <li> <a href="#"> <div class="img"> <img src="statics/images/pic1.png" /> </div> <div class="desc"> <p class="p-title">产品名称</p> <p class="p-desc">这是产品介绍这是产品介绍这是产品介绍，这是产品介绍这是产品介绍这是产品介绍，这是产品介绍...</p> </div> </a> </li> <li> <a href="#"> <div class="img"> <img src="statics/images/pic2.png" /> </div> <div class="desc"> <p class="p-title">产品名称</p> <p class="p-desc">这是产品介绍这是产品介绍这是产品介绍，这是产品介绍这是产品介绍这是产品介绍，这是产品介绍...</p> </div> </a> </li> <li> <a href="#"> <div class="img"> <img src="statics/images/pic3.png" /> </div> <div class="desc"> <p class="p-title">产品名称</p> <p class="p-desc">这是产品介绍这是产品介绍这是产品介绍，这是产品介绍这是产品介绍这是产品介绍，这是产品介绍...</p> </div> </a> </li> <li> <a href="#"> <div class="img"> <img src="statics/images/pic1.png" /> </div> <div class="desc"> <p class="p-title">产品名称</p> <p class="p-desc">这是产品介绍这是产品介绍这是产品介绍，这是产品介绍这是产品介绍这是产品介绍，这是产品介绍...</p> </div> </a> </li> <li> <a href="#"> <div class="img"> <img src="statics/images/pic2.png" /> </div> <div class="desc"> <p class="p-title">产品名称</p> <p class="p-desc">这是产品介绍这是产品介绍这是产品介绍，这是产品介绍这是产品介绍这是产品介绍，这是产品介绍...</p> </div> </a> </li> <li> <a href="#"> <div class="img"> <img src="statics/images/pic3.png" /> </div> <div class="desc"> <p class="p-title">产品名称</p> <p class="p-desc">这是产品介绍这是产品介绍这是产品介绍，这是产品介绍这是产品介绍这是产品介绍，这是产品介绍...</p> </div> </a> </li> </ul> </div> <!--轮播左右箭头--> <div class="arrow"> <a class="prev" href="javascript:void(0)"></a> <a class="next" href="javascript:void(0)"></a> </div> <!--轮播分页--> <div class="pagination"> <ul></ul> </div> </div> </div></div><script type="text/javascript"> //轮播 $(".pro-new-show").slide({ mainCell: ".pro-list ul", titCell:".pagination ul", autoPage: true, effect: "left", autoPlay: false, vis: 3, trigger: "click" });</script>
1）、如果需要图片自动滚动播放，把上面js里autoPlay: false,改成autoPlay: true即可；
2）、如果特效出不来，注意看css、js文件的引用路径； 3）、如果代码都原封不动照搬了，效果还是出来，就检查JS文件是否跟你网站原有的js文件冲突，需细心排查！
发表评论 取消回复