js全屏轮播图

js全屏轮播图

今天分享一下用jquery方式书写基本的轮播图

原理：将要轮播的图片放到一个大div中，在放置图片的外层再包含一个div 设置宽为100% 如果有部分超出设为隐藏overflow: hidden;放置图片的div宽度设置为100%*图片的个数，当用户点击时使图片div进行滑动就可以了。

JS

	//页面进入加载事件
	$(function() {
	//获取轮播图片的个数
	var img_lenght = $(".bk_img").length;
	var i = 1;
	//初始化调用
	p_click();
	timer();
	li_click();
	
	
	//轮播主体
	function lb() {
		if(i > img_lenght - 1) {
			i = 0;
		}
		if(i < 0) {
			i = img_lenght - 1;
		}
		//animate:jquery 方法 通过改变元素的大小，对元素进行动画
		$("#showdiv").animate({
			"left": (-i * 100) + "%"
		});
		//eq（选择li 标签） siblings() 方法返回被选元素的所有同级元素。
		$("#top_img ul li").eq(i).addClass("li_bk").siblings().removeClass();
		i++;
	}
	//定时轮播
	function timer() {
		var t = setInterval(function() {
			lb();
		}, 4500);
		//鼠标悬停停止轮播
		$("#showdiv").hover(function() {
			t = clearInterval(t);
		}, function() {//移出正常轮播
			t = setInterval(function() {
				lb();
			}, 4500);
		})
		$("#top_img p").hover(function() {
			t = clearInterval(t);
		}, function() {
			t = setInterval(function() {
				lb();
			}, 4500);
		})
	}
	//左右点击轮播
	function p_click() {
		
		$(".left").click(function() {
			i -= 2;
			lb();
		});
		$(".right").click(function() {
			lb();
		})
	}
	//点击li轮播
	function li_click() {
		$("#top_img ul li").click(function() {
				i = $(this).index();
				lb();
			})
		}
	
	})

CSS:

body{
				margin: 0; padding: 0;
			}
			#top_img{
				width: 100%;
				height: 800px;
				/*border: solid 1px;*/
				position: relative;
				overflow: hidden;
			}
			#top_img p{
				/*position: absolute;*/
				font-size: 45px;
				background-color: #F7E2A5;
				border-radius: 25px;
				top: 250px;
			}
			.left{
				position: absolute;
				left: 10px;
				}
			.right{
				position: absolute;
				right: 10px;
				}
			#top_img ul{
					position: absolute;
					left: 43%;
					top: 600px;
					
			}
			#top_img ul li{
					float: left;
					width: 30px;
					height: 10px;
					border: solid 1px #F7E2A5;
					margin-left: 20px;
					list-style-type: none;
					border-radius: 20px;
					
				
			}
			#top_img p{
				cursor: pointer;  /*鼠标指针*/
			}
			.li_bk{
				background-color: #F7E2A5;
			}
			#showdiv{
				width: 200%;
				height: 800px;
				position: absolute;
			}
			#top_img img{
				width: 50%;
				height: 800px;
				float: left;
				
			}
			#top_s1{
				position: absolute;
				font-size: 20px;
				top: 30px;
				left: 350px;
				letter-spacing: 3px;
			}
			#top_s1>a{text-decoration: none; color: white; font-weight: bold;}
			#top_mid{
				position: absolute;
				text-align: center;
				width: 100%;
				margin-top: 250px;
				
			}
			#top_mid span{
				font-size: 30px;
				color:#F7E2A5;
			}
			#top_mid>a{
				text-decoration: none;
				color: white;
				font-weight: bold;
				letter-spacing: 3px;
				font-size: 65px;
			}

HTML:

		<div id="top_img">
			<div id="showdiv">
				<img src="img/top_img1.jpg" class="bk_img" />
				<img src="img/top_img2.jpg" class="bk_img" />
			</div>
			<span id="top_s1"><a href="LIFE.html">.LIFE</a></span>
			<div id="top_mid">
				<a href="">生活不易，且行且珍惜 ！</a><br />
				<span>Life is not easy, and do and cherish!</span>
			</div>
					<p class="left"> < </p>
					<p class="right"> > </p>
					<ul>
						<li class="li_bk"></li>
						<li></li>
					</ul>
		</div>

效果图：

源码已经打包如下：
链接：https://pan.baidu.com/s/1nAlBV2U-5AP-DMrDA1JY9Q
提取码：eohb