jquery.slides.js图片滑动插件


jquery.slides.js图片滑动插件
jquery.slides.js图片滑动插件以及图片滑动等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" href="css/style.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/slides.jquery.js"></script>

3. HTML代码

<div id="slides" class="visual">
  <ul class="slides_container">
    <li> <img src="images/tpack.jpg"  alt="" class="imgVis" width="1880"/> <a href="#" ><img src="images/btn_tpack.gif"  alt="#"/></a>
      <p class="leftBg"></p>
      <p class="rightBg"></p>
    </li>
    <li> <img src="images/vpack.jpg"  alt="" class="imgVis" width="1880"/> <a href="#" ><img src="images/btn_vpack.gif"  alt="#"/></a>
      <p class="leftBg"></p>
      <p class="rightBg"></p>
    </li>
    <li> <img src="images/visual1.jpg"  alt="" class="imgVis" width="1880"/> <a href="#" ><img src="images/slideMore1.gif"  alt="#"/></a>
      <p class="leftBg"></p>
      <p class="rightBg"></p>
    </li>
    <li> <img src="images/visual2.jpg"  alt="" class="imgVis" width="1880"/> <a href="#" ><img src="images/slideMore2.gif"  alt="#"/></a>
      <p class="leftBg"></p>
      <p class="rightBg"></p>
    </li>
  </ul>
  <div class="slideControl">
    <p class="slide_rBt"><a href="#" class="next"></a></p>
    <ul class="pagination">
      <li> <a href="#" rel="0"> <strong>01</strong> <span>대나무 숯<br/>
        코 & T존 팩</span> </a> </li>
      <li> <a href="#" rel="1"> <strong>02</strong> <span>숨쉬는<br/>
        야채팩</span> </a> </li>
      <li> <a href="#" rel="2"> <strong>03</strong> <span>슈퍼아쿠아맥스<br/>
        수분 크림</span> </a> </li>
      <li> <a href="#" rel="3"> <strong>04</strong> <span>캘리포니아<br/>
        알로에 선블럭</span> </a> </li>
    </ul>
    <p class="slide_lBt"><a href="#" class="prev"></a></p>
  </div>
</div>
<script type="text/javascript">
$(function(){
	$('#slides').slides({
		container: 'slides_container',
		preload: true,
		play: 4000,
		pause: 1500,
		hoverPause: true,
		effect: 'slide',
		slideSpeed: 850
	});
});
</script>

相关推荐

发表评论

相关文章