图片切换自动切换带左右按钮与分页索引按钮控制图片

最新推荐文章于 2021-06-03 04:54:00 发布

iteye_1931

最新推荐文章于 2021-06-03 04:54:00 发布

阅读量427

点赞数

文章标签： xhtml javascript ViewUI

图片切换自动切换显示隐藏showhide带左右按钮与分页索引按钮控制图片自动切换显示隐藏showhide
演示地址:http://www.corange.cn/demo/3804/index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery 图片切换显示隐藏show/hide带左右按钮与分页索引按钮控制图片显示隐藏show/hide</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial;}
a{font-size:12px;color:#ff6600;text-decoration:none;}
a:hover{color:#3366cc;}
/* dlyL */
.dlyL{width:690px;height:415px;position:relative;margin:20px auto;}
.dlyL b{background:url(images/icons-arrow.gif) no-repeat;}
.dlyL b{width:10px;height:15px;display:block;position:absolute;top:35px;cursor:pointer;}
.dlyL b.prev{left:13px;top:110px;background-position:0 0;}
.dlyL b.next{right:13px;top:110px;background-position:-9px 0;}
.dlyL div{width:620px;height:340px;margin:0 auto 9px;overflow:hidden;border:solid 1px #ddd;}
.dlyL span{display:block;text-align:center;}
.dlyL span i{padding:2px 5px;background-color:#cbcbcb;color:#fff;margin:auto 1px;cursor:pointer;}
.dlyL span i.current{background-color:#ef7000;}
.dlyL h4{font-weight:normal;text-align:center;padding-top:8px;}
</style>
</head>

<body>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
$(function(){
var $index = 0;
var $nav = $(".dlyL span i");
var $text = $(".dlyL h4 a");
var $pics = $(".dlyL div a");

$(".dlyL span i").click(function(){
var $self = $(this);
var $index = $nav.index($self);
showMzin($index);

$(".dlyL b.next").click(function(){
if($index<3){/* 设置4个显示分页 */
$index++
}
else if($index==3){ /* 设置4个显示分页 */
$index=0
}
showMzin($index);
});

$(".dlyL b.prev").click(function(){
if($index>0){
$index--
}
else if($index==0){
$index=3 /* 设置4个显示分页 */
}
showMzin($index);
});

}).eq(0).trigger("click");

function showMzin(i){
$pics.hide(),
$pics.eq(i).show(),
$text.hide(),
$text.eq(i).show(),
$nav.removeClass("current"),
$nav.eq(i).addClass("current");
}

DLYTime =setInterval(function(){
$(".dlyL b.next").trigger("click");
}, 3000);

$(".dlyL").mouseover(function(){
if(DLYTime){clearInterval(DLYTime);}
});

$(".dlyL").mouseout(function(){
DLYTime =setInterval(function(){
$(".dlyL b.next").trigger("click");
},3000);
});

});
</script>
<div class="dlyL">
<b class="prev"></b>
<b class="next"></b>
<div>
<a href=""><img width="620" height="340" alt="" src="../demo1.jpg" /></a>
<a href=""><img width="620" height="340" alt="" src="../demo2.jpg" /></a>
<a href=""><img width="620" height="340" alt="" src="../demo3.jpg" /></a>
<a href=""><img width="620" height="340" alt="" src="../demo4.jpg" /></a>
</div>
<span>
<i>1</i><i>2</i><i>3</i><i>4</i>
</span>
<h4>
<a href="http://www.corange.cn">www.corange.cn</a>
<a href="">j</a>
<a href="">2</a>
<a href="">3</a>
</h4>
</div>
</body>
</html>

原文地址:http://www.corange.cn/archives/2011/12/3804.html

iteye_1931

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片切换自动切换带左右按钮与分页索引按钮控制图片

图片切换自动切换显示隐藏showhide带左右按钮与分页索引按钮控制图片自动切换显示隐藏showhide演示地址:http://www.corange.cn/demo/3804/index.html &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/...
复制链接

扫一扫