css部分
<style type="text/css">
body, ul, dl, dd, dt, ol, li, p, h1, h2, h3, h4, h5, h6, textarea, form, select, fieldset, table, td, div, input {margin:0;padding:0;-webkit-text-size-adjust: none}
h1, h2, h3, h4, h5, h6{font-size:12px;font-weight:normal}
body>div{margin:0 auto}
body{background:#D40000}
div {text-align:left}
a img {border:0}
body { color: #333; text-align: center; font: 12px "微软雅黑"; }
ul, ol, li {list-style-type:none;vertical-align:0}
a {outline-style:none;color:#535353;text-decoration:none}
a:hover { color: #D40000; text-decoration: none}
#main{width:920px;height:430px;overflow:hidden;position:relative;margin:0px auto;}
#main .box{width:820px;height:430px;box-shadow:0px 0px 5px #ddd;margin:0px auto;overflow:hidden;position:relative;}
#main .box img{width:820px;height:430px;position:absolute;left:0px;top:0px;opacity:0;filter:alpha(opacity=0);}
#main .btnLeft{width:35px;height:57px;position:absolute;left:0px;top:185px;background:url("http://www.internetke.com/jsEffects/2015050702/images/left_ar.png") no-repeat 0px 0px;}
#main .btnRight{width:35px;height:57px;position:absolute;right:0px;top:185px;background:url("http://www.internetke.com/jsEffects/2015050702/images/right_ar.png") no-repeat 0px 0px;}
#main .page{width:132px;height:22px;position:absolute;bottom:15px;right:50px;line-height: 24px;}
#main .page a{display:inline-block;width:22px;height:22px;background:url("http://www.internetke.com/jsEffects/2015050702/images/num_grey.png") no-repeat 0px 0px;margin:0px 11px;float:left;color:#FFF;text-decoration:none;text-align:center;}
#main .page a.active{background:url("http://www.internetke.com/jsEffects/2015050702/images/num_red.png") no-repeat 0px 0px;}
</style>
html部分
<div class="kePublic">
<!--效果html开始-->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function(){
var aPage = $(‘#main .page a‘); //分页按钮
var aImg = $(‘#main .box img‘); //图像集合
var iSize = aImg.size(); //图像个数
var index = 0; //切换索引
var t;
$(‘#btnLeft‘).click(function(){ //左边按钮点击
index--;
if(index<0){
index=iSize-1
}
change(index)
})
$(‘#btnRight‘).click(function(){ //右边按钮点击
index++;
if(index>iSize-1){
index=0
}
change(index)
})
//分页按钮点击
aPage.click(function(){
index = $(this).index();
change(index)
});
//切换过程
function change(index){
aPage.removeClass(‘active‘);
aPage.eq(index).addClass(‘active‘);
aImg.stop();
//隐藏除了当前元素，所以图像
aImg.eq(index).siblings().animate({
opacity:0
},1000)
//显示当前图像
aImg.eq(index).animate({
opacity:1
},1000)
}
function autoshow() {
index=index+1;
if(index<=iSize-1){
change(index);
}else{
index=0;
change(index);
}
}
int=setInterval(autoshow,3000);
function clearInt() {
$(‘#btnLeft,#btnRight,.page a‘).mouseover(function() {
clearInterval(int);
})
}
function setInt() {
$(‘#btnLeft,#btnRight,.page a‘).mouseout(function() {
int=setInterval(autoshow,3000);
})
}
clearInt();
setInt();
})
</script>
<div id="main">
<a class="btnLeft" id="btnLeft" href="javascript:void(0);"></a>
<a class="btnRight" id="btnRight" href="javascript:void(0);"></a>
<div class="box">
<img style="opacity:1;filter:alpha(opacity=100);" src="http://www.internetke.com/jsEffects/2015050702/images/intro1.jpg" />
<img src="http://www.internetke.com/jsEffects/2015050702/images/intro2.jpg" />
<img src="http://www.internetke.com/jsEffects/2015050702/images/intro3.jpg" /> </div>
<div class="page">
<a class="active" href="javascript:void(0);">1</a>
<a href="javascript:void(0);">2</a> <a href="javascript:void(0);">3</a>
</div>
</div></div>
js部分
<script type="text/javascript">
$(function(){
var aPage = $(‘#main .page a‘); //分页按钮
var aImg = $(‘#main .box img‘); //图像集合
var iSize = aImg.size(); //图像个数
var index = 0; //切换索引
var t;
$(‘#btnLeft‘).click(function(){ //左边按钮点击
index--;
if(index<0){
index=iSize-1
}
change(index)
})
$(‘#btnRight‘).click(function(){ //右边按钮点击
index++;
if(index>iSize-1){
index=0
}
change(index)
})
//分页按钮点击
aPage.click(function(){
index = $(this).index();
change(index)
});
//切换过程
function change(index){
aPage.removeClass(‘active‘);
aPage.eq(index).addClass(‘active‘);
aImg.stop();
//隐藏除了当前元素，所以图像
aImg.eq(index).siblings().animate({
opacity:0
},1000)
//显示当前图像
aImg.eq(index).animate({
opacity:1
},1000)
}
function autoshow() {
index=index+1;
if(index<=iSize-1){
change(index);
}else{
index=0;
change(index);
}
}
int=setInterval(autoshow,3000);
function clearInt() {
$(‘#btnLeft,#btnRight,.page a‘).mouseover(function() {
clearInterval(int);
})
}
function setInt() {
$(‘#btnLeft,#btnRight,.page a‘).mouseout(function() {
int=setInterval(autoshow,3000);
})
}
clearInt();
setInt();
})
</script>
时间： 2024-10-12 20:05:50