js-基础-简易轮播图

最新推荐文章于 2023-03-29 20:38:14 发布
最新推荐文章于 2023-03-29 20:38:14 发布
阅读量543 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sjyssn/article/details/82556585
版权

1.jQuery仿京东首页轮播效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
        <style type="text/css">
        	*{
        		margin: 0;
        		padding: 0;
        	}
        	#div1{
        		width: 790px;
        		height: 340px;
        		margin: 100px auto;
        		position: relative;
        	}
        	#div1 ul{
        		list-style: none;
        	}
        	#div1 li{
        		position: absolute;
        		display: none;
        	}
        	#div1 li:first-child{
        		display: block;
        	}
        	#left,#right{
        		position: absolute;
        		background-color: rgba(0,0,0,0.2);
        		color: white;
        	    width: 30px;
        	    height: 60px;
        	    font-size: 36px;
        	    text-align: center;
        	    line-height: 60px;
        	    top: 50%;
        	    margin-top:-30px ;
        	    display: none;
        	    cursor: pointer;
        	}
        	#left{
        		left: 0;
        	}
        	#right{
        		right: 0;
        	}
            #div1:hover span{
            	display: block;
            }
        	#left:hover,#right:hover{
        		background-color: rgba(0,0,0,0.6);
        	}
        	#nav{
        		position: absolute;
        		bottom: 10px;
        		/*left:50%;
        		margin-left:-80px ;*/
        		left: 20px;
        	}
        	#nav i{
        		float: left;
        		margin:0 1px;
        	}
        	#nav .i{
        		width: 18px;
        		height: 18px;
        		position: relative;
        	}
        	#nav .i:after{
        		content: "";
        		display:block;
        		width: 6px;
        		height: 6px;
        		position: absolute;
        		top:4px;
        		left: 4px;
        		border: 2px solid rgba(255,255,255,0.3);
        		border-radius:50%;
        	}
        	#nav .ib{
        		position: relative;
        		box-sizing: border-box;
        		border: 4px solid rgba(255,255,255,0.3);
                border-radius:50%;
        	}
        	#nav .ib:after{
        		content: "";
        		display:block;
        		position: absolute;
        		top: 0;
        		left: 0;
        		box-sizing: border-box;
        		border: 5px solid rgba(255,255,255,1);
        		border-radius:50%;

        	}
        	   
        </style>
	</head>
	<body>
		<div id = "div1">
			<ul>
				<li><a href=""><img src="images/1.jpg"/></a></li>
				<li><a href=""><img src="images/2.jpg"/></a></li>
				<li><a href=""><img src="images/3.jpg"/></a></li>
				<li><a href=""><img src="images/4.jpg"/></a></li>
				<li><a href=""><img src="images/5.jpg"/></a></li>
				<li><a href=""><img src="images/6.jpg"/></a></li>
				<li><a href=""><img src="images/7.jpg"/></a></li>
				<li><a href=""><img src="images/8.jpg"/></a></li>
			</ul>
			<span id="left">&lt;</span>
			<span id="right">&gt;</span>
			<div id="nav">
				<i class="i ib"></i>
				<i class="i"></i>
				<i class="i"></i>
				<i class="i"></i>
				<i class="i"></i>
				<i class="i"></i>
				<i class="i"></i>
				<i class="i"></i>
			</div>
		</div>
			<script type="text/javascript" src="jquery-1.12.4.js"></script>
			<script type="text/javascript">
				var count = 0;
				var timer = setInterval(showLi, 3000);
				$(function() {
					$("#right").click(function() {
						count++;
						if(count == $("#div1 li").length) {
							count = 0;
						}
//						console.log(count)
						$("#div1 li").eq(count).stop().fadeIn().siblings().stop().fadeOut();
						$("#nav i").eq(count).addClass("ib").siblings().removeClass("ib");
						//或者调用showLi
						//count--;showli()
						clearInterval(timer);
						timer = setInterval(showLi, 3000);
					});
					$("#left").click(function() {
						count--;
						if(count == -1) {
							count = $("#div1 li").length - 1;
						}
//						console.log(count)
						$("#div1 li").eq(count).stop().fadeIn().siblings().stop().fadeOut();
						$("#nav i").eq(count).addClass("ib").siblings().removeClass("ib");
						//或者调用showLi
						//count--;showli()
						clearInterval(timer);
						timer = setInterval(showLi, 3000);//开启定时器之前要关闭尚一个定时器
					});
				});
				$(function() {
					$("#nav i").mouseenter(function() {
						count = $("#nav i").index(this);
						count--
						showLi();
						clearInterval(timer);
						timer = setInterval(showLi, 3000);
					});
				});
				function showLi(){
					count++;
					if(count == $('#div1 li').length) {
						count = 0;
					}
//	     	        console.log(count);
					$("#div1 li").eq(count).stop().fadeIn().siblings().stop().fadeOut();
					$("#nav i").eq(count).addClass("ib").siblings().removeClass("ib");
				}
			</script>
	</body>
</html>
song-jian
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
原生js通过一行代码实现简易轮播图
10-16
主要介绍了原生js一行代码实现简易轮播图功能，本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
JavaScript实现简易轮播图
qq_63905869的博客
04-21 179
轮播图在很多网站都能见到，比如淘宝，京东的首页。他们将轮播图放在页面中使其更有动态感，刚具有美观性，一部分还表示一些比较重要的信息。比如手机新发布，需要大力宣传，就可以放在轮播图中，为其做一个宣传。这个简易轮播图总体分为三个部分，我将这三个部分拆开来了，也可以通过将图片设置为背景图片来添加其他两个部分（文字介绍，下面的框框）这是基本的一个轮播图的一个框架，有需要的可以对其进行改进。
JS实现轮播图的三种简单方法。
m0_67392409的博客
03-11 1万+
Js实现轮播图01 实现思路 这可能是轮播图最简单点的实现之一，通过更改图片的src来实现该效果，首先需要将图片命名格式统一比如pic01.jpg，pic02.jpg…,再通过js使用定时器去改变img标签里面的src图片链接的名字来实现切换效果。代码如下： 实现效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>轮播图实现01</title> &
制作一个简单的轮播图（详解新手教学）
A793791182的博客
01-14 2万+
制作一个简单的轮播图（详解新手教学） 相信很多初学者，无论是前端还是后端，对于制作页面时，都想自己亲手制作一个轮播图。 如何制作一个轮播图： 基础知识：有HTML，Css，js基础 本文使用技术： HTML，boostrap，jQuery 先贴代码 页面： &lt;div class="lunbotu row"&gt; &lt;div id="piclist"&gt; &lt...
JS实现轮播图（一看就懂逻辑清晰）
分享、进步、收获！！！
02-15 4万+
逻辑清晰的轮播图
原生 JS 实现一个简单轮播图
qq_35727582的博客
09-08 3442
原生 JS 实现一个简单轮播图详解，附代码和效果图展示
JavaScript之手把手教你做轮播图
跳探戈的小龙虾的博客
04-08 1万+
我教你做的轮播图包括但不限于以下功能： 平滑滚动、定时滚动 + 点击滚动、防鼠标连续点击、第一张图与最后一张图无缝处理 如果你是在找轮播图怎么做的小白，那么恭喜你，找到我这儿，不用再换了，认认真真看完这篇文章，我保证你能做一个完整的轮播图。 而且我会以面向小白的简单通俗讲解，带大家做完轮播图，保证全程没有盲点。 不过前提是，有简单的jQuery基础和会用setTimeout()和setInterval()函数，这两个要求可以在我的其他博客里学习到。
实现简单的轮播图（单张图片、多张图片）
星河
02-09 2万+
前言 刚学js没多久，这篇博客就当做记录了，以后还会完善的，希望大佬们多多指点。ps:下面出现的都是直接闪动，没有滑动效果的轮播图。 单张图片的替换 · ...
移动端简易jquery轮播图.zip
07-11
代码简介：移动端简易jquery轮播图是一款支持移动端，可触摸滑动的图片切换特效。
day35-Image Carousel（图片轮播图简易版）
07-23
day35-Image Carousel（图片轮播图简易版）
一个简易的js图片轮播效果
10-19
主要为大家详细介绍了一个简易的js图片轮播效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
美观实用-带按钮轮播图
06-20
一个简易而又十分美观的带按钮轮播图，鼠标悬停会显示按钮，暂停轮播。鼠标离开则按钮消失，轮播图继续滚动。非常好看哟。
简单轮播图
m0_55132979的博客
04-30 1015
（一）实现的效果 1.点击左右按钮切换图片 （二）基本布局 1.图片横向排列，借助overflow：hidden；让显示区域以外的内容不显示就行了 （三）动画效果 1.通过JS实现动画效果，调用animation()函数 （四）实现无缝切换效果 1.当轮播图翻页时，是完整的一张图均匀翻过去，将第一张图片复制添加到末尾起到过度作用 <!doctype html> <html> <head> <meta charset="utf-8"> <
JS实现简单的轮播图
qsc19971022的博客
09-04 1341
JS实现简单的轮播图 js用面向过程的方法实现简单的轮播图 先写好简单的html布局； 正常轮播图所要实现的功能有一下几个： 1.banner图的自动切换； 2.通过左右按钮来切换banner图； 3.通过banner图下方的小圆点来切换banner图； 然后在使用CSS对页面进行布局： css样式因为时间问题，写的可能有点繁琐，给为小伙伴在阅读或者使用的时候可以自己精简一下。 因为在日常...
JS实战——轮播图
qq_65715980的博客
07-06 3万+
html+css+js实现目前各大网站上轮播图的效果，可以利用我的代码稍加改装就能实现想要的效果。
JS实现简单的轮播图（非常简单，一看就懂）
热门推荐
风丶不会停息
03-15 12万+
主要思路：先将需要轮播的4张图使用绝对定位让其重叠在banner这个盒子中，然后遍历所有的图片将其隐藏，再获取当前图片的index值，根据当前的index值设置当前的图片显示出来。设置间歇定时器setInterval每隔1秒使得index的值加1，如果大于图片个数则index=0，每隔1秒调用changeImg()函数，改变图片的显示。li项的实现原理一样，总的来说就是围绕index的值来进行设置...
js简单实现轮播图效果
qq_45907365的博客
03-29 900
这里将会用js简单实现轮播图的效果。
druid-1.0.11.jar
最新发布
05-21
javaee/javaweb常用jar包，亲测可用，导入到java工程中即可使用
html css js实现简易轮播图
06-28
如何实现简易轮播图？ 要实现简易轮播图，我们需要使用 HTML、CSS 和 JavaScript。 1. 首先，在 HTML 中创建轮播图的容器元素，如 <div class="swiper-container">。 2. 在 CSS 中设置容器元素的宽度和高度，以及...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值