jQuery插件实现图片轮播效果
使用插件实现图片轮播效果：
通过设置传入的参数autoScroll，numControl和arrowControl的值可以显示不同的效果
图片轮播效果一：设置autoScroll=true，numControl=false，arrowControl=false，图片自动轮播，当鼠标进入时停止轮播，当鼠标移出时继续轮播；
图片轮播效果二：设置autoScroll=true，numControl=ture，arrowControl=false，图片自动轮播，同时当鼠标指向导航数字时显示相应的图片；
图片轮播效果三：设置autoScroll=true，numControl=false，arrowControl=true，图片自动轮播，当鼠标点击左右按钮时，显示相应的图片；
动画效果如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片轮播</title>
<script type="text/javascript" src="http://libs.badu.com/jquery//1.11.1/jquery.min.js.js"></script>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
list-style: none;
}
.slider{
position: relative;
margin: 50px auto;
width: 800px;
height: 200px;
overflow: hidden;
}
.slider ul{
position: absolute;
width: 3200px;
height: 200px;
}
.slider ul li{
float: left;
width: 800px;
height: 200px;
}
.slider ul li img{
width: 800px;
height: 200px;
}
.slider .num{
position: absolute;
right: 20px;
bottom: 20px;
}
.slider .num span{
display: block;
float: left;
margin-right: 10px;
width: 30px;
height: 30px;
line-height: 30px;
color: #fff;
background: #ccc;
text-align: center;
opacity: 0.6;
}
.slider .num span.active{
background: #1D5D76;
}
.left{
width:56px;
height: 87px;
position: absolute;
left:10px;
top:57px;
background: url('images/left-arrow.png');
}
.right{
width:56px;
height: 87px;
position: absolute;
right:10px;
top:57px;
background: url('images/right-arrow.png');
}
</style>
</head>
<body>
<div id="slider1" class="slider">
<ul>
<li><img src="images/1.jpg" alt="图片"></li>
<li><img src="images/2.jpg" alt="图片"></li>
<li><img src="images/3.jpg" alt="图片"></li>
<li><img src="images/4.jpg" alt="图片"></li>
</ul>
</div>
<div id="slider2" class="slider">
<ul>
<li><img src="images/1.jpg" alt="图片"></li>
<li><img src="images/2.jpg" alt="图片"></li>
<li><img src="images/3.jpg" alt="图片"></li>
<li><img src="images/4.jpg" alt="图片"></li>
</ul>
</div>
<div id="slider3" class="slider">
<ul>
<li><img src="images/1.jpg" alt="图片"></li>
<li><img src="images/2.jpg" alt="图片"></li>
<li><img src="images/3.jpg" alt="图片"></li>
<li><img src="images/4.jpg" alt="图片"></li>
</ul>
</div>
<script type="text/javascript" src="jQuery.slider.js"></script>
<script>
$(document).ready(function(){
$("#slider1").slider();
$("#slider2").slider({
//autoScroll:false,
numCtroll:true
});
$("#slider3").slider({
//autoScroll:false,
arrowControl:true
});
})
</script>
</body>
</html>
jQuery.slider.js
;(function ($) {
$.fn.slider=function (options) {
var defaults={
autoScroll: true,
speed:2000,
numCtroll: false,
arrowControl: false
}
var settings=$.extend({},defaults,options),
slider=$(this),
ul=slider.find("ul"),
li=ul.find("li"),
img=li.find("imf"),
width=slider.width(),
height=slider.height(),
len=li.length,
timer=null,
index=0;
// ul.css({width:len*width,height:height});
// li.add(img).css({width:width,height:height});
//判断是否自动轮播
if (settings.autoScroll) {
timer=setInterval(pic,settings.speed);
}
//判断是否显示数字导航，并通过数字导航控制显示图片
if (settings.numCtroll){
slider.append("<div class='num'></div>")
for (var i=0;i<len;i++){
slider.find(".num").append("<span>"+(i+1)+"</span>");
}
slider.find(".num span").eq(0).addClass("active");
slider.find(".num span").on("mouseover",function () {
$(this).addClass("active").siblings().removeClass("active");
showPic($(this).index());
})
}
//判断是够显示左右按钮，并通过左右按钮控制显示图片
if(settings.arrowControl){
slider.append("<span class='left'></span><span class='right'></span>");
var prev = slider.find(".left");
var next = slider.find(".right");
prev.on("click",function(){
index-=1
if(index == -1 ){
index=len-1;
}
showPic(index);
})
next.on("click",function(){
index+=1
if(index==len){
index=0;
}
showPic(index);
})
}
//鼠标移入时停止自动轮播
slider.on("mouseover",function(){
clearInterval(timer);
});
//鼠标移出时，检查autoScroll的值若为true则继续自动轮播
slider.on("mouseleave",function(){
if (settings.autoScroll) {
timer=setInterval(pic,settings.speed);
}
});
//设置index的值，并显示相应的图片
function pic(){
index++;
if (index==len){
index=0;
}
showPic(index);
}
//显示正确的图片
function showPic(index){
ul.animate({
left:-index*width
});
slider.find(".num span").eq(index).addClass("active").siblings().removeClass("active");
}
}
})(jQuery);
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
12款经典的白富美型—jquery图片轮播插件—前端开发必备
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件能够帮助到你. Nivo Slider 首先推荐的这款插件号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本. 目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如下特色: ✓ 16个独特的过渡效果
-
基于jQuery实现左右图片轮播（原理通用）
本文为大家分享了jQuery实现左右图片轮播代码,供大家参考,具体实现内容如下 运行效果图: 重点!!! 实现原理: 通过判断index值的大小变化来判断图片左移还是右移.通过控制图片的left值,来达到一个轮播的效果. 具体代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <scrip
-
基于jquery的图片轮播 tab切换组件
目前只添加了scroll和none的效果,scroll即滑动的效果,可以支持x和y方向的滑动:none就是没有任何效果,只是显示和隐藏,后续需要添加其他效果再做扩展,写的有点水,呵呵,在此留笔,防止丢失. Demo Address:http://demo.jb51.net/js/2012/sinaapp/ 复制代码 代码如下: /** * 巨无霸轮播 */ $.fn.loopSlider = function(option) { var setting = { // 默认显示的顺序 initIn
-
jQuery图片轮播的具体实现
效果如下: 先看一看html代码,以及对应的css代码: 复制代码 代码如下: <div id="scrollPics"> <ul class="slider" > <li><img src="images/ads/1.gif"/></li> <li><img src="images/ads/2.gif"/>&
-
基于JQuery的实现图片轮播效果(焦点图)
完整的演示代码: JQuery实现图片轮播效果 [实例演示] 1 2 3 4 // = count) return; $("#banner_info").html($("#banner_list a").eq(i).find("img").attr('alt')); $("#banner_info").unbind().click(function(){window.open($("#banner_list a&qu
-
Jquery代码实现图片轮播效果（一）
文章写的不好,还请各位高手指教,不废话了,先上张效果图吧看下: 在线演示 下载源码 首先是初始化部分:将除了第一张轮播图片意外的图片都隐藏,并且隐藏向前.向后按钮,使第一个索引按钮处于激活状态. 事件部分:通过jquery的hover()绑定鼠标上悬以及离开时的事件处理, jquery的bind()方法绑定鼠标点击事件处理向前.向后翻动.轮播控制:pre(), next(), play(), start()开始自动轮播,stop()停止自动轮播. 下篇是一个纯粹的jquery轮播
-
原生js和jquery实现图片轮播特效
(1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式) 4.然后是图片两端的左箭头和右箭头 5.然后是一个透明背景层,放在图片底部 6.然后是一个图片描述info层,放在透明背景层的左下角(div 或 ul-->li) 7.然后是一个按钮层,用来定位图片组的index吧,放在透明背景层的右下角(div
-
jQuery左右滚动支持图片放大缩略图图片轮播代码分享
本文实例讲述了jQuery左右滚动支持图片放大缩略图图片轮播效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的左右滚动支持图片放大缩略图图片轮播效果,常用的jQuery图片左右轮播效果,同时支持底部缩略图左右滚动展示,点击大图片后支持放大效果. 运行效果图: -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大
-
原生js和jquery实现图片轮播淡入淡出效果
图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成js使用,其实也就是用js原生模拟出这些用法. 但不管怎样,构造一个最基本的表现层是必须的 简单的图片轮播一般由几个部分构成. 对于淡入淡出式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式) 4.然后
-
jQuery手动点击实现图片轮播特效
本文写了一个轮播图练练手,先写了一个手动点击轮播的轮播图,随后我会慢慢接着深入写自动轮播图和鼠标悬浮图片停止移动轮播图等. 下面来看看最终做的手动点击轮播效果: 一.原理说明 (1)首先是轮播图的架构,我采用了一个最外边的大div包住两个小div,一个小div里面放四张图片,另一个小div里面放四个数字按钮 (2)对最外边的大div设置的宽度为图片的宽度,超出大div宽度的都需要隐藏,但是对于盛放图片的小div设置宽度为2000px,大一点方便四张图左浮动布局 (3)当数字按钮点击时,获取按钮的