Home >Web Front-end >JS Tutorial >Flash-like stunning focus image playback effect based on jquery1.4.2_jquery

Flash-like stunning focus image playback effect based on jquery1.4.2_jquery

WBOYOriginal: 2016-05-16 18:28:571253browse

OK! No more nonsense! Code posted! Does any expert have a better way and can give some advice?
CSS Code

Copy code The code is as follows:

 
/* 
* images player 
* author:mr·zhong 
* date:2010-04-19 
*/ 
#playerBox{ 
width:305px; 
height:282px; 
border :1px solid #ccc; 
} 
#playerImage ul{ 
padding:0px; 
margin:0px; 
border:0px; 
list-style:none; 
 position:absolute; 
} 
#playerImage ul li{ 
padding:0px; 
margin:0px; 
border:0px; 
list-style:none; 
position :absolute; 
} 
#playerImage li img{ 
width:305px; 
height:282px; 
border:0px; 
} 
#playerNavAndTitle{ 
z -index:10; 
position:absolute; 
height:50px; 
width:305px; 
background-color:#000; 
filter:alpha(opacity=60); 
-moz-opacity: 0.6; 
opacity: 0.6; 
} 
#playerNavAndTitle #playerTitle{ 
width:auto; 
height:20px; 
line-height:30px; 
text-indent:10px; 
} 
#playerNavAndTitle #playerTitle a{ 
color:#FFFFFF; 
text-decoration:none; 
font-weight:bold; 
position:absolute; 
font-size:15px; 
font-family:宋体; 
} 
#playerNavAndTitle #playerTitle a:hover 
{ 
color:Yellow; 
} 
#playerNavAndTitle #playerNav{ 
float:right; 
text-align:right; 
} 
#playerNavAndTitle #playerNav a{ 
float:left; 
display :block; 
background-color:#CC3300; 
border:1px solid #fff; 
width:15px; 
height:15px; 
margin:5px 5px; 
text- align:center; 
line-height:15px; 
text-decoration:none; 
color:#FFFFFF; 
cursor:pointer; 
font-family:宋体; 
} 
#playerNavAndTitle #playerNav .hover{ 
background-color:#FFFFFF; 
border:1px solid #cc3300; 
color:#CC3300; 
float:left; 
display: block; 
width:15px; 
height:15px; 
margin:5px 5px; 
text-align:center; 
line-height:15px; 
text-decoration:none ; 
cursor:pointer; 
font-family:宋体; 
} 

HTML Code

Copy code The code is as follows:

< ;/li>

Test 1
Test 2
Test 3
Test 4
Test 5

< /div>

JS Code

Copy Code The code is as follows:

/*
* images player
* author:mr·zhong
* date:2010-04-19
*/
//Current navigation page number
var currentPage = 1;
//Image interval
var playerTime = 3000;
jquery(function(){
SetPlayerNavPosition();
OnLoadingImages();
OnLoadingLinks( );
setInterval("Player()",playerTime);
});
/*
* Image playback method
*/
function Player(){
PageClick(jquery("#page_" currentPage));
if(currentPage == jquery("#playerNav a").length)
currentPage = 1;
else
currentPage;
}
/*
* Create the image page number and bind the click event of the page number
* count: the number of pages to be created
*/
function CreatePageNberObj(count){
var pages = '';
for(var i = 1; i <= (count - 1); i ){
pages = '' i '';
}
jquery("#playerNav").html(pages);
for(var i = 1; i <= count; i ){
BindPageClick("page_" i);
}
}
/*
* Load the picture collection and set a unique ID for the picture , finally display one and hide others
*/
function OnLoadingImages(){
var li_id = 1;
jquery("#playerImage li").each(function(){
jquery (this).attr("id","play_img_" li_id);
if(li_id > 1){
SetImageShowOrHide(jquery(this),false);
}
li_id;
});
}
/*
* Load the link set corresponding to the image and set a unique ID for the link, and finally display the corresponding link to hide other
*/
function OnLoadingLinks(){
var a_id = 1;
jquery("#playerTitle a").each(function(){
jquery(this).attr("id","link_" a_id);
if(a_id > 1){
SetImageShowOrHide(jquery(this),false);
}
a_id ;
});
CreatePageNberObj(a_id);
}
/*
* The underlying method of binding the click event of the image page number
*/
function BindPageClick(id){
jquery("#" id).click(function(){
PageClick(jquery(this));
});
}
/*
* Image page number Click processing method
* obj: Current page number element object
*/
function PageClick(obj){
var id = obj.attr("idx");
//When a page number is clicked while the page number is playing automatically, the number must be reassigned to the currentPage Recorder
currentPage = id;
//Set all page number styles to default
jquery("#playerNav a").removeClass("hover");
//Set the currently selected page number number For the specified color
SetPageColor(obj,true);
//Show or hide the image
jquery("#playerImage li").each(function(){
if(jquery(this) .attr("id") == ("play_img_" id)){
SetImageShowOrHide(jquery(this),true);
}else{
SetImageShowOrHide(jquery(this),false);
}
});
//Show or hide text chain
jquery("#playerTitle a").each(function(){
if(jquery(this).attr(" id") == ("link_" id)){
SetImageShowOrHide(jquery(this),true);
}else{
SetImageShowOrHide(jquery(this),false);
}
});
}
/*
* Set the specified element or image to be displayed or not hidden
* obj: The element that needs to be hidden
* isShow: Show or hide
*/
function SetImageShowOrHide(obj,isShow){
if(!isShow){
obj.fadeOut(1000);
}else{
obj.fadeIn(2000);
}
}
/*
* Set the specified image page number style
* obj: The element that needs to be set
* isSelect: Whether to select
*/
function SetPageColor( obj,isSelect){
if(!isSelect){
obj.removeClass("hover");
}else{
obj.addClass("hover");
}
}
/*
* Set the image number link and image title DIV position
*/
function SetPlayerNavPosition(){
var offset = jquery("#playerBox").offset() ;
var boxHeight = jquery("#playerBox").height();
var navHeight = jquery("#playerNavAndTitle").height();
jquery("#playerNavAndTitle").css( { top:(offset.top boxHeight - navHeight) 1 "px", left:offset.left 1 "px" });
}

Demo address
Download Address

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Javascript web page black and white effect implementation code (compatible with IE/FF, etc.)_javascript skillsNext article：Javascript web page black and white effect implementation code (compatible with IE/FF, etc.)_javascript skills

See more

Flash-like stunning focus image playback effect based on jquery1.4.2_jquery

Related articles