这篇文章主要介绍了如何使用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(){ fn(); }); //prev处理 $(".prev").click(function(){ //1.获取当前选中的元素 var index = $("input[type='radio']:checked").val(); //input：基本选择其当中的元素选择器 if(index == 0){ index = imglist.length-1; }else{ index--; } change(index); }); //radio处理 $("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"; .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实现图片轮播和滑动效果”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网行业资讯频道，更多相关知识等着你来学习!
