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

本文例項為大家分享了實現圖片輪播和滑動效果的具體程式碼，供大家參考，具體內容如下

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

下圖是做出來的效果

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

原始碼

html 和部分

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文件</title>
<link type="text/" 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：基本選擇其當中的元素選擇TPmMuQ 
器
   //測試用 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的選擇項
   //單標籤屬性
   ///物件不能呼叫jquery物件
   //$("input[type='radio']")[index].prop("checked",true); //錯誤
  
   //script物件去呼叫
   //$("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(functi客棧 
on(){
    $(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{
 posithttp://www.cppcns.comion: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,其他的使用attr()

2.定時重新整理

setInderval(fn,time)
fn:呼叫的處理函式 time：間隔時間（毫秒為單位）

3.javascript物件不能呼叫jquery方法，使用時注意判斷當前物件是js還是jquery

4.冗餘處理，避免冗餘，同樣的程式碼儘量用函式封裝呼叫

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。

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

原始碼

總結

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

jQuery外掛實現圖片輪播效果

Axure如何實現圖片輪播效果！三分鐘搞定！

jQuery實現簡單輪播圖效果

jquery實現呼吸輪播效果

原生javascript實現圖片輪播效果程式碼

iOS實現圖片輪播器

Vue實現圖片輪播元件思路及例項解析

JS元件庫AlloyTouch實現圖片輪播元件過程解析

QT實現圖片輪播

WPF實現圖片輪播

JS實現無限輪播無倒退效果

WPF+AduSkin實現圖片輪播

html簡單元件（七）：transform實現圖片輪播

element 走馬燈實現圖片輪播

原生JS實現圖片輪播 JS實現小廣告外掛

html+js實現圖片輪播

jQuery實現呼吸輪播圖

直播平臺製作，依靠C語言實現圖片輪播

線上直播系統原始碼，利用css和html實現首頁圖片輪播效果

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

原始碼

總結

相關推薦