<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">href="20170711122112.html"href="20170711122112.html"href="20170711122112.html"href="20170711122112.html"
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>廣告橫幅圖片輪顯</title>
<style>
#top_banner{ clear:both; width:100%; height:50%; max-height:500px; margin:0 auto; padding:0px; background-color:#f9f9f9; overflow:hidden; position:relative; z-index:10000;}
#top_banner img{ float:left; width:100%; height:100%; margin:0 auto; cursor:pointer; z-index:-1; }
#top_banner .num{ position:absolute; bottom:1%; left:50%; width:30%; height:10px; margin-left:-15%; text-align:center; display:table; z-index:10001;}
#top_banner .num span{ width:10px; height:10px; line-height:10px; margin-left:1%; cursor:pointer; background-color:#fff; border:1px #f9f9f9 solid; overflow:hidden; display:inline-block; }
#top_banner .num span.on{ width:40px; }
.btn_left{ position:absolute; top:45%; left:5%; width:50px; height:50px; line-height:45px; font-size:36px; color:#ccc; text-align:center; cursor:pointer; border:1px #ddd solid; border-radius:50%; background-color:#fff; filter:alpha(Opacity=70); -moz-opacity:0.7; opacity:0.7; z-index:10001; display:;}
.btn_right{ position:absolute; top:45%; right:5%; width:50px; height:50px; line-height:45px; font-size:36px; color:#ccc; text-align:center; cursor:pointer; border:1px #ddd solid; border-radius:50%; background-color:#fff; filter:alpha(Opacity=70); -moz-opacity:0.7; opacity:0.7; z-index:10001; display:;}
</style>
<script src="js/jquery-1.7.2.min.js"></script>
</head>
<body>
<div id="top_banner">
<a href="#"><img src="images/index/banner.jpg" width="100%" height="100%" border="0" style="z-index: 1; display: none;"></a>
<a href="#"><img src="images/index/banner.jpg" width="100%" height="100%" border="0" style="z-index: 0; display: none;"></a>
<a href="#"><img src="images/index/banner.jpg" width="100%" height="100%" border="0" style="z-index: 0; display: none;"></a>
<a href="#"><img src="images/index/banner.jpg" width="100%" height="100%" border="0" style="z-index: 0; display: none;"></a>
<div class="num">
<p class="mc" id="top_numinner">
<span class="on"></span>
<span class=""></span>
<span class=""></span>
<span class=""></span>
</p>
</div>
<div class="btn_left"><</div>
<div class="btn_right">></div>
</div>
<script>
var top_activeSlide = 0;
var top_numberSlides = 0;
var top_active=0; //當前圖片index号
var top_slides;
var top_pre=0; //上一(yī)張圖片index号
var top_clock;
var top_numpot;
var top_run = false;
//初始化
orbit=$("#top_banner a");
top_slides = orbit.children("img, a");
top_numberSlides=top_slides.size();
top_slides.each(function(){
var _slide = $(this);
_slide.css("z-index", "0");
});
$(".btn_left").css("display", "none"); //隐藏左箭頭
$(".btn_right").css("display", "none"); //隐藏右箭頭
//鼠标放(fàng)上去(qù)，停止輪顯，并顯示左右箭頭
$("#top_banner").bind('mouseover', function(e){
clearInterval(top_clock);
$(".btn_left").css("display", "");
$(".btn_right").css("display", "");
});
//鼠标離(lí)開(kāi)，啓動輪顯，并隐藏左右箭頭
$("#top_banner").bind('mouseout', function(e){
$(".btn_left").css("display", "none");
$(".btn_right").css("display", "none");
clearInterval(top_clock);
top_clock = setInterval("top_step()", 2000);
});
//點擊左箭頭，顯示上一(yī)張圖片
$(".btn_left").bind('click', function(e){
clearInterval(top_clock);
top_pre = top_active;
top_active -= 2;
top_step();
});
//點擊右箭頭，顯示下(xià)一(yī)張圖
$(".btn_right").bind('click', function(e){
clearInterval(top_clock);
top_step();
});
//點擊圖片下(xià)方的小(xiǎo)圖标進行更換指定圖片
top_numpot=$("#top_numinner").children("span");
top_numpot.each(function(i) {
$(this).bind('click', {index:i}, function(e){
clearInterval(top_clock);
top_active=e.data.index;
top_step();
});
});
//初始化開(kāi)始輪顯
top_step();
top_clock =setInterval("top_step()",2000);
//輪顯函數
function top_step(){
if(top_active >= top_numberSlides){
top_active=0;
top_pre=top_numberSlides-1;
}
if( top_active < 0 ){
top_pre=0;
top_active = top_numberSlides-1;
}
top_slides.css("display","none"); //隐藏所有圖片
top_numpot.removeClass("on");
top_numpot.eq(top_active).addClass("on"); //當前top_active成激活狀态
top_slides.eq(top_pre)
.css("display","none") //隐藏上一(yī)張圖片
.css({"z-index" : 0})
top_slides.eq(top_active)
.css({"z-index" : 0})
.fadeIn(1000, function() {
$(this).css("display", "") //顯示當前張圖片
});
top_pre=top_active;
top_active=top_active+1;
}
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>廣告橫幅圖片輪顯</title>
<style>
#top_banner{ clear:both; width:100%; height:50%; max-height:500px; margin:0 auto; padding:0px; background-color:#f9f9f9; overflow:hidden; position:relative; z-index:10000;}
#top_banner img{ float:left; width:100%; height:100%; margin:0 auto; cursor:pointer; z-index:-1; }
#top_banner .num{ position:absolute; bottom:1%; left:50%; width:30%; height:10px; margin-left:-15%; text-align:center; display:table; z-index:10001;}
#top_banner .num span{ width:10px; height:10px; line-height:10px; margin-left:1%; cursor:pointer; background-color:#fff; border:1px #f9f9f9 solid; overflow:hidden; display:inline-block; }
#top_banner .num span.on{ width:40px; }
.btn_left{ position:absolute; top:45%; left:5%; width:50px; height:50px; line-height:45px; font-size:36px; color:#ccc; text-align:center; cursor:pointer; border:1px #ddd solid; border-radius:50%; background-color:#fff; filter:alpha(Opacity=70); -moz-opacity:0.7; opacity:0.7; z-index:10001; display:;}
.btn_right{ position:absolute; top:45%; right:5%; width:50px; height:50px; line-height:45px; font-size:36px; color:#ccc; text-align:center; cursor:pointer; border:1px #ddd solid; border-radius:50%; background-color:#fff; filter:alpha(Opacity=70); -moz-opacity:0.7; opacity:0.7; z-index:10001; display:;}
</style>
<script src="js/jquery-1.7.2.min.js"></script>
</head>
<body>
<div id="top_banner">
<a href="#"><img src="images/index/banner.jpg" width="100%" height="100%" border="0" style="z-index: 1; display: none;"></a>
<a href="#"><img src="images/index/banner.jpg" width="100%" height="100%" border="0" style="z-index: 0; display: none;"></a>
<a href="#"><img src="images/index/banner.jpg" width="100%" height="100%" border="0" style="z-index: 0; display: none;"></a>
<a href="#"><img src="images/index/banner.jpg" width="100%" height="100%" border="0" style="z-index: 0; display: none;"></a>
<div class="num">
<p class="mc" id="top_numinner">
<span class="on"></span>
<span class=""></span>
<span class=""></span>
<span class=""></span>
</p>
</div>
<div class="btn_left"><</div>
<div class="btn_right">></div>
</div>
<script>
var top_activeSlide = 0;
var top_numberSlides = 0;
var top_active=0; //當前圖片index号
var top_slides;
var top_pre=0; //上一(yī)張圖片index号
var top_clock;
var top_numpot;
var top_run = false;
//初始化
orbit=$("#top_banner a");
top_slides = orbit.children("img, a");
top_numberSlides=top_slides.size();
top_slides.each(function(){
var _slide = $(this);
_slide.css("z-index", "0");
});
$(".btn_left").css("display", "none"); //隐藏左箭頭
$(".btn_right").css("display", "none"); //隐藏右箭頭
//鼠标放(fàng)上去(qù)，停止輪顯，并顯示左右箭頭
$("#top_banner").bind('mouseover', function(e){
clearInterval(top_clock);
$(".btn_left").css("display", "");
$(".btn_right").css("display", "");
});
//鼠标離(lí)開(kāi)，啓動輪顯，并隐藏左右箭頭
$("#top_banner").bind('mouseout', function(e){
$(".btn_left").css("display", "none");
$(".btn_right").css("display", "none");
clearInterval(top_clock);
top_clock = setInterval("top_step()", 2000);
});
//點擊左箭頭，顯示上一(yī)張圖片
$(".btn_left").bind('click', function(e){
clearInterval(top_clock);
top_pre = top_active;
top_active -= 2;
top_step();
});
//點擊右箭頭，顯示下(xià)一(yī)張圖
$(".btn_right").bind('click', function(e){
clearInterval(top_clock);
top_step();
});
//點擊圖片下(xià)方的小(xiǎo)圖标進行更換指定圖片
top_numpot=$("#top_numinner").children("span");
top_numpot.each(function(i) {
$(this).bind('click', {index:i}, function(e){
clearInterval(top_clock);
top_active=e.data.index;
top_step();
});
});
//初始化開(kāi)始輪顯
top_step();
top_clock =setInterval("top_step()",2000);
//輪顯函數
function top_step(){
if(top_active >= top_numberSlides){
top_active=0;
top_pre=top_numberSlides-1;
}
if( top_active < 0 ){
top_pre=0;
top_active = top_numberSlides-1;
}
top_slides.css("display","none"); //隐藏所有圖片
top_numpot.removeClass("on");
top_numpot.eq(top_active).addClass("on"); //當前top_active成激活狀态
top_slides.eq(top_pre)
.css("display","none") //隐藏上一(yī)張圖片
.css({"z-index" : 0})
top_slides.eq(top_active)
.css({"z-index" : 0})
.fadeIn(1000, function() {
$(this).css("display", "") //顯示當前張圖片
});
top_pre=top_active;
top_active=top_active+1;
}
</script>
</body>
</html>
475003427