正文
图片循环jquery,图片循环播放
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
jquery实现图片轮播
!DOCTYPE html
html
head
meta charset="utf-8"
titleHello MUI/title
meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"
meta name="apple-mobile-web-app-capable" content="yes"
meta name="apple-mobile-web-app-status-bar-style" content="black"
!--标准mui.css--
link rel="stylesheet" href="../css/mui.min.css"
!--App自定义的css--
link rel="stylesheet" type="text/css" href="../css/app.css"/
/head
body
header class="mui-bar mui-bar-nav"
a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"/a
h1 class="mui-title"下方悬浮标题/h1
/header
div class="mui-content"
ul class="mui-table-view mui-table-view-chevron"
li id="switch" class="mui-table-view-cell"
定时轮播
!--div class="mui-switch"
div class="mui-switch-handle"/div
/div--
/ul
div id="slider" class="mui-slider"
div class="mui-slider-group mui-slider-loop"
!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) --
div class="mui-slider-item mui-slider-item-duplicate"
a href="#"
img src="../images/yuantiao.jpg"
p class="mui-slider-title"静静看这世界/p
/a
/div
div class="mui-slider-item"
a href="#"
img src="../imagesjiao.jpg"
p class="mui-slider-title"幸福就是可以一起睡觉/p
/a
/div
div class="mui-slider-item"
a href="#"
img src="../images/muwu.jpg"
p class="mui-slider-title"想要一间这样的木屋，静静的喝咖啡/p
/a
/div
div class="mui-slider-item"
a href="#"
img src="../images/cbd.jpg"
p class="mui-slider-title"Color of SIP CBD/p
/a
/div
div class="mui-slider-item"
a href="#"
img src="../images/yuantiao.jpg"
p class="mui-slider-title"静静看这世界/p
/a
/div
!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) --
div class="mui-slider-item mui-slider-item-duplicate"
a href="#"
img src="../imagesjiao.jpg"
p class="mui-slider-title"幸福就是可以一起睡觉/p
/a
/div
/div
div class="mui-slider-indicator mui-text-right"
div class="mui-indicator mui-active"/div
div class="mui-indicator"/div
div class="mui-indicator"/div
div class="mui-indicator"/div
/div
/div
/div
/body
script src="../js/mui.min.js"/script
script
// alert("!!!!!");
var slider = mui("#slider");
slider.slider({
interval: 5000
});
/script
html
可以参照一下，里面有详尽的解析，便于你更好的理解！
相关问答
Q1: 我想制作 jquery 图片循环效果。 对应浏览器 按照100% 操作
div宽度百分百，ul宽度可以用jquery算下可见宽度，大概是这么个思路吧。不过这样不支持浏览器缩放，可以用resize试试
Q2: jquery 图片轮播怎么设置？求高手帮忙
!DOCTYPE html
html
head
meta charset=UTF-8
title
RunJS 演示代码
/title
style
#pic{
width:400px;
height:210px;
overflow:hidden;
margin:0 auto;
margin-top:100px;
}
#pic div#gg{
width:398px;
height:198px;
position:relative;
overflow:hidden;
z-index: 1;
}
#pic div#num{
width:100px;
height:20px;
position:absolute;
left: 279px;
top: 164px;
z-index:3;
}
#pic div#num span{
width:20px;
height:20px;
cursor:pointer;
line-height:20px;
float:left;
text-align:center;
color:#000000;
}
#pic div#num span.cut{
background-color:#000000;
color:#FFFFFF;
}
#pic img{
width:400px;
height:200px;
float:left;
}
#pic div#ass{
width:2000px;
position:absolute;
z-index:0;
height:195px;
z-index:2;
}
/style
script id="jquery_180" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.0.min.js"/script
script
jQuery(function($){
var w = $("img").width();
$("span").hover(function(){
var me = $(this);
me.addClass("cut").siblings("span.cut").removeClass("cut");
$("#ass").stop().animate({
left: "-" + w * me.index() + "px"
}, "slow");
});
});
/script
/head
body
div id="pic"
div id="gg"
div id="ass"
img src=";wapiknowquality=100size=w250sec=0di=513c25df22650d5a18aee135fdc8ca01src=http%3A%2F%2Fimg.iknow.bdimg.com%2Fzhidaoribao2014%2F2015year%2F0314%2F4.jpg" /
img src=";wapiknowquality=100size=w250sec=0di=45039ef63beef48c27123fbfd1d0fa87src=http%3A%2F%2Fimg.iknow.bdimg.com%2Fzhidaoribao2014%2F2015year%2F0314%2F2.jpg" /
img src="" /
/div
div id="num"
span class="cut"
1
/span
span
2
/span
span
3
/span
/div
/div
/div
/body
/html
Q3: jQuery 循环图片滚动切换效果代码,求代码和解释
这个代码我写过，不过实现的不完美，现在没时间写，留着明天再给你发
Q4: Jquery图片轮播循环问题，求大神指教，怎么实现循环播放？
//js
var isround = "";
var i=0;
$(function(){
isround = setTimeout("change()",3000);
$("div[name=ban] div img:eq(0)").show().siblings().hide();
$(".num li:eq(0)").addClass("current").siblings().removeClass("current");
$(".num li").click(function(){
i=$(".num li").index(this);
$(this).addClass("current").siblings().removeClass("current");
$("div[name=ban] div img").eq($(".num li").index(this)).show().siblings().hide();
isround = setTimeout("change()",3000);
}).hover(function(){
clearTimeout(isround)
},function(){
isround = setTimeout("change()",3000);
})
})
function change(){
if(i==$(".num li").length) i=0;
$(".num li").eq(i).addClass("current").siblings().removeClass("current");
$("div[name=ban] div img").eq(i).show().siblings().hide();
i++;
setTimeout("change()",3000);
}
//html
div name="ban"
div
!--图片--
img src="/resources/images/f1.jpg" width="369px" height="114px" /
img src="/resources/images/f2.jpg" width="369px" height="114px" /
img src="/resources/images/f1.jpg" width="369px" height="114px" /
img src="/resources/images/f2.jpg" width="369px" height="114px" /
img src="/resources/images/f1.jpg" width="369px" height="114px" /
/div
div class="numbox"
!--选项--
ul class="num"
li class="current"/li
li/li
li/li
li/li
li/li
/ul
/div
/div
不懂再问，这是我自己写的一个轮换，里面包括了点击事件，原理是控制图片的显示隐藏，
别的有控制高度等等之类的 。
Q5: Jquery怎么样循环遍历修改img图片路径和连接路径？
$("img").each(function(){
$(this).attr("src","newsrcValue");//修改图片路径
$(this).parent("a").attr("href","newhrefValue");//修改链接路径
})
