使用jquery setTimeout方法怎么做图片轮播效果。哪位大神提供试例
jquery图片自动轮播怎么设置?求高手
yugi
#pic{
width:410px;
height:200px;
margin:0auto;
margin-top:150px;
}
#pic#po{
width:370px;
overflow:hidden;
height:170px;
left:20px;;
top:10;
position:relative;
}
#pic#pol{
width:2370px;
height:165px;
position:absolute;
}
#pic#num{
width:120px;
height:25px;
position:absolute;
z-index:2;
left:247px;
top:140px;
}
#pic#numspan{
width:10px;
margin-left:10px;
cursor:pointer;
font-size:12px;
height:20px;
float:left;
color:#000000;
text-align:center;
}
#pic#numspan.cut{
background:#000000;
color:#FFFFFF;
}
img{
width:370px;
height:165px;
float:left
}
jQuery(function($)
{
varCRT=0;
varw=$("img").width(),pol=$("#pol"),spans=$("#numspan");
spans.hover(function()
{
varme=$(this);
me.addClass("cut").siblings(".cut").removeClass("cut");
spans.eq(CRT).clearQueue();
pol.stop().animate(
{
left:"-"+w*(CRT=me.index())+"px"
},"slow");
},function()
{
anony();
});
varanony=function()
{
CRT++;
CRT=CRT>spans.length-1?0:CRT;
spans.eq(CRT).clearQueue().delay(1000).queue(function()
{
spans.eq(CRT).triggerHandler("mouseover");
anony();
});
};
anony();
});
1
2
3
4
5
用jquery实现图片轮播怎么写呢求指教
*{
margin:0;
padding:0;
}
ul{
list-style:none;
}
.slideShow{
width:620px;
height:700px;/*其实就是图片的高度*/
border:1px#eeeeeesolid;
margin:100pxauto;
position:relative;
overflow:hidden;/*此处需要将溢出框架的图片部分隐藏*/
}
.slideShowul{
width:2500px;
position:relative;/*此处需注意relative:对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置,如果没有这个属性,图片将不可左右移动*/
}
.slideShowulli{
float:left;/*让四张图片左浮动,形成并排的横着布局,方便点击按钮时的左移动*/
width:620px;
}
.slideShow.showNav{/*用绝对定位给数字按钮进行布局*/
position:absolute;
right:10px;
bottom:5px;
text-align:center;
font-size:12px;
line-height:20px;
}
.slideShow.showNavspan{
cursor:pointer;
display:block;
float:left;
width:20px;
height:20px;
background:#ff5a28;
margin-left:2px;
color:#fff;
}
.slideShow.showNav.active{
background:#b63e1a;
}
js代码规范:
$(document).ready(function(){
varslideShow=$(".slideShow"),//获取最外层框架的名称
ul=slideShow.find("ul"),
showNumber=slideShow.find(".showNavspan"),//获取按钮
oneWidth=slideShow.find("ulli").eq(0).width();//获取每个图片的宽度
vartimer=null;//定时器返回值,主要用于关闭定时器
variNow=0;//iNow为正在展示的图片索引值,当用户打开网页时首先显示第一张图,即索引值为0
showNumber.on("click",function(){//为每个按钮绑定一个点击事件
$(this).addClass("active").siblings().removeClass("active");//按钮点击时为这个按钮添加高亮状态,并且将其他按钮高亮状态去掉
varindex=$(this).index();//获取哪个按钮被点击,也就是找到被点击按钮的索引值
iNow=index;
ul.animate({"left":-oneWidth*iNow,//注意此处用到left属性,所以ul的样式里面需要设置position:relative;让ul左移N个图片大小的宽度,N根据被点击的按钮索引值iNOWx确定
})
});
functionautoplay(){
timer=setInterval(function(){//打开定时器
iNow++;//让图片的索引值次序加1,这样就可以实现顺序轮播图片
if(iNow>showNumber.length-1){//当到达最后一张图的时候,让iNow赋值为第一张图的索引值,轮播效果跳转到第一张图重新开始
iNow=0;}
showNumber.eq(iNow).trigger("click");//模拟触发数字按钮的click
},2000);//2000为轮播的时间
}
autoplay();
slideShow.hover(function(){clearInterval(timer);},autoplay);另外注意setInterval的用法比较关键。
})
主体代码:
[html]viewplaincopyprint?
1
2
3
4
jquery图片轮播思路
使用jQuery做轮播图是网页特效中很常见的一个特效。
工具原料:编辑器、浏览器、jQuery
1、实现的总体思路:
首先是初始化部分:将除了第一张轮播图片意外的图片都隐藏,并且隐藏向前、向后按钮,使第一个索引按钮处于激活状态。
2、实现的具体事件处理思路:
事件部分:通过jquery的hover()绑定鼠标上悬以及离开时的事件处理, jquery的bind()方法绑定鼠标点击事件处理向前、向后翻动、轮播控制:pre(), next(), play(), start()开始自动轮播,stop()停止自动轮播。
3、简单的代码示例如下:
jquery轮播效果图
*{
padding:0px;
margin:0px;
}
a{
text-decoration:none;
}
ul{
list-style:outsidenonenone;
}
.slider,.slider-panelimg,.slider-extra{
width:650px;
height:413px;
}
.slider{
text-align:center;
margin:30pxauto;
position:relative;
}
.slider-panel,.slider-nav,.slider-pre,.slider-next{
position:absolute;
z-index:8;
}
.slider-panel{
position:absolute;
}
.slider-panelimg{
border:none;
}
.slider-extra{
position:relative;
}
.slider-nav{
margin-left:-51px;
position:absolute;
left:50%;
bottom:4px;
}
.slider-navli{
background:#3e3e3e;
border-radius:50%;
color:#fff;
cursor:pointer;
margin:02px;
overflow:hidden;
text-align:center;
display:inline-block;
height:18px;
line-height:18px;
width:18px;
}
.slider-nav.slider-item-selected{
background:blue;
}
.slider-pagea{
background:rgba(0,0,0,0.2);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000);
color:#fff;
text-align:center;
display:block;
font-family:"simsun";
font-size:22px;
width:28px;
height:62px;
line-height:62px;
margin-top:-31px;
position:absolute;
top:50%;
}
.slider-pagea:HOVER{
background:rgba(0,0,0,0.4);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);
}
.slider-next{
left:100%;
margin-left:-28px;
}
$(document).ready(function(){
varlength,
currentIndex=0,
interval,
hasStarted=false,//是否已经开始轮播
t=3000;//轮播时间间隔
length=$('.slider-panel').length;
//将除了第一张图片隐藏
$('.slider-panel:not(:first)').hide();
//将第一个slider-item设为激活状态
$('.slider-item:first').addClass('slider-item-selected');
//隐藏向前、向后翻按钮
$('.slider-page').hide();
//鼠标上悬时显示向前、向后翻按钮,停止滑动,鼠标离开时隐藏向前、向后翻按钮,开始滑动
$('.slider-panel,.slider-pre,.slider-next').hover(function(){
stop();
$('.slider-page').show();
},function(){
$('.slider-page').hide();
start();
});
$('.slider-item').hover(function(e){
stop();
varpreIndex=$(".slider-item").filter(".slider-item-selected").index();
currentIndex=$(this).index();
play(preIndex,currentIndex);
},function(){
start();
});
$('.slider-pre').unbind('click');
$('.slider-pre').bind('click',function(){
pre();
});
$('.slider-next').unbind('click');
$('.slider-next').bind('click',function(){
next();
});
/**
*向前翻页
*/
functionpre(){
varpreIndex=currentIndex;
currentIndex=(--currentIndex+length)%length;
play(preIndex,currentIndex);
}
/**
*向后翻页
*/
functionnext(){
varpreIndex=currentIndex;
currentIndex=++currentIndex%length;
play(preIndex,currentIndex);
}
/**
*从preIndex页翻到currentIndex页
*preIndex整数,翻页的起始页
*currentIndex整数,翻到的那页
*/
functionplay(preIndex,currentIndex){
$('.slider-panel').eq(preIndex).fadeOut(500)
.parent().children().eq(currentIndex).fadeIn(1000);
$('.slider-item').removeClass('slider-item-selected');
$('.slider-item').eq(currentIndex).addClass('slider-item-selected');
}
/**
*开始轮播
*/
functionstart(){
if(!hasStarted){
hasStarted=true;
interval=setInterval(next,t);
}
}
/**
*停止轮播
*/
functionstop(){
clearInterval(interval);
hasStarted=false;
}
//开始轮播
start();
});
title="图片1"src="images/1.jpg">
1
2
3
4
<
>
jquery图片上下轮播的问题,怎么实现自动轮播?
1、html部分
2、css样式部分
#banner{position:relative;width:478px;height:286px;border:1pxsolid#666;overflow:hidden;}
#banner_listimg{border:0px;}
#banner_bg{position:absolute;bottom:0;background-color:#000;height:30px;filter:Alpha(Opacity=30);opacity:0.3;z-index:1000;
cursor:pointer;width:478px;}
#banner_info{position:absolute;bottom:0;left:5px;height:22px;color:#fff;z-index:1001;cursor:pointer}
#banner_text{position:absolute;width:120px;z-index:1002;right:3px;bottom:3px;}
#bannerul{position:absolute;list-style-type:none;filter:Alpha(Opacity=80);opacity:0.8;border:1pxsolid#fff;z-index:1002;
margin:0;padding:0;bottom:3px;right:5px;}
#bannerulli{padding:0px8px;float:left;display:block;color:#FFF;border:#e5eaff1pxsolid;background:#6f4f67;cursor:pointer}
#bannerulli.on{background:#900}
#banner_lista{position:absolute;}
3、jQuery部分
vart=n=0,count;
$(document).ready(function(){
count=$("#banner_lista").length;
$("#banner_lista:not(:first-child)").hide();
$("#banner_info").html($("#banner_lista:first-child").find("img").attr('alt'));
$("#banner_info").click(function(){window.open($("#banner_lista:first-child").attr('href'),"_blank")});
$("#bannerli").click(function(){
vari=$(this).text()-1;//获取Li元素内的值,即1,2,3,4
n=i;
if(i>=count)return;
$("#banner_info").html($("#banner_lista").eq(i).find("img").attr('alt'));
$("#banner_info").unbind().click(function(){window.open($("#banner_lista").eq(i).attr('href'),"_blank")})
$("#banner_lista").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
document.getElementById("banner").style.background="";
$(this).toggleClass("on");
$(this).siblings().removeAttr("class");
});
t=setInterval("showAuto()",4000);
$("#banner").hover(function(){clearInterval(t)},function(){t=setInterval("showAuto()",4000);});
})
functionshowAuto()
{
n=n>=(count-1)?0:++n;
$("#bannerli").eq(n).trigger('click');
}
Jquery图片轮播循环问题,求大神指教,怎么实现循环播放?
//js
varisround="";
vari=0;
$(function(){
isround=setTimeout("change()",3000);
$("div[name=ban]divimg:eq(0)").show().siblings().hide();
$(".numli:eq(0)").addClass("current").siblings().removeClass("current");
$(".numli").click(function(){
i=$(".numli").index(this);
$(this).addClass("current").siblings().removeClass("current");
$("div[name=ban]divimg").eq($(".numli").index(this)).show().siblings().hide();
isround=setTimeout("change()",3000);
}).hover(function(){
clearTimeout(isround)
},function(){
isround=setTimeout("change()",3000);
})
})
functionchange(){
if(i==$(".numli").length)i=0;
$(".numli").eq(i).addClass("current").siblings().removeClass("current");
$("div[name=ban]divimg").eq(i).show().siblings().hide();
i++;
setTimeout("change()",3000);
}
//html
不懂再问,这是我自己写的一个轮换,里面包括了点击事件,原理是控制图片的显示隐藏,
别的有控制高度等等之类的 。
标签:图片
轮播
前端开发
Jquery
JavaScript
相关文章
-
怎么把PPT里面的图片换成WORD,如图
如何将含图片的PPT转换成word格式?方法一: 1、打开ppt文件,单击"文件"---"另存为",在弹出的对话框中选择保存类型为"大纲/ RTF文件 (*.rtf)",选择保存路径,输入文件名,单击"保存"即
详细阅读
-
转换图片的格式需要使用什么工具呢
图片格式转换器用什么最好图片格式有很多种,最常见的就是jpg、png、tif、bmp、gif、psd、ai、webp等。但是每个平台对图片的格式要求不一致,有的仅支持jpg格式,有的又支持psd格
详细阅读
-
哪位大佬知道这种插画风格名称是什
求这张图片的绘画风格名字和与此风格相同的图片此类图片属于电脑制图,类似插画风格! 类似的图片你可以百度:hed kandi twisted disco都是此类图片 试试吧!插画的风格分类类型插
详细阅读
-
图片无法删除,怎么办?
相册里照片删不掉是怎么回事,点若使用的是vivo手机,可查看手机照片无法删除操作方法: 1、重启一下手机; 2、进入设置--系统升级,部分iQOO (Monster) UI版本/Funtouch OS9.2机型需进
详细阅读
-
无限挑战和召唤都不可以,十连抽也不
手机打不开视频图片也发送不了,是怎么回事呢?首先你先看下网络是不是正常的,是不是网络出了问题,一般网络有问题图片和视频都打不开的。还有如果网络正常,那可能就是内存不足了,手
详细阅读
-
foxmail 不显示图片,不是附件图片
为什么foxmail发出的邮件不显示图片您好,原因是foxmail勾选了总是以文本格式阅读邮件,去除掉即可。 1、首先需要打开foxmail软件的页面,如图所示,点击右上角的三横线并点击设置
详细阅读
-
求图片出处
求图片出处婚纱设计师兰奕原创品牌“望设计WishDesign” s/s 2015幻境迷踪,新款发布—— 翠丝小姐的葡萄园。婚纱设计:兰奕,摄影:王馨仪,造型:云熙unhee。求图片出处~Pixiv Fantas
详细阅读
-
在游戏时,输入中文时,搜狗输入法就会
我完全屏游戏时搜狗输入法会出现在屏幕上,我怎么按都不消去,怎么办右键点击搜狗输入法状态栏,设置属性,勾选“全屏程序时隐藏状态栏”,确定。手机的搜狗输入法打一些词时上方会
详细阅读
-
我的笔记本电脑桌面图片有增加颜色
桌面上的图标桌面有颜色怎么弄没掉?1、鼠标右健在桌面点击,打开属性,把桌面主题换成WINDOWS主题:
2、鼠标在桌面右击——排列图标——把“在桌面上锁定WEB项目”里的勾去掉:
3、
详细阅读
-
这个图片的内容什么意思,是安装包缺
为什么我安装win7的SP1提示我缺少系统组建?1、无法安装,这是在打开SP1安装程序时因缺少系统组件而无法安装。这是因为使用了win7优化大师的系统盘减肥功能导致的,解决方法是下
详细阅读