⑴ 如何用jquery做轮播图
有很多可供选择的JQ插件，比如
slider、bxslider、swipper等等，这些都是比较方便且功能强大的，例子可以参考官方的Demo
⑵ jquery图片上下轮播的问题，怎么实现自动轮播
1、html部分
<body>
<divid="banner">
<divid="banner_bg"></div><!--标题背景-->
<divid="banner_info"></div><!--标题-->
<ul>
<liclass="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<divid="banner_list">
<ahref="#"target="_blank"><imgsrc="imgs/p1.jpg"title="橡树小屋的blog"alt="橡树小屋的blog"/></a>
<ahref="#"target="_blank"><imgsrc="imgs/p5.jpg"title="橡树小屋的blog"alt="橡树小屋的blog"/></a>
<ahref="#"target="_blank"><imgsrc="imgs/p3.jpg"title="橡树小屋的blog"alt="橡树小屋的blog"/></a>
<ahref="#"target="_blank"><imgsrc="imgs/p4.jpg"title="橡树小屋的blog"alt="橡树小屋的blog"/></a>
</div>
</div>
</body>
2、css样式部分
<styletype="text/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;}<!--让四张图片都可以重叠在一起-->
</style>
3、jQuery部分
<scripttype="text/javascript">
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');
}
</script>
⑶ jquery 图片轮播 代码什么意思啊
jQuery是一个比较成熟的JS框架，简化了编程的流程。
图片轮播就是在页面里的图片之间的各种切换效果，让页面看起来更美观。
你问的就是通过jQuery框架来实现的图片切换效果的代码，使用时记得调用jQuery文件。
⑷ 用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代码规范：
<scriptsrc="../../../jQuery/js/jquery-2.1.4.js"></script><scripttype="text/javascript">
$(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的用法比较关键。
})
</script>
主体代码：
[html]viewplainprint?
<body>
<divclass="slideShow">
<!--图片布局开始-->
<ul>
<li><ahref="#"><imgsrc="images/view/111.jpg"/></a></li>
<li><ahref="#"><imgsrc="images/view/112.jpg"/></a></li>
<li><ahref="#"><imgsrc="images/view/113.jpg"/></a></li>
<li><ahref="#"><imgsrc="images/view/114.jpg"/></a></li>
</ul>
<!--图片布局结束-->
<!--按钮布局开始-->
<divclass="showNav">
<spanclass="active">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
<!--按钮布局结束-->
</div>
</body>
⑸ 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
<divname="ban">
<div>
<!--图片-->
<imgsrc="/resources/images/f1.jpg"width="369px"height="114px"/>
<imgsrc="/resources/images/f2.jpg"width="369px"height="114px"/>
<imgsrc="/resources/images/f1.jpg"width="369px"height="114px"/>
<imgsrc="/resources/images/f2.jpg"width="369px"height="114px"/>
<imgsrc="/resources/images/f1.jpg"width="369px"height="114px"/>
</div>
<divclass="numbox">
<!--选项-->
<ulclass="num">
<liclass="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
不懂再问，这是我自己写的一个轮换，里面包括了点击事件，原理是控制图片的显示隐藏，
别的有控制高度等等之类的 。
⑹ jquery简单自动轮播图代码怎么写
html部分 this is the page一 this is the page二 this is the page三 this is the page四 css部分 *{ padding: 0; margin: 0; } html,body{ height: 一00%; } #container { width: 一00%; height: 500px; overflow: hidden; } .sections,.section { height:一00%; } #container,.sections { position: relative; } .section { background-color: #000; background-size: cover; background-position: 50% 50%; text-align: center; color: white; } #section0 { background-image: url('images/一.jpg'); } #section一 { background-image: url('images/二.jpg'); } #section二 { background-image: url('images/三.jpg'); } #section三 { background-image: url('images/四.jpg'); } .pages li{list-style-type:none;width:一0px;height:一0px;border-radius:一0px;background-color:white}.pages li:hover{box-shadow:0 0 5px 二px white}.pages li.active{background-color:orange;box-shadow:0 0 5px 二px orange}.pages{position:absolute;z-index:999}.pages.horizontal{left:50%;transform:translateX(-50%);bottom:5px}.pages.horizontal li{display:inline-block;margin-right:一0px}.pages.horizontal li:last-child{margin-right:0}.pages.vertical{right:5px;top:50%;transform:translateY(-50%)}.pages.vertical li{margin-bottom:一0px}.pages.vertical li:last-child{margin-bottom:0} JS部分 jquery-一.一一.0.min.js" type="text/javascript"> //引入pageSwitch.min.js 如
⑺ jquery图片轮播问题
去掉第一个delay 试试.
div.queue("fx", []).stop(0).queue(function() {
div.fadeIn(300).delay(3000).slideUp(400);
div.dequeue();
funny(div.next("div"));
});