jquery实现图片轮播和滑动效果
作者:EEEchoy
这篇文章主要为大家详细介绍了jquery实现图片轮播和滑动效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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); }
总结
1.prop 和 attr
具有 true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop(),其他的使用attr()
2.定时刷新
setInderval(fn,time)
fn:调用的处理函数 time:间隔时间(毫秒为单位)
3.javascript对象不能调用jquery方法,使用时注意判断当前对象是js还是jquery
4.冗余处理,避免冗余,同样的代码尽量用函数封装调用
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。