The specific code for a navigation scrolling effect implemented by jquery

The specific code for a navigation scrolling effect implemented by jquery_jquery

WBOY

Release： 2016-05-16 17:33:19

Original

989 people have browsed it

When I was building a campus video website, there was a navigation page on the homepage that needed to achieve a scrolling effect. There were examples, but the code was difficult to understand. It seemed that in web design, only my own code was understood, so I simply imitated the effects of others. I made one myself, and it's generally OK. It looks relatively smooth, not inferior to the original one.

Copy the code here now, and simplify the modifications one by one later:
To achieve the scrolling effect, the script code is as follows:

Copy the code The code is as follows:

 
var all=0; 
var no=0; 
var s_width=0; 
$(document).ready( function(){ 
all=$('.slide').length; 
s_width=$('.slide').eq(0).width(); 
$("#slides" ).css('width',all*s_width); 
var contiar=$('.control_links'); 
for(var i=0;icontiar.append ("
"); 
} 
$('.control_links li').bind('click mouseenter',function(){ 
var index=$(this ).index(); 
no=index; 
var no_= no%all; 
$("#slides").animate({left:(-1*no_*s_width) 'px' },200); 
$(this).css('background-color','#fff'); 
$(this).siblings().css('background-color','#333 '); 
}); 
setInterval(function(){ 
var no_= no%all; 
$("#slides").animate({left:(-1*no_* s_width) 'px'},1000); 
var curr= $('.control_links li').eq(no_); 
curr.css('background-color','#fff') 
curr.siblings().css('background-color','#333'); 
no ; 
},5000); 
}); 

css The code is as follows:

Copy code The code is as follows:

 
img{ 
border:none; 
} 
#daohangpic { 
width:1000px; 
margin:0 auto; 
padding:20px; 
overflow:hidden; 
} 
#daohangpic img { 
height:380px; 
width:980px; 
} 

#contiar { 
position:relative; 
width:980px; 
height:380px; 
overflow:hidden; 
margin:0 auto; 
} 
#slides { 
position:absolute; 
border:none; 
} 
.slide { 
 float:left; 
width:980px; 
height:380px; 
overflow:hidden; 
border:none; 
} 
.control_links{ 
position:absolute; 
bottom:10px; 
right:10px; 
z-index:200; 
} 
.control_links,.control_links li { 
list-style: none; 
} 
.control_links li { 
float:left; 
width: 15px; 
height: 15px; 
margin-right: 5px; 
text-align: center; 
background: #333; 
border: 1px solid #666; 
cursor: pointer; 
opacity:0.5; 
} 
.caption { 
position:absolute; 
height:50px ; 
width:100%; 
background-color:#000; 
bottom:0px; 
padding-left:20px; 
padding-top:10px; 
overflow:hidden ; 
z-index:100; 
background:url(hdpng.png) no-repeat scroll 0 -1px; 
} 
.caption h2 { 
color: #FFF; 
font-size: 17px; 
font-weight: bold; 
line-height:25px; 
} 
.caption p{ 
display: block; 
color: #767676 ; 
font-size:12px; 
line-height:15px; 
} 

The area to be scrolled is defined as follows:

Copy code The code is as follows:

grid The list of Les Mills winners was announced

The list of Grammy winners was announced, and all the big names sang at the awards ceremony

569736869323031336368756E77616E2F312E6D6B76" title="Popular celebrities at home and abroad gather together , Uncle Bird Lin Chiling performed a horse-riding dance" target="_blank">

The list of Grammy winners was announced

The list of Grammy winners was announced, and all the big names sang at the awards ceremony

< ;/div>

8696E7869616F616F6A69616E6768752F2A2A2E6D6B76 " title="Three episodes of sadomasochism between Linghu Chong, Dongfang Bubai and Ren Yingying are tear-jerking" target="_blank">