Rotary Picture Effect
Preface: When writing a web page, you will encounter many effects that need to rotate the map. It's not difficult to quote a plug-in. It's simple and convenient. But when you see the effect of circular switching written by others, you want to think about whether it can be achieved. Now that you have written this article here, it must be achieved, although the distance is not. The effect of plug-ins is still a long way off, but the functions are all realized, and it just provides you with a way of thinking.
I wrote it in a process-oriented way, based on jquery.
Let me first put in my structure code:
<body>
<div class="box">
<a class="left"> < </a><!--Slide the button to the left-->
<div class="con"><!--Picture display section-->
<ul>
<li><img src="images/haizeiwang.jpg"/></li>
<li><img src="images/shashengwan.jpg"/></li>
<li><img src="images/hua.jpg"/></li>
<li><img src="images/mao.jpg"/></li>
</ul>
</div>
<a class="right"> > </a><!--Slide the button to the right-->
<div class="dian"></div><!--The bottom represents the origin of the picture. js Add scripts in-->
</div>
</body>
It should be easy to understand, so I also want to explain: box is the outer container, which contains two a sliding buttons, dian is the bottom origin, all given position, con is the image display part, con should be fixed width and height, set overflow:hidden, ul is the element of image sliding, I use. It's margin-left that changes it.
Now let's put in the css code:
*{
margin:0;
padding:0;
}
.box{
width:500px;
height:300px;
margin-left:300px;
position: relative;
margin-top:100px;
}
.box .con{
width:500px;
height:300px;
position: absolute;
top:0;
left:0;
overflow: hidden;
}
ul{
height:300px;
}
ul li{
list-style: none;
width:500px;
height:300px;
float:left;
}
img{
width:100%;
height:100%;
}
.box a{
width:50px;
height:50px;
background-color:rgba(0,0,0,0.5);
color:white;
font-size: 25px;
line-height: 50px;
text-align: center;
cursor: pointer;
}
.box a.left{
position: absolute;
top:125px;
left:-100px;
}
.box a.right{
position: absolute;
top:125px;
right:-100px;
}
.dian{
overflow: hidden;
position: absolute;
height:15px;
bottom:10px;
left:50%;
transform: translateX(-50%);
}
.dian span{
float:left;
width:10px;
height:10px;
background-color:#ccc;
border-radius: 50%;
margin-right:10px;
cursor: pointer;
}
.dian span:last-child{
margin-right:0;
}
.dian span.on{
background-color:blue;
}
Needless to say, the bottom. on indicates that the background color of the current display image corresponds to the origin is blue.
The most important thing is js:
var item_w = $('ul li').width();//Width of a single li
var item_length = $('ul li').length;//Number of pictures
$('ul').width(item_w*(item_length+1));//ul width setting, one more picture width;
$('ul').append($('ul li:first').clone());//Copy the first picture and put it at the end
//Add origin
for(var i=0;i<item_length;i++){
$('.dian').append('<span></span>')
}
$('.dian span:first').addClass('on');
var index=0;//The picture shows the number of pictures.
//The rotation graph switching function, ul slides to the left until the copy of the image margin-left is 0, back to the first, because the same will not feel the change, causing the illusion of circulation;
function move(){
index++;
$('ul').animate({'margin-left':-item_w*index},200,function(){
if(index==item_length){
index=0;
$('ul').css('margin-left',0);
}
$('.dian span').eq(index).addClass('on').siblings().removeClass('on');//Origin update
});
}
//Auto-rotation
var timer = setInterval(move,2000);
//Mouse move in timer stop
$('.box').mouseenter(function(){
clearInterval(timer);
})
//Mouse Move Out Timer Start
$('.box').mouseleave(function(){
timer = setInterval(move,2000);
})
//Click on the left button to slide left
$('a.left').click(function(){
if(!$('ul').is(":animated")){//Judge whether ul is in animation state, if there is no left sliding, otherwise animate will accumulate, fast click will have problems;
if(index==0){//Change to the last one by the first one
index=item_length;
$('ul').css('margin-left',-item_w*item_length);
}
index--;
$('ul').animate({'margin-left':-item_w*index},200);
$('.dian span').eq(index).addClass('on').siblings().removeClass('on');
}
})
//Click on the right button to slide right
$('a.right').click(function(){
if(!$('ul').is(":animated")){
move();
}
})
//Click on the origin to display the corresponding picture
$('.dian span').click(function(){
$(this).addClass('on').siblings().removeClass('on');
var dian_index = $(this).index();
$('ul').animate({'margin-left':-item_w*dian_index},200)
index=dian_index;
})
OK, this is all the code, interested friends can try, and finally there are other better ways to tell me ah, we need to progress together!!!