The specific code for a navigation scrolling effect implemented by jquery_jquery

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">

The list of Grammy winners was announced

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

下注

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

The list of Grammy winners was announced

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

Statement of this Website

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