jquery實現圖片輪播和滑動效果

Posted on by

本文實例為大傢分享瞭jquery實現圖片輪播和滑動效果的具體代碼，供大傢參考，具體內容如下

實習做瞭一個簡易的圖片輪播效果

下圖是做出來的效果

源碼

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.冗餘處理，避免冗餘，同樣的代碼盡量用函數封裝調用

以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：