如何使用jquery實(shí)現(xiàn)圖片輪播和滑動(dòng)效果

發(fā)布時(shí)間：2022-01-14 16:44:40 來(lái)源：億速云閱讀：226 作者：小新欄目：開(kāi)發(fā)技術(shù)

這篇文章主要介紹了如何使用jquery實(shí)現(xiàn)圖片輪播和滑動(dòng)效果，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

具體內(nèi)容如下

實(shí)習(xí)做了一個(gè)簡(jiǎn)易的圖片輪播效果

下圖是做出來(lái)的效果

如何使用jquery實(shí)現(xiàn)圖片輪播和滑動(dòng)效果

源碼

html 和 js部分

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無(wú)標(biāo)題文檔</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) {
  //圖片路徑（放入數(shù)組）
  var imglist = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];
 
 
     //next處理
    /* $(".next").click(function(){
         //1.獲取當(dāng)前選中的元素
         // html(),text(),val()表單元素用val
        
         //input：基本選擇其當(dāng)中的元素選擇器 [type='radio']：基本選擇器 
         //input[type='radio']：復(fù)合選擇器交集
         var index = $("input[type='radio']:checked").val();  //input：基本選擇其當(dāng)中的元素選擇器 
         //測(cè)試用  console.log(index)
           // console.log(index);
         
         //2.下一個(gè)元素的index
         //如果三最后一個(gè)元素 index設(shè)置為0
         //如果不是，則index設(shè)置為 index+1
         if(index == imglist.length-1){
            index = 0;
         }else{
             index++;
             }
         
         
         //3.修改image的src
         $(".img1").attr("src",imglist[index]);
         
         //4.修改radio的選擇項(xiàng)
         //單標(biāo)簽屬性
         ///javascript對(duì)象不能調(diào)用jquery對(duì)象
         //$("input[type='radio']")[index].prop("checked",true); //錯(cuò)誤
         
         //javascript對(duì)象去調(diào)用
         //$("input[type='radio']")[index].checked=true; 
         
         $($("input[type='radio']")[index]).prop("checked",true);
         });*/
    
     $(".next").click(function(){
           fn();
         });
         
     //prev處理
     $(".prev").click(function(){
         //1.獲取當(dāng)前選中的元素
         var index = $("input[type='radio']:checked").val();  //input：基本選擇其當(dāng)中的元素選擇器 
        
         
         if(index == 0){
            index = imglist.length-1;
         }else{
             index--;
             }
        /* 
         //3.修改image的src
         $(".img1").attr("src",imglist[index]);
         
         //4.修改radio的選擇項(xiàng)
        $("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 兩個(gè)屬性的屬性，如 checked, selected 或者 disabled 使用prop(),其他的使用attr()       
         
            var index = $("input[type='radio']:checked").val();  
            $(".img1").attr("src",imglist[index]);
          
         });
         
          //定時(shí)刷新
     
     //setInderval(fn,time)
     // fn:調(diào)用的處理函數(shù)  time：間隔時(shí)間（毫秒為單位）
    
       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;
    /*設(shè)置高度和寬度為了單選框能夠上去*/
    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);
    }

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“如何使用jquery實(shí)現(xiàn)圖片輪播和滑動(dòng)效果”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

向AI問(wèn)一下細(xì)節(jié)

如何使用jquery實(shí)現(xiàn)圖片輪播和滑動(dòng)效果

源碼

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽