如何使用jquery实现图片轮播和滑动效果
如何使用jquery实现图片轮播和滑动效果
这篇文章主要介绍了如何使用jquery实现图片轮播和滑动效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
具体内容如下
实习做了一个简易的图片轮播效果
下图是做出来的效果
源码
html 和 js部分
<!doctypehtml><html><head><metacharset="utf-8"><title>无标题文档</title><linktype="text/css"rel="stylesheet"href="css/main.css"><scriptsrc="jquery-3.3.1.js"></script></head><body><divclass="container"><imgsrc="img/left.png"class="prev"><imgsrc="img/1.jpg"alt="图片不能正常显示"class="img1"/><imgsrc="img/right.png"class="next"><divclass="rdodiv"><inputtype="radio"name="rdo"value="0"checked><inputtype="radio"name="rdo"value="1"><inputtype="radio"name="rdo"value="2"><inputtype="radio"name="rdo"value="3"><inputtype="radio"name="rdo"value="4"></div></div><script>$(document).ready(function(e){//图片路径（放入数组）varimglist=["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']：复合选择器交集varindex=$("input[type='radio']:checked").val();//input：基本选择其当中的元素选择器//测试用console.log(index)//console.log(index);//2.下一个元素的index//如果三最后一个元素index设置为0//如果不是，则index设置为index+1if(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.获取当前选中的元素varindex=$("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()varindex=$("input[type='radio']:checked").val();$(".img1").attr("src",imglist[index]);});//定时刷新//setInderval(fn,time)//fn:调用的处理函数time：间隔时间（毫秒为单位）setInterval(fn,1500);functionfn(){varindex=$("input[type='radio']:checked").val();index=(parseInt(index)+1)%imglist.length;//3.修改image的srcchange(index);}functionchange(index){$(".img1").attr("src",imglist[index]);$($("input[type='radio']")[index]).prop("checked",true);}});</script></body></html>
css部分:
@charset"utf-8";/*CSSDocument*/.img1{width:850px;height:600px;border-radius:5%;}.container{position:relative;/*设置高度和宽度为了单选框能够上去*/width:850px;height:600px;margin:0pxauto;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;}.rdodivinput{transform:scale(1.8);width:30px;}.rdodivinput:hover{transform:scale(2.5);}
感谢你能够认真阅读完这篇文章，希望小编分享的“如何使用jquery实现图片轮播和滑动效果”这篇文章对大家有帮助，同时也希望大家多多支持恰卡编程网，关注恰卡编程网行业资讯频道，更多相关知识等着你来学习!
