jquery图片轮播和滑动效果

时间:2022-05-23 EEEchoy 人气:0

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

下图是做出来的效果

源码

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);
    }

总结

1.prop 和 attr

具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop(),其他的使用attr()

2.定时刷新

setInderval(fn,time)
fn:调用的处理函数 time：间隔时间（毫秒为单位）

3.javascript对象不能调用jquery方法，使用时注意判断当前对象是js还是jquery

4.冗余处理，避免冗余，同样的代码尽量用函数封装调用

加载全部内容