图片轮播控件 jQuery bxslider

最新推荐文章于 2020-06-21 12:24:10 发布

efficiency_shang

最新推荐文章于 2020-06-21 12:24:10 发布

阅读量2.3k

点赞数 2

分类专栏： java

本文链接：https://blog.csdn.net/u013076997/article/details/52850269

版权

最近，看到有好多人问图片轮播怎么写，这个东西完全不必自己写，虽然当初我刚开始学习html的时候出于兴趣写过一个，但是现在想想并没有什么卵用；在此，总结一个比较好用的图片轮播插件，jQuery的bxslider，希望对大家有用。

1、准备素材：

①首先你的目录结构应该是这样的（如果想修改目录结构，记得把html中引用js、css和图片部分修改一下，另外还要修改一下css中image的路径）：

②到这个地址下载，jQuery.js，bxslider的js和css

http://download.csdn.net/detail/u013076997/9657128

2、index.html代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>图片轮播</title>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.bxslider.min.js"></script>
<link href="css/jquery.bxslider.css" type="text/css" rel="stylesheet">
<script type="text/javascript">
	$(document).ready(function(){
  		$('.bxslider').bxSlider({
  			auto: true,
  			autoControls: true
		});
	});
</script>
</head>
<body>
	<div style="margin:30px auto 40px;text-align:center;width:300px;">
		<ul class="bxslider">
	  		<li><img src="images/1.jpg" alt="" width="300px" height="200px"></li>
	  		<li><img src="images/2.jpg" alt="" width="300px" height="200px

最低0.47元/天解锁文章

efficiency_shang

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
图片轮播控件 jQuery bxslider

最近，看到有好多人问图片轮播怎么写，这个东西完全不必自己写，虽然当初我刚开始学习html的时候出于兴趣写过一个，但是现在想想并没有什么卵用；在此，总结一个比较好用的图片轮播插件，jQuery的bxslider，希望对大家有用。1、准备素材： ①首先你的目录结构应该是这样的（如果想修改目录结构，记得把html中引用js、css和图片部分修改一下，另外还要修改一下css中imag
复制链接

扫一扫

专栏目录