jQuery京东轮播图案例（三种实现方式）

其他 2019-05-05 16:15:19 阅读次数: 0

①源码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin:0;
				padding:0;
				font-family:微软雅黑;
				font-size:24px;
			}
			/*框*/
			.div01 {
				width:500px;
				height:300px;
				position:absolute;
				overflow:hidden;
			}
			/*照片框*/
			.div02 {
				width:calc(500px*8);
				height:300px;
				position:absolute;
				z-index:5;
			}
			.slideimg {
				display:none;
			}
			.cimg {
				display:block;
			}
			/*左右键*/
			.abt {
				display:block;
				width:30px;
				height:60px;
				z-index:9;
				opacity:0.3;
				line-height:60px;
				text-align:center;
				background-color:gray;
				color:white;
			}
			#lefta {
				position:absolute;
				left:0px;
				top:40%;
			}
			#righta {
				position:absolute;
				right:0px;
				top:40%;
			}
			.abt:hover {
				opacity:0.6;
				cursor:pointer;
			}
			/**/
			#slideblock {
				padding:3px 3px;
				z-index:20;
				border-radius:8px;
				position:absolute;
				left:25%;
				bottom:20px;
				width:213px;
				height:12px;
				background-color:#eaeaea;
				opacity:0.8;
			}
			#slideblock ol {
				list-style:none;
				float:left;
				width:12px;
				height:12px;
				margin-left:13px;
				border-radius:100%;
				background-color:white;
			}
			#slideblock ol.selected {
				background-color:red;
			}
		</style>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
			    $("#righta").click( //为#lefta绑定了鼠标点击事件处理  
			        function() {
			            //$("XXXXX").attr("id")取标记属性
			            var tid = $(".selected").attr("id");
			            if (tid == "c1") {
			                $("#c1").removeClass("selected");
			                $("#img1").removeClass("cimg");
			                $("#c2").addClass("selected");
			                $("#img2").addClass("cimg");
			            }
			            if (tid == "c2") {
			                $("#c2").removeClass("selected");
			                $("#img2").removeClass("cimg");
			                $("#c3").addClass("selected");
			                $("#img3").addClass("cimg");
			            }
			            if (tid == "c3") {
			                $("#c3").removeClass("selected");
			                $("#img3").removeClass("cimg");
			                $("#c4").addClass("selected");
			                $("#img4").addClass("cimg");
			            }
			            if (tid == "c4") {
			                $("#c4").removeClass("selected");
			                $("#img4").removeClass("cimg");
			                $("#c5").addClass("selected");
			                $("#img5").addClass("cimg");
			            }
			            if (tid == "c5") {
			                $("#c5").removeClass("selected");
			                $("#img5").removeClass("cimg");
			                $("#c6").addClass("selected");
			                $("#img6").addClass("cimg");
			            }
			            if (tid == "c6") {
			                $("#c6").removeClass("selected");
			                $("#img6").removeClass("cimg");
			                $("#c7").addClass("selected");
			                $("#img7").addClass("cimg");
			            }
			            if (tid == "c7") {
			                $("#c7").removeClass("selected");
			                $("#img7").removeClass("cimg");
			                $("#c8").addClass("selected");
			                $("#img8").addClass("cimg");
			            }
			            if (tid == "c8") {
			                $("#c8").removeClass("selected");
			                $("#img8").removeClass("cimg");
			                $("#c1").addClass("selected");
			                $("#img1").addClass("cimg");
			            }
			        }
			    );
			    $("#lefta").click( //为#lefta绑定了鼠标点击事件处理  
			        function() {
			            //$("XXXXX").attr("id")取标记属性
			            var tid = $(".selected").attr("id");
			            if (tid == "c1") {
			                $("#c1").removeClass("selected");
			                $("#img1").removeClass("cimg");
			                $("#c8").addClass("selected");
			                $("#img8").addClass("cimg");
			            }
			            if (tid == "c8") {
			                $("#c8").removeClass("selected");
			                $("#img8").removeClass("cimg");
			                $("#c7").addClass("selected");
			                $("#img7").addClass("cimg");
			            }
			            if (tid == "c7") {
			                $("#c7").removeClass("selected");
			                $("#img7").removeClass("cimg");
			                $("#c6").addClass("selected");
			                $("#img6").addClass("cimg");
			            }
			            if (tid == "c6") {
			                $("#c6").removeClass("selected");
			                $("#img6").removeClass("cimg");
			                $("#c5").addClass("selected");
			                $("#img5").addClass("cimg");
			            }
			            if (tid == "c5") {
			                $("#c5").removeClass("selected");
			                $("#img5").removeClass("cimg");
			                $("#c4").addClass("selected");
			                $("#img4").addClass("cimg");
			            }
			            if (tid == "c4") {
			                $("#c4").removeClass("selected");
			                $("#img4").removeClass("cimg");
			                $("#c3").addClass("selected");
			                $("#img3").addClass("cimg");
			            }
			            if (tid == "c3") {
			                $("#c3").removeClass("selected");
			                $("#img3").removeClass("cimg");
			                $("#c2").addClass("selected");
			                $("#img2").addClass("cimg");
			            }
			            if (tid == "c2") {
			                $("#c2").removeClass("selected");
			                $("#img2").removeClass("cimg");
			                $("#c1").addClass("selected");
			                $("#img1").addClass("cimg");
			            }
			        }
			    );			
			    //setInterval('$( "#righta" ).click()',2000);			
			    $("#divslide").mouseenter( // hover 动作=mouseenter + mouseleave两个动作
			        function() {
			            $("#lefta").css("display", "inline-block");
			            $("#righta").css("display", "inline-block");
			        }
			    );			
			    $("#divslide").mouseleave(
			        function() {
			            //alert('r');
			            $("#lefta").css("display", "none");
			            $("#righta").css("display", "none");
			        }
			    );			
			    $("#righta").mouseenter( // hover 动作=mouseenter + mouseleave两个动作
			        function() {
			            $("#lefta").css("display", "inline-block");
			            $("#righta").css("display", "inline-block");
			        }
			    );			
			    $("#lefta").mouseenter( // hover 动作=mouseenter + mouseleave两个动作
			        function() {
			            $("#lefta").css("display", "inline-block");
			            $("#righta").css("display", "inline-block");
			        }
			    );			
			});
		</script>
	</head>
	<body>
		<div class="div01">
			<div class="div02">
		    	<img id="img1" class="slideimg cimg" src="img京东/1.jpg">        
		        <img id="img2" class="slideimg" src="img京东/2.jpg">        
		        <img id="img3" class="slideimg" src="img京东/3.jpg">        
		        <img id="img4" class="slideimg" src="img京东/4.jpg">        
		        <img id="img5" class="slideimg" src="img京东/5.jpg">        
		        <img id="img6" class="slideimg" src="img京东/6.jpg">        
		        <img id="img7" class="slideimg" src="img京东/7.jpg">        
		        <img id="img8" class="slideimg" src="img京东/8.jpg">       
		    </div>
		    <a id="lefta" class="abt">＜</a>
		    <a id="righta" class="abt">＞</a>
		    <div id="slideblock">
		        <ul>
		            <ol id="c1" class="selected"></ol>
		            <ol id="c2"></ol>
		            <ol id="c3"></ol>
		            <ol id="c4"></ol>
		            <ol id="c5"></ol>
		            <ol id="c6"></ol>
		            <ol id="c7"></ol>                                                                        
		            <ol id="c8"></ol>
		        </ul>
		    </div>
		</div>
	</body>
</html>

样图：
在这里插入图片描述
②源码（JavaScript）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#banner{
				height: 350px;
				width: 650px;
				margin: auto;
				position: relative;
			}
			.arr-l,.arr-r{
				width: 30px;
				height: 60px;
				color: #fff;
				font-size: 25px;
				text-align: center;
				line-height: 60px;
				background: rgba(0,0,0,.3);
				position: absolute;
				top: 50%;
				margin-top: -50px;
				z-index: 1;
			}
			.arr-l{
				left: 0;
			}
			.arr-r{
				right: 0;
			}
			img{
				position: absolute;
			}
		</style>
		<script type="text/javascript">
			var i=1;
			function left(){
				i--;
				if(i==0){
					i=8;
				}
				document.getElementsByTagName('img')[0].src="img京东/"+i+".jpg";
			}
			function right(){
				i++;
				if(i>8){
					i=1;
				}
				document.getElementsByTagName('img')[0].src="img京东/"+i+".jpg";
			}
		</script>
	</head>
	<body>
		<div id="banner">
			<a href="#" class="arr-l" "left();"><</a>
			<img src="img京东/1.jpg" style="width: 650px; height: 350px;">
			<a href="#" class="arr-r" "right();">></a>
		</div>
	</body>
</html>

③源码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
	            margin: 0;
	            padding: 0;
	            list-style: none;
	        }
	        .slider {
	            height: 350px;
				width: 650px;
	            margin: 100px auto;
	            position: relative;
	        }
            .slider li {
                position: absolute;
                display: none;
            }
            .slider li:first-child {
                display: block;
            }
	        .arrow {
	        	position: relative;
	            display: none;
	        }
	        .slider:hover .arrow {
	            display: block;
	        }
	        .arrow-left,.arrow-right {
	            font-family: "SimSun", "宋体";
	            width: 30px;
	            height: 60px;
	            background-color: rgba(0, 0, 0, 0.1);
	            position: absolute;
				top: 170px;
	           /* margin-top: -30px;*/
	            cursor: pointer;
	            text-align: center;
	            line-height: 60px;
	            color: #fff;
	            font-weight: 700;
	            font-size: 30px;
	        }
            .arrow-left:hover,.arrow-right:hover {
                background-color: rgba(0, 0, 0, .5);
            }
	        .arrow-left {
	            left: 0;
	        }
	        .arrow-right {
	            right: 0;
	        }
	        .slider img{
	        	height: 350px;
				width: 650px;
	        }
		</style>
	</head>
	<body>
		 <div class="slider">
	        <ul>
	            <li><a href="#"><img src="img京东/1.jpg" alt=""></a></li>
	            <li><a href="#"><img src="img京东/2.jpg" alt=""></a></li>
	            <li><a href="#"><img src="img京东/3.jpg" alt=""></a></li>
	            <li><a href="#"><img src="img京东/4.jpg" alt=""></a></li>
	            <li><a href="#"><img src="img京东/5.jpg" alt=""></a></li>
	            <li><a href="#"><img src="img京东/6.jpg" alt=""></a></li>
	            <li><a href="#"><img src="img京东/7.jpg" alt=""></a></li>
	            <li><a href="#"><img src="img京东/8.jpg" alt=""></a></li>
	        </ul> 
	        <!--箭头-->
	        <div class="arrow">
	            <span class="arrow-left">&lt;</span>
	            <span class="arrow-right">&gt;</span>
	        </div>
   		</div>
   		<script src="js/jquery-3.3.1.js"></script>
   		<script>
   			$(function(){
   				var count=0;
   				$(".arrow-left").click(function(){
   					count--;
   					if(count==-1){
   						count=$(".slider li").length-1;
   					}
   					//fadeIn():通过不透明度的变化来实现所有匹配元素的淡入效果
   					//fadeOut():通过不透明度的变化来实现所有匹配元素的淡出效果
   					//让coubnt渐渐的显示其他的渐渐的隐藏
   					$(".slider li").eq(count).fadeIn().siblings("li").fadeOut();
   				});
   				$(".arrow-right").click(function(){
   					count++;
   					if(count==$(".slider li").length){
   						count=0;	
   					}
   					$(".slider li").eq(count).fadeIn().siblings("li").fadeOut();
   				});
   			});
   		</script>
	</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_43434300/article/details/88992183
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022