jquery响应式手机网页图片自动切换特效代码下载


jquery响应式手机网页图片自动切换特效代码下载
jquery响应式手机网页图片自动切换特效代码下载以及响应式手机网页、图片自动切换等js/jquery网页特效代码下载。

1. 引入CSS

<link href="css/jquery.bxslider.css" rel="stylesheet" type="text/css">

2. 引入JS

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.bxslider.js"></script>

3. HTML代码

	<!-- ---------------------------------slider1--------------------------------------------- -->
    <p>slider1(maxSlides)</p>
    <div class="slider1">
      <div class="slide"><img src="images/FooBar.png"></div>
      <div class="slide"><img src="images/FooBar.png"></div>
      <div class="slide"><img src="images/FooBar.png"></div>
      <div class="slide"><img src="images/FooBar.png"></div>
      <div class="slide"><img src="images/FooBar.png"></div>
      <div class="slide"><img src="images/FooBar.png"></div>
      <div class="slide"><img src="images/FooBar.png"></div>
      <div class="slide"><img src="images/FooBar.png"></div>
      <div class="slide"><img src="images/FooBar.png"></div>
    </div>
    <script type="text/javascript">
        $(document).ready(function(){
          $('.slider1').bxSlider({
            slideWidth: 200,
            minSlides: 2,
            maxSlides: 3,
            slideMargin: 10
          });
        });
    </script>
 	<!-- ---------------------------------slider2--------------------------------------------- -->
    <p>slider2(slideWidth auto)</p>
    <div class="slider2">
      <div class="slide"><img src="images/FooBar.png"></div>
      <div class="slide"><img src="images/FooBar.png"></div>
      <div class="slide"><img src="images/FooBar.png"></div>
      <div class="slide"><img src="images/FooBar.png"></div>
      <div class="slide"><img src="images/FooBar.png"></div>
      <div class="slide"><img src="images/FooBar.png"></div>
      <div class="slide"><img src="images/FooBar.png"></div>
      <div class="slide"><img src="images/FooBar.png"></div>
      <div class="slide"><img src="images/FooBar.png"></div>
    </div>
    <script type="text/javascript">
        $(document).ready(function(){
          $('.slider2').bxSlider({
            slideWidth: 300, 
			auto: true,
  			autoControls: true,
            minSlides: 2,
            maxSlides: 2,
            slideMargin: 10
          });
        });
    </script>
 	<!-- ---------------------------------slider3--------------------------------------------- -->
    <p>slider3(moveSlides)</p>
    <div class="slider3">
      <div class="slide"><img src="images/FooBar.png"></div>
      <div class="slide"><img src="images/FooBar.png"></div>
      <div class="slide"><img src="images/FooBar.png"></div>
      <div class="slide"><img src="images/FooBar.png"></div>
      <div class="slide"><img src="images/FooBar.png"></div>
      <div class="slide"><img src="images/FooBar.png"></div>
      <div class="slide"><img src="images/FooBar.png"></div>
      <div class="slide"><img src="images/FooBar.png"></div>
      <div class="slide"><img src="images/FooBar.png"></div>
    </div>
    <script type="text/javascript">
        $(document).ready(function(){
          $('.slider3').bxSlider({
            slideWidth: 200,
            minSlides: 2,
            maxSlides: 3,
			moveSlides: 1,
            slideMargin: 10
          });
        });
    </script>
 	<!-- ---------------------------------slider4--------------------------------------------- -->
    <p>slider4(startSlide)</p>
    <div class="slider4">
      <div class="slide"><img src="images/FooBar.png"></div>
      <div class="slide"><img src="images/FooBar.png"></div>
      <div class="slide"><img src="images/FooBar.png"></div>
      <div class="slide"><img src="images/FooBar.png"></div>
      <div class="slide"><img src="images/FooBar.png"></div>
      <div class="slide"><img src="images/FooBar.png"></div>
      <div class="slide"><img src="images/FooBar.png"></div>
      <div class="slide"><img src="images/FooBar.png"></div>
      <div class="slide"><img src="images/FooBar.png"></div>
    </div>
    <script type="text/javascript">
        $(document).ready(function(){
          $('.slider4').bxSlider({
            slideWidth: 200,
            minSlides: 2,
            maxSlides: 3,
			moveSlides: 1,
			startSlide: 1,
            slideMargin: 10
          });
        });
    </script>
 	<!-- ---------------------------------slider5--------------------------------------------- -->
    <p>slider5(Vertical)</p>
    <div class="slider5">
      <div class="slide"><img src="images/FooBar.png"></div>
      <div class="slide"><img src="images/FooBar.png"></div>
      <div class="slide"><img src="images/FooBar.png"></div>
      <div class="slide"><img src="images/FooBar.png"></div>
      <div class="slide"><img src="images/FooBar.png"></div>
      <div class="slide"><img src="images/FooBar.png"></div>
      <div class="slide"><img src="images/FooBar.png"></div>
      <div class="slide"><img src="images/FooBar.png"></div>
      <div class="slide"><img src="images/FooBar.png"></div>
    </div>
    <script type="text/javascript">
        $(document).ready(function(){
          $('.slider5').bxSlider({
			mode: 'vertical',
            slideWidth: 200,
            minSlides: 2,
            slideMargin: 10
          });
        });
    </script>
 	<!-- ---------------------------------slider6--------------------------------------------- -->
    <p>slider6(Image)</p>
    <div class="slider6">
      <div class="slide"><img src="images/FooBar4.png"></div>
      <div class="slide"><img src="images/FooBar4.png"></div>
      <div class="slide"><img src="images/FooBar4.png"></div>
      <div class="slide"><img src="images/FooBar4.png"></div>
    </div>
    <script type="text/javascript">
        $(document).ready(function(){
          $('.slider6').bxSlider({
			mode: 'fade',
            slideWidth: 600, 
            slideMargin: 10
          });
        });
    </script>
 	<!-- ---------------------------------slider7--------------------------------------------- -->
    <p>slider7(infiniteLoop hideControlOnEnd)</p>
    <div class="slider7">
      <div class="slide"><img src="images/FooBar4.png"></div>
      <div class="slide"><img src="images/FooBar4.png"></div>
      <div class="slide"><img src="images/FooBar4.png"></div>
      <div class="slide"><img src="images/FooBar4.png"></div> 
    </div>
    <script type="text/javascript">
        $(document).ready(function(){
          $('.slider7').bxSlider({ 
            slideWidth: 600, 
			infiniteLoop: false,
			hideControlOnEnd: true,
            slideMargin: 10,
			auto: true
          });
        });
    </script>
 	<!-- ---------------------------------slider8--------------------------------------------- -->
    <p>slider8(adaptiveHeight)</p>
    <div class="slider8">
      <div class="slide"><img src="images/FooBar4.png"></div>
      <div class="slide"><img src="images/FooBar4.png"></div>
      <div class="slide"><img src="images/FooBar4.png"></div>
      <div class="slide"><img src="images/FooBar4.png"></div>
    </div>
    <script type="text/javascript">
        $(document).ready(function(){
          $('.slider8').bxSlider({ 
            slideWidth: 600, 
			adaptiveHeight: true,
			startSlides: 0, 
            slideMargin: 10
          });
        });
    </script>
 	<!-- ---------------------------------slider9--------------------------------------------- -->
    <p>slider9(ticker)</p>
    <div class="slider9"> 
      <div class="slide"><img src="images/FooBar.png"></div>
      <div class="slide"><img src="images/FooBar.png"></div>
      <div class="slide"><img src="images/FooBar.png"></div>
      <div class="slide"><img src="images/FooBar.png"></div>
	  <div class="slide"><img src="images/FooBar.png"></div>
      <div class="slide"><img src="images/FooBar.png"></div>
      <div class="slide"><img src="images/FooBar.png"></div>
      <div class="slide"><img src="images/FooBar.png"></div>
    </div>
    <script type="text/javascript">
        $(document).ready(function(){
          $('.slider9').bxSlider({ 
            slideWidth: 200,
			minSlides: 3,
			maxSlides: 3,
			ticker: true,
			speed: 12000,
			startSlides: 0, 
            slideMargin: 10
          });
        });
    </script>    

相关推荐

发表评论

相关文章