Jquery实现幻灯片轮播

页面代码如下

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title> 广告图片轮播切换</title><link rel="stylesheet" href="css/style.css"><script src="../../jquery-1.12.4.min.js"></script><script src="newjs.js"></script>
</head>
<body>
<div class="adver"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul><div class="arrowLeft"><</div><div class="arrowRight">></div>
</div>
</body>
</html>

CSS样式如下

ul,li{padding: 0;margin: 0; list-style: none;}
.adver{margin: 0 auto; width: 700px; overflow: hidden; height: 454px; position: relative; background: url("../images/adver01.jpg");}
ul{position: absolute; bottom:10px; z-index: 100; width: 100%; text-align: center;}
ul li{display: inline-block; font-size: 10px; line-height: 20px; font-family: "΢���ź�"; margin: 0 1px; width: 20px; height: 20px; border-radius: 50%; background: #333333; text-align: center; color: #ffffff;}
.arrowLeft,.arrowRight{position: absolute;width: 30px;background:rgba(0,0,0,0.2);height: 50px;line-height: 50px;text-align: center;top:200px;z-index: 150;font-family: "΢���ź�";font-size: 28px;font-weight: bold;cursor: pointer;display: block;
}
.arrowLeft{left: 10px;}
.arrowRight{right: 10px;}
li:nth-of-type(1){background: orange;
}

JS代码如下，已经加了详细的备注

$(document).ready(function () {/*鼠标悬浮*/$("div").mouseover(function () {/*显示隐藏的左右箭头*/$(".arrowLeft").css("display","block");$(".arrowRight").css("display","block");/*鼠标移开*/}).mouseout(function () {/*隐藏显示的左右箭头*/$(".arrowLeft").css("display","none");$(".arrowRight").css("display","none");});/*设置默认样式*//*指定初始化时候第一个按钮是橙色*/$("li:nth-of-type(1)").css("background","#FF8000");/*指定除第一个按钮其他所有同胞的样式*/$("li:nth-of-type(1)").siblings().css("background","#333333");/*定义保存图片数组*/var urls=new Array(6);urls[0]="images/adver01.jpg";urls[1]="images/adver02.jpg";urls[2]="images/adver03.jpg";urls[3]="images/adver04.jpg";urls[4]="images/adver05.jpg";urls[5]="images/adver06.jpg";/*定义遍历变量*/var i=1;/*左箭头单击*/$(".arrowLeft").click(function(){/*定义判断变量*/var $num= i;/*进行判断*/if($num==1){alert("已经是第一页啦！");return;}$num--;/*更换当前图片*/$(".adver").css("background","url("+urls[$num-1]+")");/*更改下面按钮的样式*/$("li:nth-of-type("+$num+")").css("background","#FF8000");$("li:nth-of-type("+$num+")").siblings().css("background","#333333");i--;});/*右箭头单击*/$(".arrowRight").click(function(){/*获取当前所在的页数*/var $num= parseInt($("li").html());$num= $num+i;/*进行判断*/if($num==7){alert("已经是最后一页啦！");return;}/*更换当前图片*/$(".adver").css("background","url("+urls[$num-1]+")");/*更改下面按钮的样式*/$("li:nth-of-type("+$num+")").css("background","#FF8000");$("li:nth-of-type("+$num+")").siblings().css("background","#333333");i++;});/*自动轮播*/function lunbo() {/*获取当前所在的页数*/var $num= parseInt($("li").html());$num= $num+i;/*进行判断*/if($num==7){/*跳到第一页从头来*/i-=6;return;}/*更换当前图片*/$(".adver").css("background","url("+urls[$num-1]+")");/*更改下面按钮的样式*/$("li:nth-of-type("+$num+")").css("background","#FF8000");$("li:nth-of-type("+$num+")").siblings().css("background","#333333");i++;}/*间隔1秒调用一次*/var bo=setInterval(lunbo,1000);
})

图片就不再上传了，大家自己找几张就可以了，把文件名改一下

下面上预览图

Jquery实现幻灯片轮播相关推荐

Android 旋转木马轮播,jQuery旋转木马式幻灯片轮播特效
本文为大家分享anoSlide是一款超轻型响应式jQuery旋转木马幻灯片插件,它适合在PC端与移动端实现旋转木马幻灯片特效.具体内容如下特点响应式--适应任何视窗的宽度混合内容不需要CSS ...
html幻灯片图片轮播w3,支持30+种类型幻灯片|轮播图|旋转木马的强大jQuery插件
jssor slider是一款功能非常强大的可制作超过30种不同类型的幻灯片|轮播图|旋转木马的jQuery插件.jssor具有高性能,轻量级,跨浏览器等特点,它可以支持IE6+的浏览器,并且可以支持 ...
boostrap 鼠标滚轮滑动图片_Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法...
最近ytkah在学习用bootstrap搭建网站,Bootstrap能自适应pc端和手机端,并且移动设备优先,适合现如今移动营销.bootstrap是封装好的框架,需要某些功能只需调用相应的组件就可以 ...
jquery手写轮播图_15个超强的jQuery/HTML5图片轮播插件
最近我们为大家分享过不少基于jQuery的图片轮播插件,当然也有很多使用了HTML5和CSS3的相关技术,让整个图片播放器显得更加美观,动画效果显得更加炫酷.这次我们特意为大家筛选了一些最新的jQue ...
html5+自动播放轮播插件,15个超强的jQuery/HTML5图片轮播插件
最近我们为大家分享过不少基于jQuery的图片轮播插件,当然也有很多使用了HTML5和CSS3的相关技术,让整个图片播放器显得更加美观,动画效果显得更加炫酷.这次我们特意为大家筛选了一些最新的jQue ...
带后台管理的超酷jquery+ajax幻灯相册php源码,仿门户网图片频道的jQuery幻灯相册轮播代码...
推荐 jquery画廊特效支持缩略图预览和全屏展示及图片描述这是款基于jquery的画廊相册特效,功能较全面,可支持缩略小图预览,幻灯图片全屏展示,可显示多种规格的图片,包括全屏显示高清大图,以及 ...
PgwSlideshow-基于Jquery的图片轮播插件
友情链接:http://www.htmleaf.com/Demo/201504031619.html http://www.htmleaf.com/Demo/201504191708.html 0 ...
html5carousel图片轮播,jQuery响应式轮播图插件VM Carousel
插件描述:VM Carousel是一款jQuery响应式轮播图插件.该jquery轮播图插件支持自动播放模式,支持动态改变图片尺寸,支持居中模式,以及无限循环等. 使用方法在页面中引入jquery. ...
js滚动,滑动,幻灯片,轮播,swipe js滚动,滑动,幻灯片,轮播
我也不知道叫什么功能通通叫出来得了,js滚动,滑动,幻灯片,轮播图下载插件swipe.js,swipe.css ( http://download.csdn.net/download/u014596 ...

Jquery实现幻灯片轮播

Jquery实现幻灯片轮播相关推荐

最新文章

热门文章