jquery实现呼吸轮播效果
本文实例为大家分享了jquery实现呼吸轮播效果的具体代码，供大家参考，具体内容如下
大概思路：
呼吸轮播就是图片淡入淡出轮播。
div（设置相对定位）里存放ul，li不需要float：left，设置绝对定位即可。left：0，top：0。
此时不需要在所有图片后面补假0.
div里还包括左右按钮，下面小圆点，通过绝对定位，把它们定位到合适位置就好。
设置index为0，点击右按钮时，当前图片淡出，index++，当图片为最后一个的时候，index设置为0，新图片淡入。下面小圆点对应变色。
左按钮思路大致相同。
下面小图片点击的时候，如果点击的和当前显示的index相同，则什么事情都不需要做。
点击其他小圆点的时候，旧的图片淡出，把当前小圆点的index赋值给全局变量index，新图片淡入。
被点击的小圆点变色，其兄弟元素仍然为最初的颜色。
程序：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
*{
margin:0;
padding:0;
}
.big{
width:560px;
height:300px;
position: relative;
margin:200px auto;
border:10px solid red;
}
.big .move{
width:5600px;
height:300px;
position: absolute;
left:0;
top:0;
}
.big .move li{
/*float: left;*/
list-style: none;
display: none;
position: absolute;
top:0;
left:0;
}
.big ul .first{
display: block;
}
img{
width:560px;
height:300px;
}
.btn div{
width:40px;
height:60px;
background: red;
position: absolute;
top:50%;
margin-top:-30px;
}
.rightbtn{
right:0;
}
.circle{
position: absolute;
left:0px;
bottom:0px;
width:200px;
height:30px;
}
.circle ul{
/*overflow: hidden;*/
list-style: none;
float: left;
}
.circleUl li{
background: white;
float: left;
margin-right:10px;
width:20px;
height:20px;
border-radius:50%;
}
</style>
<body>
<div class="big">
<ul class="move">
<li class="first"> <img src="img/0.jpg" alt=""> </li>
<li> <img src="img/1.jpg" alt=""> </li>
<li> <img src="img/2.jpg" alt=""> </li>
<li> <img src="img/3.jpg" alt=""> </li>
</ul>
<div class="btn">
<div class="leftbtn"> < </div>
<div class="rightbtn"> > </div>
</div>
<div class="circle">
<ul class="circleUl">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<script src="js/jquery-1.12.3.min.js"> </script>
<script>
// 设置第一个小圆点为红色
$(".circleUl li").eq(0).css("background","red");
var index = 0;
$(".leftbtn").click(function(){
// 旧的图淡出
$(".move li").eq(index).fadeOut(400);
index--;
if(index<0){
index = 3;
}
// 新图淡入
$(".move li").eq(index).fadeIn(400);
// 对应下标为index的小圆点变色
$(".circleUl li").eq(index).css("background","red").siblings().css("background","white");
});
$(".rightbtn").click(function(){
$(".move li").eq(index).fadeOut(400);
index++;
console.log(index);
if(index ==4 ){
index = 0;
}
$(".move li").eq(index).fadeIn(400);
$(".circleUl li").eq(index).css("background","red").siblings().css("background","white");
});
// 小圆点点击事件
$(".circleUl li").click(function(){
// 如果本来就显示的图一，再次点击第一个小圆点的话，什么也不做
if(index == $(this).index()) return;
// 旧的图片淡出
$(".move li").eq(index).fadeOut(400);
// 点击到哪个小圆点，把小圆点的index赋值给全局变量index （更新全局变量index）
index = $(this).index();
// 新图片淡入
$(".move li").eq(index).fadeIn(400);
// 小圆点变色
$(this).css("background","red").siblings().css("background","white");
})
</script>
</body>
</html>
运行结果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
原生JS实现呼吸轮播图
今天给大家分享一个用原生JS实现的呼吸轮播图,效果如下: 以下是代码实现,欢迎大家复制粘贴. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>原生JS实现呼吸轮播图</title> <style> ul { margin: 0; padding-left: 0; } li { list-style: none; } img {
-
jQuery实现呼吸轮播图
本文实例为大家分享了jQuery实现呼吸轮播图的具体代码,供大家参考,具体内容如下 HTML <div class="all" id='box'> <div class="screen"> <ul> <li><img src="images/01.jpg" width="500" height="200" /></li> <li&
-
jquery实现呼吸轮播效果
本文实例为大家分享了jquery实现呼吸轮播效果的具体代码,供大家参考,具体内容如下 大概思路: 呼吸轮播就是图片淡入淡出轮播. div(设置相对定位)里存放ul,li不需要float:left,设置绝对定位即可.left:0,top:0. 此时不需要在所有图片后面补假0. div里还包括左右按钮,下面小圆点,通过绝对定位,把它们定位到合适位置就好. 设置index为0,点击右按钮时,当前图片淡出,index++,当图片为最后一个的时候,index设置为0,新图片淡入.下面小圆点对应变色. 左按
-
使用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焦点图轮播效果实现方法.分享给大家供大家参考,具体如下: 前面一篇<JS实现焦点图轮播效果的方法详解>详细介绍了JS实现焦点图轮播效果的步骤,这里来分析一下jQuery的相关实现技巧. 核心代码如下: $(function(){ var $next=$(".right"); var $prev=$(".left"); var $list_num=$(".list-num a"); var $banner=$(
-
jQuery实现图片轮播效果代码
整理以前用jQuery实现的图片轮播效果. 1. 不做操作时,自动轮播 2. 鼠标悬浮在图片上时,停止自动轮播,隐藏在图片左右的箭头会显示出来 3. 手动轮播1:鼠标指向图片底部的小标按钮,可以切换对应的图片 4. 手动轮播2:点击左右箭头也可以切换图片 效果图:(PS:用软件捕捉的,不太会弄,感觉图片都失真了) 下面是代码区域: **inde.html部分代码** <div class="box"> <ul class="img">
-
使用jQuery实现图片轮播效果
jQuery是对JavaScript的简化,语法没有太大区别,比较JavaScript更加容易理解,代码量更少. 用jQuery实现图片轮播需要有以下步骤: 1.对图片区域获取,想象中我们所用的图片是按照顺序排列起来,按照一定的时间切换图片的位置来实现轮播 2.对左右两个按钮设置监听,当点击按钮时,要切换到前一张或者后一张 3.对图片底部的小圆点设置监听事件,当点击小圆点时,切换到相应的图片位置,而且小圆点也要点亮 4.对图片整体设置定时器,让图片自己轮播,再设置一个监听函数,让
-
基于JQuery实现图片轮播效果(焦点图)
自己写了一个纯jq形式的横向轮播焦点图,可点击小圆点或者左右按钮进行切换,属于定宽类型.改成自适应宽度的也不难,将css里面的bannerCon宽度改为百分比,再在js里面将ul和li的宽度跟随父级容器的宽度变化即可,需要用到$(window).resize. 兼容到IE6+以上浏览器,有轮播速度和切换间隔两个参数可以改. 效果图如下: Html代码如下: <html> <head> <meta charset="utf-8"> <title&
-
jquery实现焦点轮播效果
HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="./css/lunbo.css" rel="external nofollow" >
-
JQuery实现图片轮播效果
用JQuery操作DOM确实很方便,并且JQuery提供了非常人性化的API应付我们的各种需求,大大简化了js的代码. 制作原理: 这里大概说一下整个流程: 1,将除了第一张以外的图片全部隐藏, 2,获取第一张图片的alt信息显示在信息栏,并添加点击事件 3,为4个按钮添加点击侦听,点击相应的按钮,用fadeOut,fadeIn方法显示图片 4,设置setInterval,定时执行切换函数 代码说明: filter(":visible") :获取所有可见的元素 unbind():从匹配