jQuery案例之图片轮播

最新推荐文章于 2022-10-29 18:05:59 发布

努力努力再努力yo

最新推荐文章于 2022-10-29 18:05:59 发布

阅读量399

点赞数

分类专栏： jQuery 文章标签： jQuery 图片轮播

本文链接：https://blog.csdn.net/Allen8523/article/details/84680376

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

用jQuery简单写图片轮播特效

一、HTML部分

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" href="css/public.css">
<link rel="stylesheet" href="css/web.css">
</head>

<body>
	<div class="picbox">	
		
		<ul class="content">
			<li class="current"><a href="#"><img src="images/1.jpg" alt=""/></a></li>
			<li><a href="#"><img src="images/2.jpg" alt=""/></a></li>
			<li><a href="#"><img src="images/3.jpg" alt=""/></a></li>
			<li><a href="#"><img src="images/4.jpg" alt=""/></a></li>	
		</ul>
		
		<ul id="content_bg">
			<li class="bg">美丽的草原</li>
			<li>云里的小镇</li>
			<li>出升的太阳</li>
			<li>蔚蓝的湖泊</li>
		</ul>
	
		
		<ul id="circle">
			<li class="current1"></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>

	</div>
	
	
	<script src="js/jquery-1.12.4.min.js"></script>
	<script src="js/web.js"></script>
</body>
</html>

二、css部分（不包含公用样式）

/* CSS Document */
.picbox{
	width: 700px;
	height: 400px;
	margin: 0 auto;
	position: relative;
}
.picbox ul li{
	display: none;
}
.picbox ul:first-child{
	width: 100%;
	height: 100%;
}
.picbox ul li img{
	width: 100%;
	height: 100%;
}
.picbox ul:first-child li{
	width: 100%;
	height: 100%;
	float: left;
	position: absolute;
}
.picbox .current{
	display: block;
}

#content_bg{
	width: 700px;
	height: 60px;
	color:#fff;
	background: rgba(0,0,0,0.4);
	position: absolute;
	bottom: 0;	
	line-height: 60px;
}
#content_bg .bg{
	padding-left: 50px;
	display: block;
}

#circle {
	position:absolute;
	right:50px;
	bottom:20px;
}
#circle li {
	width:12px;
	height:12px;
	background-color:#fff;
	border-radius:50%;
	margin:0px 4px;
	display:inline-block;
	cursor:pointer;
}
#circle .current1 {
	background-color:#FF7E00;
	transition: all 0.4s;
	transform: scale(1.5,1.5);
}

三、jQuery部分（重点）

// JavaScript Document
$(document).ready(function(){
	var timer = null;
	var index = 0;
	var pic = $('.content li');
	var cir = $('#circle li');
	var bg = $('#content_bg li');
	
	/*轮播效果*/
	show();
	
	/*鼠标指向当前*/
    cir.mouseover(function() {
        index = $(this).index();
        begin();
    });
	
	/*鼠标放上图片按钮 停止轮播*/
	cir.mouseenter(function(){
		clearInterval(timer);
	});
	pic.mouseenter(function(){
		clearInterval(timer);
	});
	
	/*鼠标离开图片按钮 继续轮播*/
	cir.mouseleave(function(){
		show();
	});
	pic.mouseleave(function(){
		show();
	});
	
	/*轮播*/
	function show(){
		timer = setInterval(function(){
			begin();
			index++;
			if(index === 4){
				index = 0 ;
			}
		}, 2000);
	}
	/*更改样式*/
    function begin() {
        pic.eq(index).addClass('current').siblings().removeClass('current');
        cir.eq(index).addClass('current1').siblings().removeClass('current1');
		bg.eq(index).addClass('bg').siblings().removeClass('bg');
    }
	
	
	
});

努力努力再努力yo

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery案例之图片轮播

用jQuery简单写图片轮播特效一、HTML部分&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;title&gt;无标题文档&lt;/title&gt;&lt;link rel="s
复制链接

扫一扫

专栏目录