这篇文章主要介绍了如何使用Jquery实现图片轮播和滑动效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。具体内容如下实习做了一个简易的图片轮播效果下图是做出来的效果源码ht
这篇文章主要介绍了如何使用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实现图片轮播和滑动效果”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网精选频道，更多相关知识等着你来学习!
--结束END--
本文标题: 如何使用jquery实现图片轮播和滑动效果
本文链接: https://www.lsjlt.com/news/307107.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-15
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0