jquery自动切换图片
2015-06-10 16:03
656 查看
/*CSS*/
.BannerBOX{width:100%; height:425px; position:relative; overflow:hidden; margin:0 auto; min-width:1100px;}
.cdl li{ width:20px; height:20px; float:left; list-style:none; background-image:url(../images/banner_yq.png); background-repeat:no-repeat; margin-right:14px;}
.cdl .cdd{background-image:url(../images/banner_hover.png); background-repeat:no-repeat;}
.BannerBOX img{ border:none 0; width: 100%; height: 425px;;}
.BannerBOX ul{position:absolute; width:180px;left:66.5%; bottom:20px;}
/*JS*/
$(function(){
/*点击按钮切换图片*/
$(".cdl li").click(function(){
var x=$(".cdl li").index(this);
n=x;
$(".photo").hide();
$(".photo").eq(x).show();
$(".cdl li").removeClass("cdd");
$(this).addClass("cdd");
});
/*图片自动切换*/
$(".photo").hide();
$(".photo").eq(0).show();
var n=0;
function nup(){
if(n<4){
n=n+1;
}else{n=0;}
$(".photo").hide();
$(".photo").eq(n).show();
$(".cdl li").removeClass("cdd");
$(".cdl li").eq(n).addClass("cdd")
};
var time=setInterval(nup,2000);
$(".BannerBOX").hover(function(){
clearInterval(time)
},function(){
time=setInterval(nup,2000)
});
});
/*html*/
<div class="BannerBOX">
<img src="images/banner1.jpg" class="photo"/>
<img src="images/banner2.png" class="photo"/>
<img src="images/banner3.jpg" class="photo"/>
<img src="images/banner4.jpg" class="photo"/>
<img src="images/banner5.jpg" class="photo"/>
<ul class="cdl">
<li class="cdd"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
.BannerBOX{width:100%; height:425px; position:relative; overflow:hidden; margin:0 auto; min-width:1100px;}
.cdl li{ width:20px; height:20px; float:left; list-style:none; background-image:url(../images/banner_yq.png); background-repeat:no-repeat; margin-right:14px;}
.cdl .cdd{background-image:url(../images/banner_hover.png); background-repeat:no-repeat;}
.BannerBOX img{ border:none 0; width: 100%; height: 425px;;}
.BannerBOX ul{position:absolute; width:180px;left:66.5%; bottom:20px;}
/*JS*/
$(function(){
/*点击按钮切换图片*/
$(".cdl li").click(function(){
var x=$(".cdl li").index(this);
n=x;
$(".photo").hide();
$(".photo").eq(x).show();
$(".cdl li").removeClass("cdd");
$(this).addClass("cdd");
});
/*图片自动切换*/
$(".photo").hide();
$(".photo").eq(0).show();
var n=0;
function nup(){
if(n<4){
n=n+1;
}else{n=0;}
$(".photo").hide();
$(".photo").eq(n).show();
$(".cdl li").removeClass("cdd");
$(".cdl li").eq(n).addClass("cdd")
};
var time=setInterval(nup,2000);
$(".BannerBOX").hover(function(){
clearInterval(time)
},function(){
time=setInterval(nup,2000)
});
});
/*html*/
<div class="BannerBOX">
<img src="images/banner1.jpg" class="photo"/>
<img src="images/banner2.png" class="photo"/>
<img src="images/banner3.jpg" class="photo"/>
<img src="images/banner4.jpg" class="photo"/>
<img src="images/banner5.jpg" class="photo"/>
<ul class="cdl">
<li class="cdd"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
相关文章推荐
- jquery 初步 (一)
- seajs模块化jQuery与jQuery插件
- 翻译jquery官方的插件制作方法
- jQuery 设置属性的值
- 【jQuery:遍历相同class的所有值,遍历某一列td的值】
- 【jQuery:遍历相同class的所有值,遍历某一列td的值】
- jQuery操控DOM元素-访问页面的元素
- 【jQuery:遍历相同class的所有值,遍历某一列td的值】
- jQuery对新添加的控件添加响应事件
- 查看jquery绑定的事件函数
- jQuery 限制文本框只能输入数字
- jquery 表格自动拆分(方便打印)插件-printTable
- jquery实现网页自动添加必填项图标和日期自动填充
- 精心挑选的12款优秀 jQuery Ajax 分页插件和教程
- Jquery使用Ajax构建方法返回值
- 支付宝抢红包图片随机显示jQuery特效
- jQuery插件之ajaxFileUpload
- BUG:ie6\7\8 使用jQuery设置页面标题
- jquery的$.extend和$.fn.extend作用及区别
- myeclipse中导入的jquery文件报错(出现红叉叉,提示语法错误) .