淡入淡出轮播图

<!DOCTYPE html>
<html>
<head>
<style type="text/css">

body{background:#57beb9;}
/* main */
#main{width:920px;height:430px;overflow:hidden;position:relative;margin:30px 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(images/left_ar.png) no-repeat 0px 0px;}
#main .btnRight{width:35px;height:57px;position:absolute;right:0px;top:185px;background:url(images/right_ar.png) no-repeat 0px 0px;}
#main .page{width:132px;height:22px;position:absolute;bottom:15px;right:50px;}
#main .page a{display:inline-block;width:22px;height:22px;background:url(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(images/num_red.png) no-repeat 0px 0px;}

</style>
</head>
<body>
<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;" src="images/intro1.jpg">
<img src="images/intro2.jpg" style="opacity: 0;">
<img src="images/intro3.jpg" style="opacity: 0;">
</div>
<div class="page">
<a class="active" href="javascript:void(0);">1</a>
<a href="javascript:void(0);" class="">2</a> <a href="javascript:void(0);" class="">3</a>
</div>
</div>
<script type="text/javascript" src="jquery-1.11.0.min.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>
</body>
</html>

时间: 2024-10-18 16:56:26

淡入淡出轮播图的相关文章

jQuery淡入淡出轮播图实现

大家好我是QD小白,这是人生第一次写博客,准备写的内容是Jquery淡入淡出轮播图实现,在此之前学习JS写的轮播图效果都感觉不怎么好,学习了jQuery里的淡入淡出效果后又写了一次轮播图效果明显感觉好了许多.现在我就来分享下自己写轮播图的思路和方法. HTML部分: <div id="img-box" style="width:700px; height:350px;"> <img style="opacity: 1;" wid

Jquery淡入淡出轮播图

Jquery淡入淡出轮播图 因为代码不多所以我就写一个html文件里了 html代码 <div class="banner"> <ul> <li><a href="javascript:;"><img src="./1 (1).png" /></a></li> <li><a href="javascript:;"><

jq交叉淡入淡出轮播图

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 *{ 8 padding:0; 9 margin:0; 10 } 11 ul,ol{ 12 list-style:

js无缝轮播 和淡入淡出轮播

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin:0;padding:0;} ul,li{ list-style: none; } #banner{ width: 800px; height: 400px; margin: 30

jQuery淡入淡出效果轮播图

用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div. html结构如下: <div id="container"> <ul class="pic"> <li><a href="javascript:;"><img src="DSC01627.jpg"

(新手向)基于Bootstrap的简单轮播图的手机实现

个人电脑里存了不少适合手机欣赏的图片,但是放手机里看是件很占据资源的事.鉴于家里有一台电脑经常开着,正好用来做家庭局域网共享,于是笔者就设想通过一种比较简单环保的思路.通过手机访问电脑内的图片. 首先是本地站点搭建:win+R输入mmc打开控制台,文件-添加/删除管理单元,Internet信息服务.添加确定,右侧基本信息,新建网站-把路径改了.设定一个端口号,手机浏览器就可以输入  电脑局域网ip:端口号 就可以连上去了. 接下来问题来了,一个个点击查看然后关闭图片是一件更不环保的事.何不做一个

jQ实现的一个轮播图

众所周知,轮播图是被广泛的运用的. 轮播图我们在很多的网站上都可以看到,例如淘宝.京东这些网站都很常见. 下面开始我们的轮播之旅: 搭建我们的骨架: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 9 </body> 10 <

jq龙禧轮播图

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 *{ 8 padding:0; 9 margin:0; 10 } 11 .carousel{ 12 height:6

jQuery无缝轮播图思路详解-唯品会

效果图如上: 需求:图片自动轮播,鼠标移上停止播放,离开恢复播放,箭头切换图片. html代码 <!--轮播图大盒子开始--> <div class="wrap"> <!--大盒子上部分轮播图--> <div class="wrapUp"> <ul> <li class="cur"><a href="#"><img src="i