简易的JavaScript轮播图javascript

/ / 2023-07-27 阅读：2559
简易的JavaScript轮播图...
演示效果：
代码：
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <link rel="stylesheet" type="text/css" href="demo.css"/>
    <script src="jquery.min.js"></script>
    <script src="demo.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    <div id="igs">
      <a class="ig" href="#"><img src="222.jpg" width="100%" /></a>
      <a class="ig" href="#"><img src="333.jpg" width="100%" /></a>
      <a class="ig" href="#"><img src="222.jpg" width="100%" /></a>
      <a class="ig" href="#"><img src="333.jpg" width="100%" /></a>
      <a class="ig" href="#"><img src="222.jpg" width="100%" /></a>
       
      <div class="btn btn1"><</div>
      <div class="btn btn2">></div>
       
      <ul id="tabs">
        <li class="tab">1</li>
        <li class="tab">2</li>
        <li class="tab">3</li>
        <li class="tab">4</li>
        <li class="tab">5</li>
      </ul>
    </div>

	<style>
	* {
		margin: 0;
		padding: 0;
	}

	#igs {
		margin: 10px auto;
		width: 700px;
		height: 320px;
		position: relative;
		overflow: hidden;
	}

	.ig {
		position: absolute;
	}

	#tabs {
		position: absolute;
		list-style: none;
		/*background-color: rgba(255,255,255,.5);*/
		left: 300px;
		bottom: 10px;
		border-radius: 10px;
		padding: 5px 0 5px 5px;
	}

	.tab{
		float: left;
		text-align: center;
		line-height: 20px;
		width: 20px;
		height: 20px;
		cursor: pointer;
		overflow: hidden;
		margin-right: 4px;
		border-radius: 100%;
		background-color: rgb(200,100,150);
		/*background-color: #000;
		opacity: 0.3;
		filter: alpha(opacity=40);
		color: #fff;*/
	}

	.btn{
		position: absolute;
		color: #fff;
		top: 110px;
		width: 40px;
		height: 100px;
		background-color: rgba(255,255,255,.3);
		font-size: 40px;
		font-weight: bold;
		text-align: center;
		line-height: 100px;
		border-radius: 5px;
		margin: 0 5px;
	}

	.btn2{
		position: absolute;
		right: 0px;
	}

	.btn:hover{
		background-color: rgba(0,0,0,.7);
		cursor: pointer;
	}
	.tab:hover {
		color: #fff;
	}
	.bg{ background-color: #f00; color: #fff; }
	</style>

	<script>
		//定义全局变量和定时器
		var i = 0 ;
		var timer;
		var number = 5;

		$(document).ready(function(){
			//用jquery方法设置第一张图片显示，其余隐藏
			$('.ig').eq(0).show().siblings('.ig').hide();

			//调用showTime()函数（轮播函数）
			showTime();

			//当鼠标经过下面的数字时，触发两个事件（鼠标悬停和鼠标离开）
			$('.tab').hover(function(){
				//获取当前i的值，并显示，同时还要清除定时器
				i = $(this).index();
				Show();
				clearInterval(timer);
			},function(){
				//
			showTime();
		});

		//鼠标点击左侧的箭头
		$('.btn1').click(function(){
			clearInterval(timer);
			if(i == 0){
				i = number;//注意此时i的值
			}
			i--;
			Show();
			showTime();
		});

		//鼠标点击右侧的箭头
		$('.btn2').click(function(){
			clearInterval(timer);
			if(i == number-1){
			  i = -1;//注意此时i的值
			}
			i++;
			Show();
			showTime();
			});

		});


		//创建一个showTime函数
		function showTime(){
			//定时器
			timer = setInterval(function(){
				//调用一个Show()函数
				Show();
				i++;
				//当图片是最后一张的后面时，设置图片为第一张
				if(i==number){
					i=0;
				}
			},2000);
		}


		//创建一个Show函数
		function Show(){
			//在这里可以用其他jquery的动画
			$('.ig').eq(i).fadeIn(300).siblings('.ig').fadeOut(300);

			//给.tab创建一个新的Class为其添加一个新的样式，并且要在css代码中设置该样式
			$('.tab').eq(i).addClass('bg').siblings('.tab').removeClass('bg');
		}
	</script>
  </body>
</html>
上一篇：JS获取屏幕尺寸
下一篇：js遍历数组
阅读延展
简易的JavaScript轮播图javascript

我要评论

最新评论
