TaoBye

jquery的bxslider轮播图插件事列源码下载

  下面是jquery的bxslider插件例子,复制代码到编译器就可以看到效果,如果图片没有显示出来可以换成自己的图片,如js加载慢,可下载到本地后运行。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>bxslider轮播图_淘拜网</title>
<style>
.banner:hover .bx-prev { display:block;}
.banner:hover .bx-next{ display:block;}
.bx-pager{ position:absolute; left:0; margin-top:-20px; text-align:center; right:0;}
.bx-pager-item{ display:inline-block;}
.bx-pager-item a{ display:inline-block; height:15px; width:15px; background-color:rgba(20,196,199,1.00); margin-right:20px; text-indent:-9999em; border-radius:15px;}
.bx-pager-item a.active,.bx-pager-item a:hover{ background-color:rgba(252,47,0,1.00);}
.bx-caption{ position:absolute; left:0; right:0; bottom:45px; height:35px; line-height:35px; background-color:rgba(0,0,0,.3); color:#fff; font-size:16px; padding-left:2em;}
</style>
<script type="text/javascript" src="http://www.taobye.com/pc/download/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="http://www.taobye.com/pc/download/jquery.bxslider.js"></script>
</head>
<body>
<div class="banner">
          <ul id="bannerul">
			<li><a href="/" ><img id="bannerimg2" src="http://www.taobye.com/attachFiles/image/20160329/20160329144032_620.jpg" height="274" width="100%" alt="淘拜网"></a></li> 
            <li><a href="/" ><img id="bannerimg2" src="http://www.taobye.com/attachFiles/image/20160329/20160329144032_620.jpg" height="274" width="100%" alt="淘拜网"></a></li> 
            <li><a href="/" ><img id="bannerimg2" src="http://www.taobye.com/attachFiles/image/20160329/20160329144032_620.jpg" height="274" width="100%" alt="淘拜网"></a></li>          
		  </ul>
      </div>
</body>
<script>
$(function(){
	 $(’#bannerul’).bxSlider({
		auto:true,//自动播放
		pause: 2000,//停留的时间
		speed: 500,//动画的时间
		mode: ’horizontal’,//动画的方向:vertical(垂直滚动) horizontal（水平滚动）
		captions: false,//标题
		autoHover:true,//鼠标放上面停止
	 });
});
</script>
</html>
阅读：3660   发布：2017-09-04 17:15:45
正在加载评论...