html:

<div class="middle_right">
<div id="lunbobox">
<div id="toleft">
&lt;</div>
<div class="lunbo">
<a href="#"><img src="http://www.jq22.com/img/cs/500x300a.png"></a>
<a href="#"><img src="http://www.jq22.com/img/cs/500x300b.png"></a>
<a href="#"><img src="http://www.jq22.com/img/cs/500x300c.png"></a>
<a href="#"><img src="http://www.jq22.com/img/cs/500x300d.png"></a>
<a href="#"><img src="http://www.jq22.com/img/cs/500x300.png"></a>
</div>
<div id="toright">&gt;</div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<span></span>
</div>
</div>

css:

#lunbobox {
width:500px;
height:300px;
position:relative;
}
.lunbo {
width:500px;
height:300px;
}
.lunbo img {
width:500px;
height:300px;
position:absolute;
top:0px;
left:0px;
}
#lunbobox ul {
width:285px;
position:absolute;
bottom:10px;
right:0px;
z-index:;
}
#lunbobox ul li {
cursor:pointer;
width:10px;
height:4px;
border:1px solid #cccccc;
float:left;
list-style:none;
background:#cccccc;
text-align:center;
margin:0px 5px 0px 0px;
}
#toleft {
display:none;
width:30px;
height:100px;
font-size:40px;
line-height:100px;
text-align:center;
color:#f4f4f4;
/*background:#cccccc;
*/
/*background:url("../images/toleft.jpg")no-repeat center;
*/
position:absolute;
top:90px;
left:12px;
cursor:pointer;
z-index:;
opacity:0.4;
}
#toright {
display:none;
width:30px;
height:100px;
font-size:40px;
line-height:100px;
text-align:center;
color:#f4f4f4;
/*background:#cccccc;
*/
position:absolute;
top:90px;
right:0px;
cursor:pointer;
z-index:;
opacity:0.4;
}

js:

///轮播
$(function() {
//$("#toright").hide();
//$("#toleft").hide();
$('#toright').hover(function() {
$("#toleft").hide()
}, function() {
$("#toleft").show()
})
$('#toleft').hover(function() {
$("#toright").hide()
}, function() {
$("#toright").show()
})
}) var t;
var index = ;
/////自动播放
t = setInterval(play, ) function play() {
index++;
if (index > ) {
index =
}
// console.log(index)
$("#lunbobox ul li").eq(index).css({
"background": "#999",
"border": "1px solid #ffffff"
}).siblings().css({
"background": "#cccccc",
"border": ""
}) $(".lunbo a ").eq(index).fadeIn().siblings().fadeOut();
}; ///点击鼠标 图片切换
$("#lunbobox ul li").click(function() { //添加 移除样式
//$(this).addClass("lito").siblings().removeClass("lito"); //给当前鼠标移动到的li增加样式 且其余兄弟元素移除样式 可以在样式中 用hover 来对li 实现
$(this).css({
"background": "#999",
"border": "1px solid #ffffff"
}).siblings().css({
"background": "#cccccc"
})
var index = $(this).index(); //获取索引 图片索引与按钮的索引是一一对应的
// console.log(index); $(".lunbo a ").eq(index).fadeIn().siblings().fadeOut(); // siblings 找到 兄弟节点(不包括自己)
}); /////////////上一张、下一张切换
$("#toleft").click(function() {
index--;
if (index <= ) //判断index<0的情况为:开始点击#toright index=0时 再点击 #toleft 为负数了 会出错
{
index =
}
console.log(index);
$("#lunbobox ul li").eq(index).css({
"background": "#999",
"border": "1px solid #ffffff"
}).siblings().css({
"background": "#cccccc"
}) $(".lunbo a ").eq(index).fadeIn().siblings().fadeOut(); // siblings 找到 兄弟节点(不包括自己)必须要写
}); // $("#imgbox a ")获取到的是一个数组集合 。所以可以用index来控制切换 $("#toright").click(function() {
index++;
if (index > ) {
index =
}
console.log(index);
$(this).css({
"opacity": "0.5"
})
$("#lunbobox ul li").eq(index).css({
"background": "#999",
"border": "1px solid #ffffff"
}).siblings().css({
"background": "#cccccc"
})
$(".lunbo a ").eq(index).fadeIn().siblings().fadeOut(); // siblings 找到 兄弟节点(不包括自己)
});
$("#toleft,#toright").hover(function() {
$(this).css({
"color": "black"
})
},
function() {
$(this).css({
"opacity": "0.3",
"color": ""
})
})
/// ///////鼠标移进 移出
$("#lunbobox ul li,.lunbo a img,#toright,#toleft ").hover(
////////鼠标移进
function() {
$('#toright,#toleft').show()
clearInterval(t); },
///////鼠标移开
function() {
//$('#toright,#toleft').hide()
//alert('aaa')
t = setInterval(play, ) function play() {
index++;
if (index > ) {
index =
}
$("#lunbobox ul li").eq(index).css({
"background": "#999",
"border": "1px solid #ffffff"
}).siblings().css({
"background": "#cccccc"
})
$(".lunbo a ").eq(index).fadeIn().siblings().fadeOut();
}
})

最简单的jQuery轮播图(原理解析)的更多相关文章

  1. 超级简单的jquery轮播图demo

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. 简单实现jquery轮播图

    首先需要定义个切换图片的funcation ##### 1.找到图片所在li,将其显示出来,并缩放1.1倍 ##### 2.其他兄弟li,渐变隐藏,并还原至原大小比例 ##### 3.将底部的圆点列表 ...

  3. 前端(十七)—— jQuery基础:jQuery的基本使用、JQ功能概括、JS对象与JQ对象转换、Ajax简单应用、轮播图

    jQuery的基本使用.JQ功能概括.JS对象与JQ对象转换.Ajax简单应用.轮播图 一.认识jQuery 1.什么是jQuery jQuery是对原生JavaScript二次封装的工具函数集合 j ...

  4. 一步一步拆解一个简单的iOS轮播图(三图)

    导言(可以不看): 不吹不黑,也许是东半球最简单的iOS轮播图拆分注释(讲解不敢当)了(tree new bee).(一句话包含两个人,你能猜到有谁吗?提示:一个在卖手机,一个最近在卖书)哈哈... ...

  5. jQuery轮播图(手动点击轮播)

    下面来看看最终做的手动点击轮播效果: 一.原理说明 (1)首先是轮播图的架构,我采用了一个最外边的大div包住两个小div,一个小div里面放四张图片,另一个小div里面放四个数字按钮 (2)对最外边 ...

  6. jQuery轮播图(二)利用构造函数和原型创建对象以实现继承

    本文是在我开始学习JavaScript继承时,对原型继承的一些理解和运用.文中所述的继承方式均是使用js特有的原型链方式,实际上有了ES6的类之后,实现继承的就变得十分简单了,所以这种写法现在也不在推 ...

  7. jQuery轮播图(一)轮播实现并封装

    利用面向对象自己动手写了一个封装好的jquery轮播组件,可满足一般需求,不仅使用简单且复用性高. demo:点此预览 代码地址:https://github.com/zsqosos/componen ...

  8. 《第31天:JQuery - 轮播图》

    源码下载地址:链接:https://pan.baidu.com/s/16K9I... 提取码:0ua2 写这篇文章,当做是对自已这一天的一个总结.写轮播图要准备的东西:三张尺寸大小一样的图片.分为三个 ...

  9. Jquery 轮播图简易框架

    =====================基本结构===================== <div class="carousel" style="width: ...

随机推荐

  1. 核心记账业务可用jdk7的PriorityBlockingQueue优先阻塞队列结合乐观锁实现

    -- 1.优先级阻塞队列 当前核心记账业务是悲观锁实现,但考虑到高并发和死锁的问题,可以用PriorityBlockingQueue优先阻塞队列结合乐观锁实现,对于并发时出现锁无法update时可以重 ...

  2. LeetCode 74,直击BAT经典面试题

    本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是LeetCode专题43篇文章,我们今天来看一下LeetCode当中的74题,搜索二维矩阵,search 2D Matrix. 这题的 ...

  3. Java实现 蓝桥杯VIP 算法提高 聪明的美食家

    算法提高 聪明的美食家 时间限制:1.0s 内存限制:256.0MB 问题描述 如果有人认为吃东西只需要嘴巴,那就错了. 都知道舌头有这么一个特性,"由简入奢易,由奢如简难"(据好 ...

  4. CSS清除浮动&内容居中&文字溢出

    学习! 1.CSS清除浮动的方法 (1)添加标签清除浮动: 在浮动元素结尾处,并列的添加标签<div style="clear:both;"></div>. ...

  5. k8s学习-存储

    4.6.存储 4.6.1.ConfigMap 创建方式 文件夹/文件创建 mkdir dir cd dir cat > c1.properties <<EOF c1.name=c1 ...

  6. HttpUtil工具类,发送Get/Post请求,支持Http和Https协议

    HttpUtil工具类,发送Get/Post请求,支持Http和Https协议 使用用Httpclient封装的HttpUtil工具类,发送Get/Post请求 1. maven引入httpclien ...

  7. .net core3.1 abp动态菜单和动态权限(思路) (二)

    ps:本文需要先把abp的源码下载一份来下,跟着一起找实现,更容易懂 在abp中,对于权限和菜单使用静态来管理,菜单的加载是在登陆页面的地方(具体是怎么知道的,浏览器按F12,然后去sources中去 ...

  8. Jquery封装:下拉框插件

    代码如下: ;(function ($, window) { $.fn.addSelect = function (options) { //合并传入与默认的参数 var opts = $.exten ...

  9. [转载]win&office 激活教程,详细

    因为可能的版权&法律问题, 我也为了自我保全哈~ 不能直接转原文,详见官方文档 https://v0v.bid/kms.html https://v0v.bid 任何问题请联系作者 欢迎分享

  10. Shell总结02-shell变量、赋值与替换

    变量 shell并不区分变量的类型,或者说变量都是弱类型的,本质上都是字符串,但是如果变量值中只含有数字,shell还是支持对其进行算术运算 赋值 常见的赋值操作符有=(在其前后没有空白符)和let ...