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.冗余处理，避免冗余，同样的代码尽量用函数封装调用
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
Flexslider是一款基于的jQuery内容滚动插件.它能让你轻松的创建内容滚动的效果,具有非常高的可定制性.开发者可以使用Flexslider轻松创建各种图片轮播效果.焦点图效果.图文混排滚动效果. 下载源码 Flexslider具有以下特性: 支持滑动和淡入淡出效果. 支持水平.垂直方向滑动. 支持键盘方向键控制. 支持触控滑动. 支持图文混排,支持各种html元素. 自适应屏幕尺寸. 可控制滑动单元个数. 更多选项设置和回调函数. HTML 首先在页面head部位载入jquery库文件
-
jQuery手指滑动轮播效果
备注 : 需要引入对应js 下面给大家分享下实现代码,具体代码如下所示: <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="js/jquery.event.drag-1.5.min.js"></script> <s
-
jQuery实现的3D版图片轮播示例【滑动轮播】
本文实例讲述了jQuery实现的3D版图片轮播.分享给大家供大家参考,具体如下: 这个是用了3张图,来回滑动,类似一个圆圈(不晓得这个 怎么上动图啊!!!!) 图就是这么个图,但是他是可以滑动的(不好描述啊!!) 贴代码比较方便... <div class="banner"> <div class="banner_li left"> <img src="2.jpg" /> </div> <di
-
jquery实现左右滑动式轮播图
本文实例为大家分享了jquery左右滑动轮播图的具体代码,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="js/jquery-1.10.2.min.js"><
-
jquery实现图片轮播和滑动效果
本文实例为大家分享了jquery实现图片轮播和滑动效果的具体代码,供大家参考,具体内容如下 实习做了一个简易的图片轮播效果 下图是做出来的效果 源码 html 和 js部分 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <link type="text/css" rel="sty
-
原生js和jquery实现图片轮播淡入淡出效果
图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成js使用,其实也就是用js原生模拟出这些用法. 但不管怎样,构造一个最基本的表现层是必须的 简单的图片轮播一般由几个部分构成. 对于淡入淡出式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式) 4.然后
-
使用JQuery实现图片轮播效果的实例(推荐)
[效果如图] [原理简述] 这里大概说一下整个流程: 1,将除了第一张以外的图片全部隐藏, 2,获取第一张图片的alt信息显示在信息栏,并添加点击事件 3,为4个按钮添加点击侦听,点击相应的按钮,用fadeOut,fadeIn方法显示图片 4,设置setInterval,定时执行切换函数 [代码说明] filter(":visible") :获取所有可见的元素 unbind():从匹配的元素中删除绑定的事件 siblings:取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元
-
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
本文实例讲述了jQuery实现图片轮播效果代码.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <he
-
使用jQuery实现图片轮播效果
jQuery是对JavaScript的简化,语法没有太大区别,比较JavaScript更加容易理解,代码量更少. 用jQuery实现图片轮播需要有以下步骤: 1.对图片区域获取,想象中我们所用的图片是按照顺序排列起来,按照一定的时间切换图片的位置来实现轮播 2.对左右两个按钮设置监听,当点击按钮时,要切换到前一张或者后一张 3.对图片底部的小圆点设置监听事件,当点击小圆点时,切换到相应的图片位置,而且小圆点也要点亮 4.对图片整体设置定时器,让图片自己轮播,再设置一个监听函数,让
-
jQuery的图片轮播插件PgwSlideshow使用详解
0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键实现图片切换:下方为要轮播的所有图片的缩略图展示,可直接单击缩略图快速切换图片. PgwSlideshow主要有以下特点: •体验度很好的响应式设计 •支持桌面及移动设备 •身形矫健,压缩后的文件只有不到4KB •你可以自定义或者直接修改基本的css样式来给你想要的轮播插件美个容 PgwSlides
-
jQuery超精致图片轮播幻灯片特效代码分享
本文实例讲述了jQuery超精致图片轮播幻灯片特效.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现超精致图片轮播幻灯片特效代码,实现过程很简单. 运行效果图: -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. (1)在head区域引入CSS样式: <link href="styles/97zzw.css"
-
简单的jQuery banner图片轮播实例代码
朋友给我看了一个轮播效果,把js下载一看,丫丫的一个这么简单的效果,这么的就能写个几百行的,严重影响浏览器加载速度嘛,以为人家宽带流量不要钱玩的哦..无奈之下给他写了个简单的,把所有代码放上去都没有超过70行,还有圆角的那个CSS,不是每个浏览器都是圆角的,不过不影响美观,嘻嘻. 先给大家展示下效果图: <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>无标题页</title&
-
js图片轮播手动切换效果
利用ScrollPicLeft.js这个库实现图片的前后切换,适用于网页中的证书展示.推荐商品之类的栏目.它不像传统的marquee滚动那样,而是可以手动的去点击前后切换箭头按钮,进行图片的翻页,从而达到浏览上一张,下一张的效果. 不需要调用jquery,初始化简单,使用非常的简单,便利. 实例效果: js代码: <script type="text/javascript"> var scrollPhoto = new ScrollPicleft(); scrollPhot
-
原生JS实现图片轮播与淡入效果的简单实例
最近对css的兴趣提不起来,因为以前对图片轮播一直耿耿于怀苦于学艺不精,所以,花了点时间熟悉了一下js.然后一条道走到黑,用jquery和js写了一下轮播和图片淡入的效果.以后学习的路很长,希望自己在前端的路上越走越远`(∩_∩)′ 从原理来讲,网上的教程有很多,简单来说. 淡入淡出,其实这里只用到了淡入的效果.每一张淡入的图片,我们将它的display设置为block,其他为none,所以实际存在并且在文档流占位置的只有一张图片.在设置图片的display方式之前,将图片的透明度逐渐增大,就会