前段时间学习jQuery的时候，在网上找了个SuperSlide插件，做轮播图demo，感觉对于新人而言，还是挺容易上手的，代码量也少。

直接贴代码吧。

1、HTML

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>

		<title></title>

		<link rel="stylesheet" href="css/lunbo.css" />

	</head>

	<body>

		<!--tu start-->

		<div id="tu">

			<div class="tu1">

				<a class="prev"><</a>

				<a class="next">></a>

				<ul>

        	<li><a href="###"><img src="data:images/main01.jpg"></a></li>

            <li><a href="###"><img src="data:images/main02.jpg"></a></li>

        </ul>

			</div>

			<div class="hd">

     	<ul>

        	<li></li>

            <li></li>

        </ul>

     </div>

		</div>

		<script type="text/javascript">

		jQuery("#tu").slide({mainCell:".tu1 ul",effect:"leftLoop",autoPlay:true});

		</script>

		<!--tu end-->

	</body>

</html>

　　

2、CSS

*{

	margin:0;

	padding:0;

}

ul li{

	list-style: none;

}

/*tu start*/

#tu{

	width:50%;

	height:350px;

	overflow: hidden;

	position: relative;

}

#tu .tu1 ul li img{

	height:380px;

	width:100%;

}

#tu .hd{

	width:100px;

	position:absolute;

	right:37%;

	bottom:20px;

}

#tu .hd ul li{

	border-radius:50%;

	float:left;

	width:14px;

	height:14px;

	line-height:18px;

	margin-right:5px;

	background:#FFFFFF;

	text-align:center;

	cursor:pointer;

}

#tu .hd ul li:hover{

	background:#DF483F;

}

#tu .hd ul li.on{

	background:#DF483F;

}

#tu .prev,#tu .next{

	display: block;

	width:50px;

	height:50px;

	line-height:50px;

	background:#EEE;

	text-align: center;

	font-family: "宋体";

	font-size:50px;

	color:#AAA;

}

#tu .prev:hover,#tu .next:hover{

	opacity:0.5;

}

#tu .prev{

	position:absolute;

	left:50px;

	top:130px;

	z-index:100;

	cursor:pointer; /*鼠标指针变成 手 的形状*/

}

#tu .next{

	position:absolute;

	right:50px;

	top:130px;

	z-index:100;

	cursor:pointer;

}

/*tu end*/

3、注意：因为SuperSlide是基于jQuery的插件,所以前提必须先引用jQuery,再引用SuperSlide 。 SuperSlide的网址是：http://www.superslide2.com/ 可以自行前去下载该插件进行使用。

jQuery插件实现左右无缝轮播的更多相关文章

  1. jQuery插件slides实现无缝轮播图特效

    初始化插件: slides是一款基于jQuery无缝轮播图插件,支持图内元素动画,可以自定义动画类型 1 2 3 4 5 6 7 8 9 10 $(".slideInner").s ...

  2. js、jQuery实现文字上下无缝轮播、滚动效果

    因项目需要实现消息通知上下无缝轮播的效果,所以写了一下,在这个分享出来,希望再次遇到此需求的道友,可以直接拷贝来用,节约一点不必要的时间. 原生JS版本 <!DOCTYPE html> & ...

  3. JQuery制作基础的无缝轮播与左右点击效果

    在网页中我们想要的无缝轮播左右循环有好多好多中,这是我第一个轮播效果,也是最基础的,和大家分享一下,对于初学者希望你们能有所借鉴,对于大神我想让你们尽情的虐我给我宝贵的意见. 这个是我要的效果 进入正 ...

  4. BootStrap_04之jQuery插件（导航、轮播）、以及Less

    1.列偏移与列排序: ①列偏移:控制列出现的位置,某列偏移后,后序列会随之偏移--只能右偏移: col-lg/md/sm/xs-offset-*; ②列排序:控制某一列的位置,该列可以左(pull)右 ...

  5. 【实践】纯jquery实现图片滑动无缝轮播，带左右按钮及控制按钮

    在此随笔之前,博主已经做过一次图片滑动轮播,如过你也有看过就会知道里面的效果在自动轮播的时候有一个不太美观的效果,就是当最后一张图片滑动切换到第一张图片的时候会看到一个快速向左滑动的效果,这是很不美观 ...

  6. jQuery插件之路(二)——轮播

    还记得以前刚接触前端的时候,浏览各大网站,很多都少不了的有个轮播的效果,那个时候自己是一个彻彻底底的小白,想着这些图片滚动起来还真是有意思,是什么让这些图片在一个方向上连续的滚动呢.后来慢慢的接触多了 ...

  7. jQuery插件slider实现图片轮播

    1:引入相应的js文件  jquery.SuperSilder.js 2:HTML: 结构 注:此地加载图片的代码也可以从后台库中读取图片的集合列表,然后通过循环的方式显示出来 3:CSS 样式定义左 ...

  8. jquery做一个小的轮播插件---有BUG，后续修改

    //首页无缝轮播 ; (function($, window, document, undefined) { $.fn.slider = function(options) { var default ...

  9. JQ无缝轮播图-插件封装

    类似京东的这种无缝轮播效果: 实例代码下载 HTML代码: <body> <!-- /*觅me 探索生活*/ --> <div class="test" ...

随机推荐

  1. Amazon才推众包物流，“京东众包”已红绿上阵，“达达”还手握10万配送大军

    据外媒消息,Amazon正在开发一款App,想让大家都来为他家送包裹. Amazon的设想是,在市区招募实体零售商,租用空间或者按包裹向其支付费用.这项服务在内部代号为“On My Way”,目前还在 ...

  2. python绝技 — 扫描蓝牙RFCOMM信道

    RFCOMM协议 RFCOMM通过蓝牙L2CAP协议模拟了RS232串口.这会与另一台设备建立一个蓝牙连接,模拟一条普通的串行线缆,使用户能够用其他设备控制这一台设备,通过蓝牙打电话,发短信,读取手机 ...

  3. google的作恶与不作恶

    Google刚刚出现时,那时互联网还似桃花源,路不拾遗夜不闭户,最多升级升级病毒库.Google的发展,从商业模式上带来了广告对互联网无孔不入的渗透,如今Google.百度.阿里等各大巨头都有自己的广 ...

  4. nyoj 79 拦截导弹 (动态规划)

    题目链接:http://acm.nyist.net/JudgeOnline/problem.php?pid=79 题意即求最长单调递减子序列 #include<iostream> #inc ...

  5. nyoj 592 spiral grid（广搜）

    题目链接:http://acm.nyist.net/JudgeOnline/problem.php?pid=592 解决以下问题后就方便用广搜解: 1.将数字坐标化,10000坐标为(0,0),这样就 ...

  6. vue 2.0 无法编译ES6语法

    # vue2.0 webpack 无法编译 ES6 语法 之前在使用 vue 1.x 时用 vue-loader@8.0.0 版本可以正常打包vue的代码,包括ES6语法也能正常转为ES5语法,但是当 ...

  7. 简易富文本编辑器bootstrap-wysiwyg源码注释

    好久没写随笔了,因为最近比较忙,小公司基本都是一个前端干所有属于和部分不属于前端的事情,所以就没空弄了,即使想分享,也因为没有时间和精力就搁置了. 这周周六日休息,正好时间比较充裕(ps:目前处在单休 ...

  8. css2和CSS3的background属性简写

    1.css2:background:background-color || url("") || no-repeat || scroll || 0 0;  css3:  backg ...

  9. 接口速度慢问题查找（TTFB时间长）

    前些天自己写了一个网站,但是发现接口的速度按超级慢,业务逻辑并不复杂,原因究竟在哪呢? 首先说一下,我的数据库和项目均在同一台服务器上,按道理来说,接口访问本地的数据库应该会很快才对. 后来我发现线上 ...

  10. edgerouter bonding

    configure set interfaces bonding bond0 mode 802.3ad set interfaces ethernet eth1 bond-group bond0 se ...