jquery实现图片轮播和滑动效果
更新时间：2022年01月14日 14:19:38 作者：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.冗余处理，避免冗余，同样的代码尽量用函数封装调用
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了dreamweaver 8实现Jquery自动提示的方法,需要的朋友可以参考下2014-12-12
最近做了这样一个功能，让用户输入手机发送验证码，输完11位手机号后，自动隐藏键盘。下面通过本文给大家分享实现方法，一起看看吧2017-01-01
这篇文章主要为大家详细介绍了基于jquery实现五子棋游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
这篇文章主要介绍了jQuery中focus事件用法,以实例形式分析了获取焦点时focus事件的使用技巧,具有一定的参考借鉴价值,需要的朋友可以参考下2014-12-12
jQuery Ajax Post 回调函数不执行问题的解决方法
本文是小编给大家带来的jQuery Ajax Post 回调函数不执行的原因及解决方法，在本文最下面还给大家附加jquery Ajax 不执行回调函数success的原因，这两个问题都非常多见，感兴趣的朋友一起看下吧2016-08-08
jQuery源码分析-04 选择器-Sizzle-工作原理分析
在分析Sizzle源码之前，先整理一下选择器的工作原理，先明确一些选择器中用到的名词，后边阅读时不会有歧义2011-11-11
这篇文章主要介绍了CSS+jQuery实现简单的折叠菜单的代码，非常不错，具有参考借鉴价值，需要的朋友参考下吧2016-12-12
利用jQuery的deferred对象实现异步按顺序加载JS文件
如果你现在对jQuery中的deferred还不了解,jQuery的deferred对象详解一文接下来介绍deferred对象如何实现异步顺序加载JS文件，感兴趣的你可以参考下哈2013-03-03
延迟执行在某些特殊的情况下还是蛮有用的，实现的方法也很简单，本文有个不错的示例，有需要的朋友可以参考下，希望对大家有所帮助2013-08-08
这里所说的浮动工具栏就是大家平时看到的社交网络分享按钮栏那样的效果,可以做成浮动效果且能上下移动,这里我们就来看一个使用jQuery制作页面工具边栏的实例分享.2016-05-05
最新评论