jQuery——实现淡进淡出轮播以及无缝轮播

最新推荐文章于 2021-06-02 21:38:41 发布
最新推荐文章于 2021-06-02 21:38:41 发布
阅读量822 收藏
点赞数
分类专栏： jQuery 文章标签： jq轮播
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YUHUI01/article/details/80849121
版权

实现图片自动轮播，鼠标悬浮，轮播停止

1、淡进淡出轮播

<!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>Document</title>
	<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
	<style>
		#container{
			position: relative;
			width: 1066px;
			height: 600px;
			margin: 50px auto;
		}
		img{
			width: 100%;
			height: 100%;
			position: absolute;
			display: none;
		}
		a{
			position: absolute;
			top:50%;
			width: 40px;
			height: 50px;
			line-height: 45px;
			text-align: center;
			border-radius: 30%;
			text-decoration: none;
			background: rgba(0, 0, 0, .5);
			color: rgba(0, 0, 0, .8);
			font-size: 50px;
			font-weight: 700;
			display: inline-block;
			border: 1px solid rosybrown;
		}
		a:hover{
			background-color: black;
			color: rgba(255, 255, 255, .8)
		}
		.left{
			left: 2%;
		}
		.right{
			right: 2%;
		}
		ul{
			position: absolute;
			bottom: 10px;
			left: 32%;
		}
		ul li{
			list-style: none;
			width: 20px;
			height: 20px;
			border-radius: 50%;
			background: gray;
			float: left;
			margin-right: 7px;
			
		}
		ul li:hover{
			cursor: pointer;
		}
		.first{
			background-color: red;
		}
		.active{
			display: inline-block;
		}
	</style>
</head>
<body>
	<div id="container">
		<div id="content">
			<img class="active" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530795543&di=7f780a82a4eaa5db98ad5208a6696e88&imgtype=jpg&er=1&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0147d857c01f8c0000012e7ea7acb3.jpg%402o.jpg" alt="">
			<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530795563&di=e2e8f721b430d33f2142d0a0ca983396&imgtype=jpg&er=1&src=http%3A%2F%2Fp1.gexing.com%2FG1%2FM00%2F4C%2F59%2FrBACJlTi6rKgv14aAAJdt559sD0951.jpg" alt="">
			<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530795575&di=634b70dfa2ab0c22c2e844dfc311a0c9&imgtype=jpg&er=1&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F019e475543eda80000019ae941173a.jpg" alt="">
			<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530795589&di=a834a5a985ec2851194278a4bfab4cc3&imgtype=jpg&er=1&src=http%3A%2F%2Fp17.qhimg.com%2Fd%2F_open360%2Fcg0910%2F34.jpg" alt="">
			<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530795601&di=518f596e233f9af3204138cee416bccb&imgtype=jpg&er=1&src=http%3A%2F%2Fattach.bbs.wps.cn%2Fattachments%2Fforum%2F201408%2F09%2F115558kz8c8z8odvigk1q2.jpg" alt="">
			<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530795627&di=bc78a312980087fd514c1dfd7eba3528&imgtype=jpg&er=1&src=http%3A%2F%2Fp15.qhimg.com%2Fd%2F_open360%2Fdesign0906%2F7.jpg" alt="">
			<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530795640&di=bca56fe41363e607986f23c49c002145&imgtype=jpg&er=1&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01d8e857fa09faa84a0e282bf7421d.jpg" alt="">
			<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530200932974&di=7e031529b46e44908e7e0fdd0deb86dd&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2Ff11f3a292df5e0fefdad8d415f6034a85edf723c.jpg" alt="">
			<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530200944217&di=345f3f040e597a54ee3008ea337c6b6b&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F010b9c57748a930000012e7e419c08.png%402o.png" alt="">
			<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530795675&di=a5f8136ecc7b83e05368b809c3f4fbd8&imgtype=jpg&er=1&src=http%3A%2F%2Fp4.gexing.com%2Fshaitu%2F20121117%2F0223%2F50a684878ca1b.jpg" alt="">
			<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530200956981&di=927ea8049cd38e73c67c936b19223adf&imgtype=0&src=http%3A%2F%2Fp16.qhimg.com%2Fd%2F_open360%2Fdm0715%2F7.jpg" alt="">
			<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530200956981&di=81e7142d71115979ee23fb546c073403&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F016ef457ba616f0000018c1b96a27c.jpg" alt="">
		</div>
		<a class="left" href="#"><</a>
		<a class="right" href="#">></a>
		<ul>
			<li class="first"></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
		</ul>
	</div>
</body>
</html>
<script>
	var $img=$("img");
	var $li=$("li");
	var $left=$(".left");
	var $right=$(".right");
	var $container=$("#container");
	var index=0;
	var onOff=true;
	var timer=null;
	var clearInter=null;

	$li.mouseover(function(){
		index=$(this).index();
		tab();
	});
	$left.click(function(){
		if(onOff){
			onOff=false;
			index--;
			if(index<0){
				index=11;
			}
			tab();
		}
	})
	$right.click(function(){
		bannerScroll();
	})
	function bannerScroll(){
		if(onOff){
			onOff=false;
			index++;
			if(index>11){
				index=0;
			}
			tab();
		}
	}
	clearInter=setInterval(bannerScroll,500);
	$container.hover(function(){
		clearInterval(clearInter)
	},function(){
		clearInter=setInterval(bannerScroll,500);
	})
	function tab(){
		$li.eq(index).addClass("first").siblings().removeClass();
		$img.eq(index).fadeIn(500).siblings().fadeOut(500,function(){
			clearTimeout(timer);
			timer=setTimeout(function(){
				onOff=true;
			},500)			
		});
	}
</script>

2、无缝轮播

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
	<script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			var $left=$("#left");
			var $right=$("#right");
			var $img=$("img");
			var $content=$("#content")
			var $container=$("#container")
			var $li=$("li");
			var index=null;
			var interval=null;
			$li.hover(function(){
				index=$(this).index();
				tab();
			});
			$left.click(function(){
				index--;
				if(index<0){
					index=$img.size()-1;
				}
				tab()
			})
			$right.click(function(){
				auto();
			})
			interval=setInterval(auto,1000)
			$container.hover(function(){
				clearInterval(interval)
			},function(){
				interval=setInterval(auto,1000)
			})
			function auto(){
				index++;
				if(index>$img.size()-1){
					index=0;
				}
				tab()
			}
			function tab(){
				$li.eq(index).addClass("active").siblings().removeClass();
				$content.stop().animate({
					left: -index *533
				})
			};
		})
	</script>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		#container{
			width: 533px;
			height: 300px;
			margin: 150px auto;
			border: 1px solid gold;
			overflow: hidden;
			position: relative;
		}
		#content{
			width: 6000px;
			position: absolute;
		}
		#content img{
			float: left;
			width: 533px;
			box-sizing: content-box;
		}
		ul{
			list-style: none;
			position: absolute;
			left: 40%;
			bottom: 5%;
		}
		ul li{
			width: 15px;
			height: 15px;
			background-color: white;
			float: left;
			border-radius: 50%;
			margin-right: 7px;
		}
		li:hover{
			cursor: pointer;
		}
		.active{
			background-color: red
		}
		a{
			position: absolute;
			width: 50px;
			height: 50px;
			color: rgba(244, 244, 244, .8);
			font-size: 50px;
			text-decoration: none;
			text-align: center;
			line-height: 50px;
			top: 50%;
			background-color: rgba(0, 0, 0, .5);
			margin-top: -25px;
		}
		a:hover{
			background-color: black;
			color: white;
		}
		#left{
			left: 3%;
		}
		#right{
			right: 3%;
		}
	</style>
</head>
<body>
	<div id="container">
		<div id="content">
			<img class="first" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530456749917&di=083430a8c0df7a14437d5ecbcd54f1a6&imgtype=0&src=http%3A%2F%2Fimgstore.cdn.sogou.com%2Fapp%2Fa%2F100540002%2F605618.jpg">
			<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531051262&di=babbaf7fc572130d710091efacd0c1e3&imgtype=jpg&er=1&src=http%3A%2F%2Fsc.68design.net%2Fphotofiles%2F201706%2FaMStJ653RK.jpg">
			<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530456541576&di=d9763d453b998b5e9d71270745b37a4d&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201512%2F23%2F185547pjj25qggbogyo2zs.jpg">
			<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530456541575&di=a3ba91ceab8626e382ececd4f206482a&imgtype=0&src=http%3A%2F%2Fimgstore.cdn.sogou.com%2Fapp%2Fa%2F100540002%2F607866.jpg">
			<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530456541574&di=c8f4c6bae547d1e0a0361990b81a6aa2&imgtype=0&src=http%3A%2F%2Fp3.gexing.com%2Fshaitu%2F20130214%2F2344%2F511d064fcf613.jpg">
		</div>
		<ul>
			<li class="active"></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<a href="#" id="left"><</a>
		<a href="#" id="right">></a>
	</div>
</body>
</html>


YUHUI01
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
小程序轮播，上下两层图片，底层渐变淡入淡出，上层动画划入效果
alessia_wang的博客
10-12 3133
轮播淡入淡出效果与动画划入效果
Swiper 中 Animate 动画切换淡入淡出
qq_23022703的博客
04-30 3779
Swiper 中 Animate 动画切换淡入淡出使用1、引入2、html3、js 使用 1、引入 <link rel="stylesheet" href="CSS/animate.min.css"> <script type="text/javascript" src="js/swiper.animate1.0.3.min.js"></script> 2、html <div class="swiper-container1" id="swiper1">
jQuery实现轮播图（淡入淡出式+无缝滑动式）
Dilomen的博客
05-07 4224
  淡入淡出式 &lt;!DOCTYPE html&gt; &lt;html lang="en" dir="ltr"&gt; &lt;head&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; &lt;meta charset=&quot
jQuery_轮播图_淡入淡出效果（如何用jQuery实现一个淡入淡出轮播图）
热门推荐
jiang7701037的博客
01-24 1万+
解释： jQuery做的轮播图，淡入淡出效果，没有使用面向对象 效果图： 思路图： 代码： *{ margin:0; padding:0; list-style: none; } #box{
jQuery实现淡入淡出效果
12-15
用fadeIn、fadeOut、fadeToggle来实现淡入淡出。
jQuery实现的淡入淡出图片轮播效果示例
10-18
主要介绍了jQuery实现的淡入淡出图片轮播效果,涉及jQuery基于定时器的页面元素动态操作相关实现技巧,需要的朋友可以参考下
jQuery淡出淡进首页焦点图片轮播可按钮控制焦点图片轮播
11-17
"jQuery淡出淡进首页焦点图片轮播可按钮控制"是一种常见的交互式图像展示方式，它通过jQuery库实现图片的平滑过渡效果，增加用户体验。接下来，我们将深入探讨这个主题。 首先，jQuery是一个轻量级的JavaScript库，...
jquery文字动画特效制作淡出淡进文字轮播动画效果代码
11-23
在本文中，我们将深入探讨如何使用jQuery库来创建一个引人注目的文字动画特效，特别是淡出淡进的文字轮播效果。jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理以及动画效果，使得开发者可以更高效地...
基于jQuery实现淡入淡出效果轮播图
10-21
主要为大家详细介绍了基于jQuery淡入淡出效果轮播图，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
网站banner淡进淡出切换效果
01-16
网站常用的大广告banner淡进淡出切换效果！！！！！！
网页banner的淡入淡出和轮播效果
04-24
实现网页上banner的淡入淡出以及轮播效果，兼容性良好
关于轮播的代码
03-01
关于轮播的代码...　　banner.html
js_图片淡入淡出效果_图片淡进淡出
06-23
js_图片淡入淡出效果_图片
vue渐变淡入淡出轮播图
weixin_30416871的博客
02-17 1160
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> body, p, img, dl...
js图片轮播（淡入淡出）
ICY___的博客
01-21 1425
关于图片轮播，有太多的方法去实现，不同的样式，用的主要思想也不同，但不管怎么说，图片轮播离不开计时器。 关于要注意的，要解释的，我都备注好了，说的可能不是很标准，但我尽量说的通俗，欢迎留言讨论，只要我看到的，都会回复的。 &lt;!-- 核心思想：利用层级关系 计时器和css3动画来实现这个功能完善的图片轮播案例 --&gt; &lt;!-- 基本覆盖了轮播的所有功能 --&gt; ...
JQuery实现图片轮播切换效果--水平切换/垂直切换
huobengluantiao8
05-20 430
一、JQuery实现图片轮播效果 用JQuery操作DOM确实很方便，并且JQuery提供了非常人性化的API应付我们的各种需求，其中选择器在此示例-“JQuery实现图片轮播效果”上体现的尤为出色。大大简化了js的代码。 【原理简述】 这里大概说一下整个流程： 1，将除了第一张以外的图片全部隐藏， 2，获取第一张图片的alt信息显示在信息栏，并添加点击事件 3，为4个按钮添加点击侦听...
三种方式实现banner图的轮播（jq实现淡入淡出、jq实现层级轮播、js面向对象实现无缝轮播）
ZHANGJIN9546的博客
06-28 1187
三种方式实现banner图的轮播（jq实现淡入淡出、jq实现层级轮播、js实现无缝轮播） //1、jq实现淡入淡出 思路： a、使用JQ库里面的.fadeIn()\fadeOut()方法 **fadeIn()
html5自动淡入淡出图片,js实现图片淡入淡出切换简易效果
weixin_39533361的博客
06-02 271
*{padding: 0;margin: 0;}ul{overflow: hidden;}li{list-style: none;height: 30px;border: 1px solid #000;width: 100px;float: left;line-height: 30px;text-align: center;}img{width:306px;opacity: 0;}.active{...
jquery实现拼图轮播淡入淡出
最新发布
12-06
以下是一种基于jQuery的图片轮播淡入淡出的实现方式，供参考： ```html <!-- HTML结构 --> ``` ```css /* CSS样式 */ .slider { position: relative; width: 600px; height: 400px; } .slider img { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值