jQuery 轮播图，幻灯片

轮播图，html代码如下：

<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>微糖资讯</title>
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<script src="js/jquery-3.1.1.js"></script>
		<script src="js/index.js"></script>
	</head>

	<body>
		
		<!-----------------------------------------------轮播图---------------------------------------------->
		<div class="lunbo w100 h536 pos1" id="lunbo">
			<ul class="banner ">
				<li class="onshow">
					<a href="javascript:;"><img src="img/banner1.jpg" /></a>
				</li>
				<li>
					<a href="javascript:;"><img src="img/banner2.jpg" /></a>
				</li>
				<li>
					<a href="javascript:;"><img src="img/banner3.jpg" /></a>
				</li>
			</ul>
			<ol class="index">
				<li class="on"></li>
				<li></li>
				<li></li>
			</ol>
			<div class="slider-page">
				<a href="javascript:;" class="prevBut">
					<</a>
						<a href="javascript:;" class="nextBut">></a>
			</div>
		</div>
		
	</body>

</html>

样式文件index.css :

/*轮播图*/
.banner{width: 100%;  height: 536px; overflow: hidden; position: relative;}
.banner li{width: 1920px; height: 100%; text-align: center; display: none; overflow: hidden; position: absolute; top: 0; left: 50%; margin-left: -960px;}
.banner li a{display: block; width: 100%; height: 100%;}
.banner li.onshow{display: block;}
.banner li a img{width: 100%; height: 100%; border: 0; }
.index{position: absolute; left: 0; bottom: 20px; width: 100%; text-align: center;}
.index li{width: 14px; height: 14px; border-radius: 50%; background: #999; display: inline-block; margin: 0px 20px; cursor: pointer;}
.index li.on{background: #333;}
.slider-page{width: 100%; display: none;}
.prevBut,.nextBut{display: block; top: 50%; margin-top: -31px; width: 30px; height: 62px; line-height: 62px; background: rgba(0,0,0,0.5); font-size: 40px; color: #FFFFFF; font-family:simsun; text-align: center;}
.prevBut{position: absolute; left: 20px; }
.nextBut{position: absolute; right: 20px; }
.lunbo:hover .slider-page{display: block;}

样式文件base.css :

@charset "utf-8";
/* CSS Document */
*{box-sizing: border-box;}
body,div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,dd,a,i,b,em,strong,span,img{padding:0;margin:0; font-size:12px;}
body{font-family: "Microsoft Yahei","微软雅黑",verdana,arial;}
a{text-decoration:none; color: #333;}
a:focus{outline:none;}
li{list-style:none;}
em,i{font-style:normal;}
b,strong{font-weight:normal;}
img{vertical-align:top;}
a img{ border:none;}
.fl{float:left;}
.fr{float:right;}
.clearfix:after{content:'';display:block;clear:both;visibility:hidden;height:0;}
.clearfix{zoom:1}
a:hover{
    text-decoration: none;
}
.mar0{
    margin:0 auto;
}
.pos1{
    position:relative;
}

.w100{
    width:100%;
}
.h100{
	height: 100%;
}
.w1200{
	width: 1200px;
}

index.js 文件：

自己分装了一个函数，传入不同的参数，多个地方可以调用。

//轮播图
$(function() {
	function lunbo(dianObject, dianObjectClass, contentObject, contentObjectClass, leftBtn, rightBtn, mouseHover) {
		//手动控制轮播图
		$(dianObject).mouseover(function() {
			var index = $(this).index();
			$(this).addClass(dianObjectClass).siblings().removeClass(dianObjectClass);
			$(contentObject).eq(index).addClass(contentObjectClass).siblings().removeClass(contentObjectClass);
			//$(contentObject).eq(index).stop().fadeIn(300).siblings().stop().fadeOut(300);
		});
		var len = $(dianObject).length;
		//自动播放
		var i = 0;
		var t = setInterval(moveR, 1500);
		//向右播放函数
		function moveR() {
			i++;
			if(i == len) {
				i = 0;
			}
			$(dianObject).eq(i).addClass(dianObjectClass).siblings().removeClass(dianObjectClass);
			$(contentObject).eq(i).addClass(contentObjectClass).siblings().removeClass(contentObjectClass);
			//$(contentObject).eq(i).stop().fadeIn(300).siblings().stop().fadeOut(300);
		};
		//向左播放函数
		function moveL() {
			i--;
			if(i == -1) {
				i = len - 1;
			}
			$(dianObject).eq(i).addClass(dianObjectClass).siblings().removeClass(dianObjectClass);
			$(contentObject).eq(i).addClass(contentObjectClass).siblings().removeClass(contentObjectClass);
			//$(contentObject).eq(i).stop().fadeIn(300).siblings().stop().fadeOut(300);
		};
		//左边按钮事件
		$(leftBtn).click(function() {
			moveL();
		});
		//右边按钮事件
		$(rightBtn).click(function() {
			moveR();
		});
		//鼠标移入移出事件
		$(mouseHover).hover(function() {
			clearInterval(t);
		}, function() {
			t = setInterval(moveR, 1500);
		});

	}
	lunbo(".index li", "on", ".banner li", "onshow", ".prevBut", ".nextBut", ".lunbo"); //不同的地方调用就行

	lunbo(".kehushuo_ol li", "kehushuo_show", ".kehushuo_ul li", "kehushuo_block", ".leftBut", ".rightBut", ".kehushuo_banner"); //不同的地方调用就行

});

扫描二维码关注公众号，回复： 2267594 查看本文章

jQuery 轮播图 ，幻灯片

猜你喜欢

jQuery 轮播图，幻灯片