<html>
<head>
<title>yugi</title>
<meta charset=UTF-8 />
<style type="text/css">
#pic {
width: 410px
height: 200px
margin: 0 auto
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 #num span {
width: 10px
margin-left: 10px
cursor: pointer
font-size: 12px
height: 20px
float: left
color: #000000
text-align: center
}
#pic #num span.cut {
background: #000000
color: #FFFFFF
}
img {
width: 370px
height: 165px
float: left
}
</style>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
jQuery (function ($)
{
var CRT = 0
var w = $ ("img").width (), pol = $("#pol"), spans = $ ("#num span")
spans.hover (function ()
{
var me = $ (this)
me.addClass ("cut").siblings (".cut").removeClass ("cut")
spans.eq(CRT).clearQueue()
pol.stop ().animate (
{
left : "-" + w * (CRT = me.index ()) + "px"
}, "slow")
}, function()
{
anony()
})
var anony = function ()
{
CRT++
CRT = CRT > spans.length - 1 ? 0 : CRT
spans.eq(CRT).clearQueue().delay(1000).queue (function()
{
spans.eq(CRT).triggerHandler ("mouseover")
anony()
})
}
anony()
})
</script>
</head>
<body>
<div id="pic">
<div id="po">
<div id="pol">
<img src="../../图片/素材/738b4710b912c8fcbb648ccdfe039245d688211e.jpg" />
<img src="../../图片/素材/9f510fb30f2442a76c08f9a4d343ad4bd11302a8.jpg" />
<img src="../../图片/素材/fd039245d688d43f76f37f527e1ed21b0ef43b3c.jpg" />
<img src="../../图片/素材/11385343fbf2b21154e02b29c88065380dd78e8f.jpg" />
<img src="../../图片/素材/a08b87d6277f9e2f7dd1b36f1d30e924b999f3f5.jpg" />
</div>
<div id="num">
<span class="cut"> 1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>Hello 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>
可以参照一下，里面有详尽的解析，便于你更好的理解！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）