Web Front-end
JS Tutorial
Imitation Youku picture carousel special effects code based on jquery_jquery
Imitation Youku picture carousel special effects code based on jquery_jquery
This article shares with you a common and relatively complex carousel effect, which is the carousel image on Youku’s main interface. The effect picture is as follows:
Before writing the code, we first analyze the structure of the rendering:
1. The left and right direction buttons can be used to switch between the previous and next pictures.
2. There is a paging indicator below to mark which picture you have scrolled to. Of course, you can also jump to the corresponding picture by clicking the corresponding button.
3. The main display area in the middle is used to display pictures that need to be rotated.
According to the above description, we can first write HTML code.
1. HTML code
<body>
<div id="youku">
<div class="anniu">
<span class="zuo"></span>
<span class="you"></span>
</div>
<ul class="tuul">
<li class="no0"><a href="#"><img src="images/0.jpg" /></a></li>
<li class="no1"><a href="#"><img src="images/1.jpg" /></a></li>
<li class="no2"><a href="#"><img src="images/2.jpg" /></a></li>
<li class="no3"><a href="#"><img src="images/3.jpg" /></a></li>
<li class="no4"><a href="#"><img src="images/4.jpg" /></a></li>
<li class="waiting"><a href="#"><img src="images/5.jpg" /></a></li>
<li class="waiting"><a href="#"><img src="images/6.jpg" /></a></li>
<li class="waiting"><a href="#"><img src="images/7.jpg" /></a></li>
<li class="waiting"><a href="#"><img src="images/8.jpg" /></a></li>
</ul>
<div class="xiaoyuandian">
<ul>
<li></li>
<li></li>
<li class="cur"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body> The content of the code is clear at a glance and is consistent with what I described above; there are two points I need to explain here:
1. The ul whose class is tuul is used to store pictures that need to be rotated; the li inside mainly has two classes: packaged in the form of "no" and "waiting", where the "no" series indicates that it may currently be in the "active" state pictures, and "waiting" means that these pictures are currently hidden, which is reflected in the following CSS code.
2. The paging indicator sets the class of the third li to cur by default. Because the number of "active" pictures initially set in Tuul is 5, the third chapter is displayed in the center by default. But I don’t know if you have any doubts. In the initial state, the number of pictures displayed on the interface is 3, so why not choose the second picture as the centered picture? That's because when you click the button on the left, if you choose to display the second picture in the center, the first picture can be seen, but there is no picture in front of the first picture. When you click the left button, it is "exposed". So the overall design idea is: there are three pictures displayed on the interface, and there is one picture on the left and right of the part beyond the interface, but you can't see it. In the following explanation, I will explain this implementation process in detail.
2. CSS code
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#youku{
width: 1189px;
height: 360px;
margin: 100px auto;
position: relative;
overflow: hidden;
}
#youku ul{
list-style: none;
}
#youku .tuul li{
position: absolute;
background-color: black;
}
#youku li.waiting{
display: none;
}
#youku li img{
width: 100%;
height: 100%;
}
#youku .anniu .zuo{
position: absolute;
width: 45px;
height: 45px;
background:url(images/zuo.png) no-repeat;
top:100px;
left:10px;
z-index: 1000;
cursor: pointer;
}
#youku .anniu .you{
position: absolute;
width: 45px;
height: 45px;
background:url(images/you.png) no-repeat;
top:100px;
right:10px;
z-index: 1000;
cursor: pointer;
}
#youku li.no0{width: 174px;height:122px;left:-116px;top:100px;z-index: 777;}
#youku li.no1{width: 356px;height:223px;left:0px;top:26px;z-index: 888;}
#youku li.no2{width: 642px;height:273px;left:274px;top:0px;z-index: 999;}
#youku li.no3{width: 356px;height:223px;left:834px;top:26px;z-index: 888;}
#youku li.no4{width: 174px;height:122px;left:1097px;top:100px;z-index: 777;}
#youku li.no1 img , #youku li.no3 img{
opacity: 0.3;
}
#youku .xiaoyuandian{
width: 600px;
height: 20px;
position: absolute;
top: 312px;
left: 454px;
}
#youku .xiaoyuandian ul li{
float: left;
width: 16px;
height: 16px;
background-color: blue;
margin-right: 10px;
border-radius: 100px;
cursor: pointer;
}
#youku .xiaoyuandian ul li.cur{
background-color:green;
}
</style>
I won’t explain the CSS here one by one. If you want to know more specifically, please refer to the series I wrote before on JS & JQuery. Here, I will only explain two points:
1. For the CSS settings of the "active" images, that is, the settings of #youku li.no0~no4, notice that the left value of no0 is a negative number, and the left value of no1 is 0, which confirms the point I expressed above , the static state of the visual range displays three pictures, and the remaining two pictures are on the left and right sides of the visual range respectively. Pay attention to setting the z-index value of each picture so that it has a three-dimensional sense of hierarchy. The larger the value, the closer it is to display.
2. For the images on both sides of the visible range, set the opacity to make them darker.
After setting the above CSS code, the analysis diagram is as follows:
3. JQuery code
<script type="text/javascript">
$(document).ready(
function() {
//定义一个初始速度
var sudu = 600;
var shangdi = false;
//定义json
var json0 = {"width":"174px","height":"122px","left":"-116px", "top":"100px"};
var json1 = {"width":"356px","height":"223px","left":"0px", "top":"26px"};
var json2 = {"width":"642px","height":"273px","left":"274px", "top":"0"};
var json3 = {"width":"356px","height":"223px","left":"834px", "top":"26px"};
var json4 = {"width":"174px","height":"122px","left":"1097px", "top":"100px"};
var nowimg = 2;
var timer = setInterval(youanniuyewu,2000);
$("#youku").mouseenter(
function() {
clearInterval(timer);
}
);
$("#youku").mouseleave(
function() {
clearInterval(timer);
timer = setInterval(youanniuyewu,2000);
}
);
$(".you").click(youanniuyewu);
function youanniuyewu(){
if(!$(".tuul li").is(":animated") || shangdi == true){
if(nowimg < 8){
nowimg ++;
}else{
nowimg = 0;
}
$(".xiaoyuandian li").eq(nowimg).addClass("cur").siblings().removeClass("cur");
//先交换位置
$(".no1").animate(json0,sudu);
$(".no2").animate(json1,sudu);
$(".no3").animate(json2,sudu);
$(".no4").animate(json3,sudu);
$(".no0").css(json4);
//再交换身份
$(".no0").attr("class","waiting");
$(".no1").attr("class","no0");
$(".no2").attr("class","no1");
$(".no3").attr("class","no2");
$(".no4").attr("class","no3");
//上面的交换身份，把no0搞没了！所以，我们让no1前面那个人改名为no0
if($(".no3").next().length != 0){
//如果no3后面有人，那么改变这个人的姓名为no4
$(".no3").next().attr("class","no4");
}else{
//no3前面没人，那么改变此时队列最开头的那个人的名字为no0
$(".tuul li:first").attr("class","no4");
}
//发现写完上面的程序之后，no6的行内样式还是json0的位置，所以强制：
$(".no4").css(json4);
}
}
$(".zuo").click(
function(){
if(!$(".tuul li").is(":animated") || shangdi == true){
if(nowimg > 0){
nowimg --;
}else{
nowimg = 8;
}
$(".xiaoyuandian li").eq(nowimg).addClass("cur").siblings().removeClass("cur");
//先交换位置:
$(".no0").animate(json1,sudu);
$(".no1").animate(json2,sudu);
$(".no2").animate(json3,sudu);
$(".no3").animate(json4,sudu);
$(".no4").css(json0);
//再交换身份
$(".no4").attr("class","waiting");
$(".no3").attr("class","no4");
$(".no2").attr("class","no3");
$(".no1").attr("class","no2");
$(".no0").attr("class","no1");
//上面的交换身份，把no0搞没了！所以，我们让no1前面那个人改名为no0
if($(".no1").prev().length != 0){
//如果no1前面有人，那么改变这个人的姓名为no0
$(".no1").prev().attr("class","no0");
}else{
//no1前面没人，那么改变此时队列最后的那个人的名字为no0
$(".tuul li:last").attr("class","no0");
}
$(".no0").css(json0);
}
}
);
$("#youku .xiaoyuandian li").click(
function(){
sudu = 100; //临时把这个速度变化一下
shangdi = true; //flag
var yonghuandexuhao = $(this).index();
if(yonghuandexuhao > nowimg ){
var cishu = yonghuandexuhao - nowimg;
console.log("主人，我已经通知上帝帮你按右按钮" + cishu + "次");
for(var i = 1 ; i<= cishu ; i++){
$(".you").trigger("click"); //让上帝帮你按一次又按钮
}
}else{
var cishu = nowimg - yonghuandexuhao;
console.log("主人，我已经通知上帝帮你按左按钮" + cishu + "次");
for(var i = 1 ; i<= cishu ; i++){
$(".zuo").trigger("click"); //让上帝帮你按一次又按钮
}
}
nowimg = yonghuandexuhao;
sudu = 600; //再把速度恢复
shangdi = false;
}
);
}
);
</script> I won’t introduce the control of timers and clicks of paging buttons in JQuery code here. If you are interested, please refer to the content in: JS & JQuery.
Here I mainly explain two points:
1. The definition of json0, json1, json2, json3, json4 data, its initial value is consistent with the definition above in CSS. Its purpose is to conveniently switch the absolute position of each image. I will introduce it in detail below.
2. Mainly explain the right button click event, which is the youanniuyewu method.
2-1) Simple processing of nowImg index:
if(nowimg < 8){
nowimg ++;
}else{
nowimg = 0;
} If it is not the last one, click the "right button", and the nowImg value will be increased by 1. If it is the last one, nowImg will start from 0.
2-2) Click the "right button", about the processing of paging indicator:
$(".xiaoyuandian li").eq(nowimg).addClass("cur").siblings().removeClass("cur"); Highlight the indicator button corresponding to the currently displayed image, and display the sibling nodes normally.
2-3) Swap picture positions:
//先交换位置
$(".no1").animate(json0,sudu);
$(".no2").animate(json1,sudu);
$(".no3").animate(json2,sudu);
$(".no4").animate(json3,sudu);
$(".no0").css(json4); 前面四句话，会动画执行图片移动的效果。静止状态的时候是三张图片显示在我们眼前；运动的时候，可以想象得出最多有四张图片显示在我们眼前，上面四句代码执行过程中，剖析图如下：
即在动画执行的过程中，"no1" 的图片渐渐离开屏幕可视范围，与此同时， "no4" 的图片渐渐显示在屏幕可视范围。
而在动画执行的过程中，"no0" 的这张图片早就定位到 "no4" 的位置(此时在可视范围之外，因为这里的animate动画是异步执行的，不会延迟$(.no0).css(json4)这句代码的执行。当这一组代码执行完毕后，剖析图如下：
此时，我们再将那些 处于 "waiting" 状态的图片考虑进来，则此时的剖析图如下：
2-4）以上流程执行完毕后，是完成了一次轮播效果，但是此时各个图片的牌号顺序已经被打乱，为了使得轮播继续下去，我们应该将牌号再 "恢复" 过来。所以我们可以添加以下代码：
//再交换身份
$(".no0").attr("class","waiting");
$(".no1").attr("class","no0");
$(".no2").attr("class","no1");
$(".no3").attr("class","no2");
$(".no4").attr("class","no3"); 上面的代码执行后，意味着将 上图中 "no0" 这张图片拉入到 "waiting" 区域，而其他四个的编号则依次往前推算。执行完毕后，剖析图如下：
正如上图所示，"活跃"状态的5张图片，最后一张现在也变成了 "waiting" 状态，所以需要有人替补上去，才能继续动画的执行。很显然，应该拿 "waiting" 列表的第一张，也就是 "活跃" 状态的后面一张图片 "顶替" 上去；如果后面没有 "waiting" 状态的图片了， 说明这些 "waiting" 状态的图片全部 "跑到" class 为 tuul所有列表的前面去了，那就抓取这些列表的第一张作为 "顶替者"。代码如下：
if($(".no3").next().length != 0){
//如果no3后面有人，那么改变这个人的姓名为no4
$(".no3").next().attr("class","no4");
}else{
//no3前面没人，那么改变此时队列最开头的那个人的名字为no0
$(".tuul li:first").attr("class","no4");
}
//发现写完上面的程序之后，no6的行内样式还是json0的位置，所以强制：
$(".no4").css(json4); 这里需要注意的是：虽然已经经历了很多步奏的位置信息的改变及牌号的改变，但是刚刚被拉入等待区域的那张图片在li中的与兄弟节点的位置关系并没有发生改变，只是class属性变成了 "waiting". 即此时的tuul中li的代码结构如下：
<ul class="tuul"> <li class="waiting"><a href="#"><img src="images/0.jpg" /></a></li> <li class="no0"><a href="#"><img src="images/1.jpg" /></a></li> <li class="no1"><a href="#"><img src="images/2.jpg" /></a></li> <li class="no2"><a href="#"><img src="images/3.jpg" /></a></li> <li class="no3"><a href="#"><img src="images/4.jpg" /></a></li> <li class="no4"><a href="#"><img src="images/5.jpg" /></a></li> <li class="waiting"><a href="#"><img src="images/6.jpg" /></a></li> <li class="waiting"><a href="#"><img src="images/7.jpg" /></a></li> <li class="waiting"><a href="#"><img src="images/8.jpg" /></a></li> </ul>
执行完以上代码后，剖析图如下：
以上就是本文的全部内容，希望对大家的学习有所帮助。
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1359
52
Detailed explanation of jQuery reference methods: Quick start guide
Feb 27, 2024 pm 06:45 PM
Detailed explanation of jQuery reference method: Quick start guide jQuery is a popular JavaScript library that is widely used in website development. It simplifies JavaScript programming and provides developers with rich functions and features. This article will introduce jQuery's reference method in detail and provide specific code examples to help readers get started quickly. Introducing jQuery First, we need to introduce the jQuery library into the HTML file. It can be introduced through a CDN link or downloaded
How to remove the height attribute of an element with jQuery?
Feb 28, 2024 am 08:39 AM
How to remove the height attribute of an element with jQuery? In front-end development, we often encounter the need to manipulate the height attributes of elements. Sometimes, we may need to dynamically change the height of an element, and sometimes we need to remove the height attribute of an element. This article will introduce how to use jQuery to remove the height attribute of an element and provide specific code examples. Before using jQuery to operate the height attribute, we first need to understand the height attribute in CSS. The height attribute is used to set the height of an element
How to use PUT request method in jQuery?
Feb 28, 2024 pm 03:12 PM
How to use PUT request method in jQuery? In jQuery, the method of sending a PUT request is similar to sending other types of requests, but you need to pay attention to some details and parameter settings. PUT requests are typically used to update resources, such as updating data in a database or updating files on the server. The following is a specific code example using the PUT request method in jQuery. First, make sure you include the jQuery library file, then you can send a PUT request via: $.ajax({u
jQuery Tips: Quickly modify the text of all a tags on the page
Feb 28, 2024 pm 09:06 PM
Title: jQuery Tips: Quickly modify the text of all a tags on the page In web development, we often need to modify and operate elements on the page. When using jQuery, sometimes you need to modify the text content of all a tags in the page at once, which can save time and energy. The following will introduce how to use jQuery to quickly modify the text of all a tags on the page, and give specific code examples. First, we need to introduce the jQuery library file and ensure that the following code is introduced into the page: <
In-depth analysis: jQuery's advantages and disadvantages
Feb 27, 2024 pm 05:18 PM
jQuery is a fast, small, feature-rich JavaScript library widely used in front-end development. Since its release in 2006, jQuery has become one of the tools of choice for many developers, but in practical applications, it also has some advantages and disadvantages. This article will deeply analyze the advantages and disadvantages of jQuery and illustrate it with specific code examples. Advantages: 1. Concise syntax jQuery's syntax design is concise and clear, which can greatly improve the readability and writing efficiency of the code. for example,
Use jQuery to modify the text content of all a tags
Feb 28, 2024 pm 05:42 PM
Title: Use jQuery to modify the text content of all a tags. jQuery is a popular JavaScript library that is widely used to handle DOM operations. In web development, we often encounter the need to modify the text content of the link tag (a tag) on the page. This article will explain how to use jQuery to achieve this goal, and provide specific code examples. First, we need to introduce the jQuery library into the page. Add the following code in the HTML file:
How to tell if a jQuery element has a specific attribute?
Feb 29, 2024 am 09:03 AM
How to tell if a jQuery element has a specific attribute? When using jQuery to operate DOM elements, you often encounter situations where you need to determine whether an element has a specific attribute. In this case, we can easily implement this function with the help of the methods provided by jQuery. The following will introduce two commonly used methods to determine whether a jQuery element has specific attributes, and attach specific code examples. Method 1: Use the attr() method and typeof operator // to determine whether the element has a specific attribute
Understand the role and application scenarios of eq in jQuery
Feb 28, 2024 pm 01:15 PM
jQuery is a popular JavaScript library that is widely used to handle DOM manipulation and event handling in web pages. In jQuery, the eq() method is used to select elements at a specified index position. The specific usage and application scenarios are as follows. In jQuery, the eq() method selects the element at a specified index position. Index positions start counting from 0, i.e. the index of the first element is 0, the index of the second element is 1, and so on. The syntax of the eq() method is as follows: $("s
