jquery實現(xiàn)圖片輪播和滑動效果

更新時間：2022年01月14日 14:19:38 作者：EEEchoy

這篇文章主要為大家詳細介紹了jquery實現(xiàn)圖片輪播和滑動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了jquery實現(xiàn)圖片輪播和滑動效果的具體代碼，供大家參考，具體內(nèi)容如下

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

下圖是做出來的效果

源碼

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) {
? //圖片路徑（放入數(shù)組）
? 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對象不能調(diào)用jquery對象
?? ??? ? //$("input[type='radio']")[index].prop("checked",true); //錯誤
?? ??? ??
?? ??? ? //javascript對象去調(diào)用
?? ??? ? //$("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:調(diào)用的處理函數(shù) ?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);
?? ?}