jquery实现图片轮播和滑动效果

本文实例为大家分享了jquery实现图片轮播和滑动效果的具体代码，供大家参考，具体内容如下

实习做了一个简易的图片轮播效果

下图是做出来的效果

源码

setIntehttps://www.easck.com/rval(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=FBjpkgjt'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方法，使用时注意判断当前对象是jwww.easck.coms还是jquery

4.冗余处理，避免冗余，同样的代码尽量用函数封装调用

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。