溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了如何使用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);
}感謝你能夠認真閱讀完這篇文章，希望小編分享的“如何使用jquery實現圖片輪播和滑動效果”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
