jq 幻灯片

最新推荐文章于 2021-11-13 17:53:49 发布

noonnightstorm

最新推荐文章于 2021-11-13 17:53:49 发布

阅读量1.4k

点赞数

本文链接：https://blog.csdn.net/noonnightstorm/article/details/8509973

版权

今日上班一个下午用jq写了一个幻灯片，呵呵！其实挺简单的，看代码吧：

html:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>test</title>
  <link rel="stylesheet" href="../css/text.css">
  <script type="text/javascript" src="../js/jquery-1.7.min.js"></script>
  <script type="text/javascript" src="../js/text.js"></script>
</head>
<body>
  <div class="test">
  	<ul class="slide" id="slide">
  		<li class="slide-item slide-first-item">
  			<img src="../image/banner.jpg" alt="">
  		</li>
  		<li class="slide-item">
  			<img src="../image/banner2.jpg" alt="">
  		</li>
  		<li class="slide-item">
  			<img src="../image/banner3.gif" alt="">
  		</li>
  		<li class="slide-item">
  			<img src="../image/banner4.png" alt="">
  		</li>
  		<li class="slide-item">
  			<img src="../image/banner5.png" alt="">
  		</li>
  		<li class="slide-item">
  			<img src="../image/banner.jpg" alt="">
  		</li>
  	</ul>
  	<div class="slide-choice">
       <button class="slide-choice-btn slide-choice-focus-btn" id="slide-choice-btn0" value = "0"></button>
       <button class="slide-choice-btn slide-choice-unfocus-btn" id="slide-choice-btn1" value="1"></button>
       <button class="slide-choice-btn slide-choice-unfocus-btn" id="slide-choice-btn2" value="2"></button>
       <button class="slide-choice-btn slide-choice-unfocus-btn" id="slide-choice-btn3" value="3"></button>
       <button class="slide-choice-btn slide-choice-unfocus-btn" id="slide-choice-btn4" value="4"></button> 
    </div>
  </div>
</body>
</html>

css:

*{
	margin: 0;
	padding: 0;
}
.test{
	position: relative;
	width: 100%;
	height: 421px;
	overflow: hidden;
}
.slide{
	position: relative;
	list-style: none;
	position: absolute;
	width: 9000px;
}
.slide-item{
	float: left;
}
.slide-choice{
	width: 100%;
	height: 50px;
	position: absolute;
	bottom: 0;
	text-align: center;
	background: rgba(0,0,0,0.8);
}
.slide-choice-btn{
	width: 10px;
	height: 10px;
	margin: 20px 10px 10px 10px;
	border:0;
	background-image:url(../image/result-btn.png);
	background-repeat: no-repeat;
}
.slide-choice-focus-btn{
	background-position: 0px -20px;
}
.slide-choice-unfocus-btn{
	background-position: 0px 0px;
}

JS:

window.onload = function(){
	Slide.start();
	$(".slide-choice-btn").click(Slide.btnClick);
}

var Slide = {
	num : 6,
	imgCount : 0,
	btnCount : 0,
	start : function(){
		this.imgSlide();
		this.btnSlide();
	},
	imgSlide : function(){
			setInterval(function(){
				var timeInterval = Slide.imgCount*-1500;
				$(".slide").animate({"left":timeInterval},500);
				Slide.imgCount++;
				if(Slide.imgCount%Slide.num == 0){
					Slide.imgCount = 0;
				}
				if(Slide.imgCount == 0){
					$(".slide").animate({"left":0},0);
					Slide.imgCount++;
				}
			},5000);
	},
	btnSlide : function(){
		setInterval(function(){
			$(".slide-choice-btn").css({"background-position":"0px 0px"});
			Slide.btnCount = Slide.btnCount%(Slide.num-1);
			$("#slide-choice-btn"+Slide.btnCount).css({"background-position":"0px -20px"});
			Slide.btnCount++;
		},5000);
	},
	btnClick : function(){
		$(".slide-choice-btn").css({"background-position":"0px 0px"});
		$(".slide").animate({"left":this.value*-1500},500);
		$(this).css({"background-position":"0px -20px"});
		Slide.btnCount = this.value;
		Slide.imgCount = this.value;
	}
}

效果图：（图片随意找的，不要见怪）