jquery实现图片轮播和滑动

最新推荐文章于 2021-11-10 17:19:03 发布

EEEchoy

最新推荐文章于 2021-11-10 17:19:03 发布

阅读量712

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery

本文链接：https://blog.youkuaiyun.com/weixin_40448659/article/details/81123884

jquery 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS和JavaScript实现的简易图片轮播效果，包括左右切换按钮和指示器，通过jQuery简化DOM操作，实现了自动播放功能。

实习做了一个简易的图片轮播效果

下图是做出来的效果

源码

html 和 js部分

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link type="text/css" rel="stylesheet" href="css/main.css">
<script src="jquery-3.3.1.js"></script>
</head>

<body>

   <div class="container">
       <img src="img/left.png" class="prev">
       <img src="img/1.jpg" alt="图片不能正常显示" class="img1"/>
       <img src="img/right.png" class="next">
       <div class="rdodiv">
       <input type="radio" name="rdo" value="0" checked>
       <input type="radio" name="rdo" value="1">
       <input type="radio" name="rdo" value="2">
       <input type="radio" name="rdo" value="3">
       <input type="radio" name="rdo" value="4">
       </div>
   </div>
<script>
  $(document).ready(function(e) {
  //图片路径（放入数组）
  var imglist = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];
 

     //next处理
	/* $(".next").click(function(){
		 //1.获取当前选中的元素
		 // html(),text(),val()表单元素用val
		
		 //input：基本选择其当中的元素选择器 [type='radio']：基本选择器 
		 //input[type='radio']：复合选择器交集
		 var index = $("input[type='radio']:checked").val();  //input：基本选择其当中的元素选择器 
		 //测试用  console.log(index)
		   // console.log(index);
		 
		 //2.下一个元素的index
		 //如果三最后一个元素 index设置为0
		 //如果不是，则index设置为 index+1
		 if(index == imglist.length-1){
		    index = 0;
		 }else{
			 index++;
			 }
		 
		 
		 //3.修改image的src
		 $(".img1").attr("src",imglist[index]);
		 
		 //4.修改radio的选择项
		 //单标签属性
		 ///javascript对象不能调用jquery对象
		 //$("input[type='radio']")[index].prop("checked",true); //错误
		 
		 //javascript对象去调用
		 //$("input[type='radio']")[index].checked=true; 
		 
		 $($("input[type='radio']")[index]).prop("checked",true);
		 });*/
	
	 $(".next").click(function(){
		   fn();
		 });
		 
	 //prev处理
	 $(".prev").click(function(){
		 //1.获取当前选中的元素
		 var index = $("input[type='radio']:checked").val();  //input：基本选择其当中的元素选择器 
		
		 
		 if(index == 0){
		    index = imglist.length-1;
		 }else{
			 index--;
			 }
		/* 
		 //3.修改image的src
		 $(".img1").attr("src",imglist[index]);
		 
		 //4.修改radio的选择项
		$("input[type='radio']")[index].checked=true; 
		 
		 $($("input[type='radio']")[index]).prop("checked",true);
		 
		 */
		 change(index);
		 });	 
	 
        //radio处理
	    /* $("input[type='radio']").mouseover(function(){
		    $(this).attr('checked','true');
		    });
	    */
	
	     $("input[type='radio']").mouseover(function(){
		    $(this).prop("checked",true);
	        //具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop(),其他的使用attr()	   
		 
		    var index = $("input[type='radio']:checked").val();  
		    $(".img1").attr("src",imglist[index]);
		  
		 });
		 
		  //定时刷新
	 
	 //setInderval(fn,time)
	 // fn:调用的处理函数  time：间隔时间（毫秒为单位）
	
  	 setInterval(fn,1500);
	 function fn(){
		   var index = $("input[type='radio']:checked").val();
		   
		  index =(parseInt(index) + 1)%imglist.length; 
		 
		  //3.修改image的src
		  change(index);
	  }
	  function change(index){
		     $(".img1").attr("src",imglist[index]);
		  
		  $($("input[type='radio']")[index]).prop("checked",true);
	  }
		 

  });
  	
  
</script>

</body>
</html>

css部分:

@charset "utf-8";
/* CSS Document */

.img1{
	width:850px;
	height:600px;
	border-radius:5%;
	}
	
.container{
	position:relative;
    /*设置高度和宽度为了单选框能够上去*/
    width:850px;
	height:600px;

	margin:0px auto;
	padding:0px;
	border-radius:10%;
	top:100px;}

/*左箭头*/
.prev{
	position:absolute;
	top:270px;
	left:5px;
	width:70px;
	opacity:0.30;
	}
.prev:hover{
	transform:scale(1.1);
	opacity:1.0;}

/*右箭头*/	
.next{
	position:absolute;
	top:270px;
	right:5px;
	width:70px;
	opacity:0.30;}
.next:hover{
	transform:scale(1.1);
	opacity:1;
	 }

.rdodiv{
	position:absolute;
	bottom:30px;
	z-index:999;
	left:320px;}
.rdodiv input{
	transform: scale(1.8);
	width:30px;}
.rdodiv input:hover{
	transform: scale(2.5);
	}