⑴ Jquery图片轮播循环问题，求大神指教，怎么实现循环播放
js">//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图片轮播思路
首先纠正个错误，开始就隐藏img不要用js去做。js操作影响速度，第二是需要在js加载完了才会把图片隐藏，这会导致没加载完前你的图片全部是显示的。 用css来隐藏img,另外图片宽高都写在img里减小渲染框架时间。你们老师这样写例子 误人子弟啊＝＝！
思路就是
<style>
#focus{width:500px;height:200px;overflow:hidden;/*用一个div把图片包含设置超出范围隐藏*/}
</style>
<divid="focus">
<imgsrc="xx.jpg"width="500"height="200">
<imgsrc="xx.jpg"width="500"height="200">
<imgsrc="xx.jpg"width="500"height="200">
</focus>
.....引入jQuery
<script>
//将script写在最底部避免js阻塞页面加载
varindex=0;//当前显示的第几张图，默认开始为0；
varmg=$("#focusimg");//将焦点图储存为一个变量方便调用节省下载调用查询时间。
varlen=mg.length;//焦点图图片数量
functionplay(n){
mg.eq(n).fadeIn(200).siblings("img").fadeOt(200);
//eq表示第几个标签里面的n就是代表的第几个img标签是从0开始数的。这里用siblings而不是先hide全部在fadein，siblings代表的是除开当前标签以外的所有同级标签。使用siblings来处理这样的情况速度会比你老师写的快很多倍。简单来讲siblings就是除开当前显示的这个以外的所有统计图片全部fadeOut
}
setInterval(function(){
showPics(index);
index++;
if(index==len){//当当前播放的索引值等于总图片数就重置为0，重新开始循环
index=0;
}
},2000);//将function写在setInterval里更简洁。这样写默认开始2秒就开始播放，如果想开始2秒就播放第二张，那就得把最前面的index=1;因为初始显示的就是第一张。所以2秒后应该显示第二张而不是还是第一张
</script>
⑶ 用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实现图片轮播的同时左右按钮可以实现切换
建议，在当前轮播图的div添加类，设置.active {display：block；}，.ban{display:none;};这样可以通过添加或移除active就可以了；这样以下就比较方便很多，要不然又要做循环，麻烦（swiper插件做轮播效果不错）
$(".left").click(function(){
var $index = $(".ban").hasClass("active").index();//获取当前轮播图的下标
if($index === 0 ) {//当前为第一张轮播图
$(".ban").eq($(".ban").length-1).addClass("active)
.siblings(".ban").removeClass("active");
//这里写成你自动切换的代码，我这里只是一个无动态切换效果的方法
}else {
$(".ban").eq($index-1).addClass("active)
.siblings(".ban").removeClass("active");
})
$(".right").click(function(){
var $index = $(".ban").hasClass("active").index();//获取当前轮播图的下标
if($index === ($(".ban").length-1) ) {//当前为最后一张轮播图
$(".ban").eq($(".ban").length-1).addClass("active)
.siblings(".ban").removeClass("active");
//这里写成你自动切换的代码，我这里只是一个无动态切换效果的方法
}else {
$(".ban").eq($index+1).addClass("active)
.siblings(".ban").removeClass("active");
})
//大体思路是这样了，代码可能有个别字母写得不对，毕竟是手敲的，但是大概思路是这样了
⑸ jquery自动轮播图代码只能出现一张图片第二三张就空白了 轮播正常播放
第一张显示没问题，第二张以及之后的图片显示为空白。
首先，排除掉图片路径没问题。（如果有问题，也不会网上提问了）
初步判断，css静态定位错误。
css样式固定在了第一张图片，第二，第三之后的css定位不到，则显示空白。
即使在js中是动态定位的，但是请仔细检查你的图片<ul>的css的定位参数是否固定住了。
比如，设置了{left：0；}。
删除掉css的错误静态定位，只保留js中的动态定位可以解决第二张以及之后图片空白问题。
⑹ jquery里面，或者HTML，HTML5，C#里面如何实现下图的图片效果。滑动轮播类似的。 DW里面添加代码也行。
; (function ($) {
/* var i = 2;
$(document).ready(function () {
var arry = ['images/headback/001.jpg', 'images/headback/002.jpg', 'images/headback/003.jpg', 'images/headback/004.jpg', 'images/headback/005.jpg', 'images/headback/006.jpg', ]
setInterval(
function () {
$("#div_pic").css("backgroundImage", "url(" + arry[i] + ")");
i++;
if (i == 5) {
i = 0;
}
}
, 5000);
}); 定时换背景图片的代码 */
//下面是图片切换代码
/*
var t;
var speed = 2; //图片切换速度
var nowlan = 0; //图片开始时间
function changepic() {
var imglen = $("#div_pic").find("li").length;
$("#div_pic").find("li").hide();
$("#div_pic").find("li").eq(nowlan).show();
nowlan = nowlan + 1 == imglen ? 0 : nowlan + 1;
t = setTimeout("changepic()", speed * 1000);
}
onload = function () { changepic(); }
$(document).ready(function ()
//鼠标在图片上悬停让切换暂停
$("#div_pic").hover(function () { clearInterval(t); });
//鼠标离开图片切换继续
$("#div_pic").mouseleave(function () { changepic(); });
});
*/
//下面是图片轮播代码
/* var num = 0
$(function(){
$("#div_pic ol li").mouseover(function(e){
$(this).attr("class","current");
$(this).siblings().attr("class",""); //兄弟节点的class属性设置为空
//alert($('ul').index())
num = $('ul').index() + 2
var index = $(this).index(); //记录选定的li标签在ul中的索引
//图片会出现层叠现象为了显示当前的图片，把当前的图片的z-index 值设置为大于其他的兄弟元素
$("#div_pic ul li").eq(index).css({"left":"650px","zIndex":num})
$("#div_pic ul li").eq(index).siblings().css("zIndex",num-1);
//动画效果，图片从右侧飞入
$("#div_pic ul li").eq(index).animate({left:"0"},500)
});
}); */
//下面是可配置轮播动画代码
$.fn.slide=function(options){
var defaults= {
affect:1, //1：上下滚动; 2:幕布式; 3:左右滚动；4：淡入淡出
time: 5000, //间隔时间
speed:500, //动画快慢
dot_text:true,//按钮上有无序列号
};
var opts=$.extend(defaults,options);
var $this=$(this);
var ool=$("<div class='dot'><p></p></div>");
var $box=$this.find("ul");
var $li=$box.find("li");
var timer=null;
var num=0;
$this.append(ool);
$box.find("li").each(function(i){
ool.find("p").append($("<b></b>"));
if(opts.dot_text){
ool.find("b").eq(i).html(i+1)
}
})
ool.find("b").eq(0).addClass("cur");
switch(opts.affect){
case 1:
break;
case 2:
$box.find("li").css("display","none");
break;
case 3:
$box.css({"width":$li.eq(0).width()*$li.length});
$li.css("float","left");
break;
case 4:
$box.find("li").css("display","none");
break;
}
$box.find("li").eq(0).show(0);
ool.find("b").mouseover(function(){
num=$(this).index();
run ();
})
timer=setInterval(auto,opts.time);
function auto(){
num<$box.find("li").length-1?num++:num=0;
run();
}
function run(){
ool.find("b").eq(num).addClass("cur").siblings().removeClass("cur");
switch(opts.affect){
case 1:
$box.stop(true,false).animate({"top":-240*num},opts.speed);
break;
case 2:
$box.find("li").css({"position":"absolute"});
$box.find("li").stop(false,true).fadeOut(opts.speed).eq(num).slideDown(opts.speed);
break;
case 3:
$box.stop(true,false).animate({"left":-670*num},opts.speed);
break;
case 4:
$box.find("li").css({"position":"absolute"});
$box.find("li").stop(false,true).fadeOut(opts.speed).eq(num).fadeIn(opts.speed);
break;
}
}
$this.mouseover(function(){
clearInterval(timer);
})
$this.mouseout(function(){
timer=setInterval(auto,opts.time);
})
}
}(jQuery));