简单的jquery图片轮播渐变

最新推荐文章于 2024-09-22 11:17:00 发布

weixin_34407348

最新推荐文章于 2024-09-22 11:17:00 发布

阅读量114

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/bianlongting/blog/702511

版权

2019独角兽企业重金招聘Python工程师标准>>>

写的比较简单，样式没有直接封装在脚本里面，那样会显得比较累赘。

简单的界面和样式：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
	<script type="text/javascript" src="fade_slider.js"></script>
	<title>Document</title>
	<style type="text/css">
	 .fade_slider{width: 400px;height: 200px;position: relative;overflow: hidden;}
	 .fade_slider .slider,.fade_slider .slider img{width: 100%;height: 100%;}
	 .fade_slider .bar{position: absolute;height:20px;width: 100%;bottom: 10px;text-align:center;}
	 .fade_slider .bar a{width: 15px;height: 15px;display: inline-block;background: #fff;border-radius: 100%;cursor: pointer;margin:0 3px;}
	 .fade_slider .bar a.active{background:#f00;}
	 .arrow{position: absolute;font-size: 40px;width:40px;height: 40px;margin-top:-20px;color: #000;line-height: 40px;text-align:center;cursor: pointer;
    top: 50%;}
	</style>
	<script type="text/javascript">
	$(function(){
		$(".fade_slider").slider({
		})
	})
	</script>
</head>
<body>
	<div class="fade_slider">
		<div class="slider">
			<img src="img/1.jpg">
		</div>
		<div class="slider">
			<img src="img/2.jpg">
		</div>
		<div class="slider">
			<img src="img/3.jpg">
		</div>
		<div class="slider">
			<img src="img/4.jpg">
		</div>
	</div>
</body>
</html>

设置了四个默认参数。slow : 默认渐变的速度(ms)，time : 默认自动切换时间(ms)，bar : 是否显示左右箭头。默认不显示。可根据需要把左右箭头替换成自己需要的箭头图片，toorbar : 底部栏是否显示，默认显示。这里只是简单的封装了下实现方法，可根据实际需要改成自己需要的样式。

脚本如下

/*
 * author bianlongting
 * email 1137060420@qq.com
 * date 2016/06/28 22:10
 * describe 轮播渐变图
 * [param] slow number 
 * [param] time number 
 * [param] bar boolean 
 * [param] toolbar boolean 
 */

;(function(){
	$.fn.extend({
		slider : function(opts){
			//默认值
			var defaults = {
				slow : 800,				//默认渐变速度800
				time : 4000,			//默认切换时间4000
				bar  : false,			//默认左右箭头不显示
				toolbar : true,			//默认显示底部栏
			};
			var opts = $.extend({}, defaults, opts);
			
			return this.each(function(){
				var o = opts;
				var parent = $(this);
				var timer = null;
				var index = 0;
				var oDiv = parent.find('.slider');
				var imgs = oDiv.find('img');
				var len = imgs.length;

				//判断是否需要底部栏
				if (o.toolbar) {
					var html = "";
					html += "<div class='bar'>";
					for (var i = 0; i < len; i++) {
						html += "<a></a>";
					};
					html += "</div>";
					parent.append(html);
					
					var bar = parent.find("a");
					bar.first().addClass('active');
					bar.on("mouseover",function(){
						index = $(this).index();
						changeImg(index);
					}).eq(0).mouseover();
				};
				
				parent.hover(function(){
					if (timer) {
						clearInterval(timer);
					};
				},function(){
					timer = setInterval(function(){
						changeImg(index);
						index++;
						if (index == len) {
							index = 0;
						};
					},o.time);
				}).trigger('mouseleave');

				//判断是否需要左右箭头
				if (o.bar) {
					parent.append("<span href='javascript:void(0);' id = 'prev' style = 'left : 0' class='arrow'>&lt;</span>\
                	           <span href='javascript:void(0);' id = 'next' style = 'right : 0' class='arrow'>&gt;</span>");
				
					//前一个
					$("#prev").on("click",function(){
						if (index == 0) {
							index = len - 1;
						}else{
							index --;
						}
						changeImg(index);
					});

					//下一个
					$("#next").on("click",function(){
						if (index == (len -1) ) {
							index = 0;
						}else{
							index ++;
						}
						changeImg(index);
					})
				};

				function changeImg(param){
					oDiv.eq(param).stop(true,true).fadeIn(o.slow)
						 		  .siblings(".slider").fadeOut(o.slow);
					if (o.toolbar) {
						bar.eq(param).addClass('active')
								 .siblings().removeClass('active');
					};
				}
			})

		}
	})
})(jQuery)

转载于:https://my.oschina.net/bianlongting/blog/702511