JS 기반 바 이 두 100 개 홈 페이지 를 모방 한 라운드 맵 효과 구현
<div class="ShowEntry">
<!-- <div id="widget_content_player" class="Player" alog-group="log-player">-->
<!--------- --------->
<a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" id="widget_content_player_prev" class="prev carousel-btn-prev">
<span class="icon-wrap"><img src="image/ .png"></span>
</a>
<div id="widget_content_player_wrapper" class="player">
<!---------- ------->
<div id="widget_content_player_imgView" class="imgview">
<!---------- ------->
<a href="" target=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" _blank" mon="a=12&col=1&pn=2">
<img src="http://d.hiphotos.baidu.com/news/q%3D100/sign=da32af9f01fa513d57aa68de0d6c554c/c75c10385343fbf2f9ac9c60b97eca8064388ff4.jpg" hadcut="1" class="active" style="width: 100%; height: 100%; opacity: 1;">
</a>
<a href="" target=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" _blank" mon="a=12&col=1&pn=2">
<img src="image/95eef01f3a292df570506750b5315c6035a873e0.jpg" style="width: 100%; height: 100%; opacity: 1;">
</a>
<a href="" target=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" _blank" mon="a=12&col=1&pn=2">
<img src="image/0824ab18972bd407e8f01db872899e510fb30944.jpg.png" style="width: 100%; height: 100%; opacity: 1;">
</a>
<a href="" target=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" _blank" mon="a=12&col=1&pn=2">
<img src="image/9825bc315c6034a8cfd58fc7c213495409237644.jpg" style="width: 100%; height: 100%; opacity: 1;">
</a>
<!--<div class="readnum"><span class="tit"> </span><span class="num" data-read="16913">16913</span></div>-->
<!---------- , js ------->
<div class="box">
<i class="mark"></i>
<a href="http://mbcaijing.baijia.baidu.com/article/755645" target="_blank" class="title"> 400 : </a>
<a href="http://mbcaijing.baijia.baidu.com/article/755645" target="_blank" class="title" style="display:none"> </a>
<a href="http://mbcaijing.baijia.baidu.com/article/755645" target="_blank" class="title" style="display:none"> </a>
<a href="http://mbcaijing.baijia.baidu.com/article/755645" target="_blank" class="title" style="display:none"> </a>
</div>
</div>
<!---------- ------->
<div class="circles">
<a href="http://guoshiliangbo.baijia.baidu.com/article/756806" class="circle" target="_blank" style="background:red"></a>
<a href="http://yemacaijing.baijia.baidu.com/article/755797" class="circle" target="_blank"></a>
<a href="http://mbcaijing.baijia.baidu.com/article/755645" class="circle " target="_blank"></a>
<a href="http://junstapo.baijia.baidu.com/article/755717" class="circle " target="_blank" ></a>
</div>
</div>
<!--------- --------->
<a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" id="widget_content_player_next" class="next carousel-btn-next">
<span class="icon-wrap"><img src="image/ .png"</span>
</a>
<!-- </div>-->
</div>
CSS
.ShowEntry{
height:inherit;
width:70%;
background:#00F;
margin-right:10px;
float:left;
position:relative;
}
.ShowEntry .carousel-btn-prev, .ShowEntry .carousel-btn-next {
position: absolute;
top: 130px;
width: 50px;
height: 50px;
z-index: 89;
}
.addBgi{
background-image:url(../image/%E5%9C%86.png);
background-repeat: no-repeat;
}
.ShowEntry .carousel-btn-prev {
left: 15px;
background-position: -10px -95px\9;
/*background-image:url(../image/%E5%B7%A6%E7%AE%AD%E5%A4%B4.png)*/
}
.ShowEntry .carousel-btn-next {
right: 15px;
background-position: -160px -95px\9;
}
.ShowEntry .icon-wrap {
position: relative;
display: block;
margin: 10% 0 0 10%;
width: 80%;
height: 80%;
/* z-index:99;*/
}
.player {
position: relative;
}
.player .imgview {
/*width: 670px;*/
height: 300px;
position: relative;
overflow: hidden;
background: #ccc;
}
.circles{
position: absolute;
bottom: 20px;
right: 0;
width: 80px;
height: 8px;
}
/*.player .circles .active*/
.active {
background: red;
opacity: 1;/*��ȫ����*/
}
.player .circles .circle {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
background:#000;
margin-left: 2px;
opacity: .7;
}
.box{
height:80px;
width:100%;
position:absolute;
bottom:0;
}
.box .title {
font-size: 18px;
line-height: 70px;
color: #fff;
font-family: "���ź�","Hiragino Sans GB";
display: block;
text-align:center;
}
.box .title:hover {
text-decoration: none;
color: #e05a5a;
}
javascript
var index=0;
// :2 auto_play
var circulate=setInterval(auto_play,2000);//
//
function auto_play(){
//alert(index);
if(index>=3)
{index=0;}
else {index=index+1;}
changePic(index);
/*$(".imgview img").css("display","none");*/
//$(".imgview img").attr("src",imgs[index]);
//alert(index);
}
//
function changePic(index){
//alert(index);
$(".imgview a").css("display","none");
$(".box a").css("display","none");
$(".circles a").css("background","#000");
//var src=$(".imgview a:eq("+index+")").attr("target");
//alert(src);
$(".imgview a:eq("+index+")").css("display","inline");
$(".box a:eq("+index+")").css("display","block");
$(".circles a:eq("+index+")").css("background","red");
//alert(src);
}
//
$(".imgview").mouseenter(function(){
//alert("hi!");
clearInterval(circulate);
})
//
$(".imgview").mouseleave(function(){
//alert("hi!");
circulate=setInterval(auto_play,2000);
})
//
$(".circle").mouseenter(function(){
// circle ?
var num=$(this).index();
//alert(num);
clearInterval(circulate);
changePic(num);
circulate=setInterval(auto_play,2000);
});
//
$(".carousel-btn-prev").click(function(){
clearInterval(circulate);
//alert(index);
//1. :index;
if(index==0)index=3;
else index=index-1;
changePic(index);
circulate=setInterval(auto_play,2000);
});
//
$(".carousel-btn-next").click(function(){
clearInterval(circulate);
//alert(index);
//1. :index;
if(index==3)index=0;
else index=index+1;
changePic(index);
circulate=setInterval(auto_play,2000);
});
위 에서 말 한 것 은 편집장 님 께 서 소개 해 주신 JS 를 바탕 으로 바 이 두 백 개 홈 페이지 를 모방 한 라운드 맵 효 과 를 실현 하 는 것 입 니 다.여러분 께 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 님 께 서 신속하게 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.