Use js+css today to make a picture browsing effect that can slide right and left.
Start by writing a structure that includes the two images you need to browse, and the two buttons that you can click to slide a picture.
1<! DOCTYPE html>234<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>5<script type= "Text/javascript" src= "Http://1qaz2wsx.xinbaby.com/resource/js/jquery-1.7.2.min.js" ></ Script>6<title>css+javascript Pictures Slide </title>7<link rel= "icon" href= "Favicon.ico" type= "Images/x-icon"/>8 9<style type= "Text/css" >Ten One</style> A -<script type= "Text/javascript" > - the</script> - - -<body> +<div class= "card" > -<div class= "img" > + A at</div> -<div class= "BTN" > -<a class= "BTN1" ></a> -<a class= "BTN2" ></a> -</div> -</div> in</body> -
Next, set the image's parent element's length width to the length of the picture, and set the picture to be absolutely positioned so that you can cascade the picture together and then move it through JS later. (When you absolutely position the picture, do not forget to set its parent element box to relative positioning)
1 <style type= "Text/css" >2 * {margin:0; padding:0;} 3 . card {width:526px; height:216px; margin:100px Auto;} 4 . Card. img {position:relative;}
5 . Card. img img {position:absolute;}
6 </style>
In this way, we get the two pictures stacked together, it is not difficult to find that the present is the post-positioning of the image, that is, Picture 2 (of course, you can use the "Z-index" property to set its stacking position).
Next, add two points that need to be clicked to the lower-left corner of the picture.
1<style type= "Text/css" >2* {margin:0; padding:0;}3 . card {width:526px; height:216px; margin:100px auto; position:relative;}4 . Card. img {position:relative;}5 . Card. img img {position:absolute;}6 . btn {position:absolute; left:10px; bottom:5px;}7. btn a {float: Left; Display:block; width:12px; height:12px; margin-left:5px; Background:url ("Resource/images/pagination.png");}8</style>Where the picture "pagination.png" Yes, the two colors represent the two states that were not clicked and were clicked. We tagged the two states of the button using the CSS Sprites (CSS sprite) technique we said earlier.
Effect:
Next is the JS code to control the display of the picture.
You can use the "display:none" setting of the picture to control the display and closing of the picture to achieve the effect of switching pictures.
1<script type= "Text/javascript" >2$(function(){3$ (". Btn1"). Click (function(){4$ (". Img2"). CSS ("display", "none");5$ (". Img1"). CSS ("Display", "block");6$ (". Btn1"). CSS ("background-position", "0-12px");7$ (". Btn2"). CSS ("background-position", "0 0");8 });9$ (". Btn2"). Click (function(){Ten$ (". Img1"). CSS ("display", "none"); One$ (". Img2"). CSS ("Display", "block"); A$ (". Btn2"). CSS ("background-position", "0-12px"); -$ (". Btn1"). CSS ("background-position", "0 0"); - }); the }); -</script>This way, when you click on the two button, you can see the switch with the clicked image.
However, the simple switch is not the purpose of this article, it is necessary to click through the image slide into the slide to switch the display of the picture.
Next, use the Animate () method of jquery to control the motion of the picture slide, and to achieve the sliding effect by pinning the picture to the picture in the parent box outside the image's parent box.
Here's a step-by-step:
Step one: Pin the picture 1 to the right border of the picture's parent box (calculates the offset). To see it, first add a border to the parent box:
1<style type= "Text/css" >2* {margin:0; padding:0;}3 . card {width:526px; height:216px; margin:100px auto; position:relative; border:1px solid;}4 . Card. img {position:relative;}5 . Card. img img {position:absolute;}6 . Card. img. img1 {left:527px;}7 . btn {position:absolute; left:10px; bottom:5px;}8. btn a {float: Left; Display:block; width:12px; height:12px; margin-left:5px; Background:url ("Resource/images/pagination.png");}9</style>
The second step: by clicking the button control to move the picture in the box to the left, at the same time, close to the right frame of the picture to move inside the box, and then vice-versa to show the picture of the left and so sliding effects.
1<script type= "Text/javascript" >2$(function(){3$ (". Btn1"). Click (function(){4$ (". Img2"). Animate ({left: " -527px"}, "slow");5$ (". Img1"). Animate ({left: "}," slow ");6$ (". Btn1"). CSS ("background-position", "0-12px");7$ (". Btn2"). CSS ("background-position", "0 0");8 });9$ (". Btn2"). Click (function(){Ten$ (". Img2"). Animate ({left: "}," slow "); One$ (". Img1"). Animate ({left: "527px"}, "slow"); A$ (". Btn2"). CSS ("background-position", "0-12px"); -$ (". Btn1"). CSS ("background-position", "0 0"); - }); the }); -</script>Effect:
Inside the black box is the diagram that needs to be shown
Step three: Set "Overflow:hidden" to the element box to cut off the outside of the box
1<style type= "Text/css" >2* {margin:0; padding:0;}3 . card {width:526px; height:216px; margin:100px auto; position:relative; border:1px solid; overflow:hidden;} 4 . Card. img {position:relative;}5 . Card. img img {position:absolute;}6 . Card. img. img1 {left:527px;}7 . btn {position:absolute; left:10px; bottom:5px;}8. btn a {float: Left; Display:block; width:12px; height:12px; margin-left:5px; Background:url ("Resource/images/pagination.png");}9</style>
In this way, when you click on the small round button, the picture will be switched to the left and right slide, the picture to push the effect of the picture.
Finally, the complete code is attached:
1<! DOCTYPE html>234<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>5<script type= "Text/javascript" src= "Http://1qaz2wsx.xinbaby.com/resource/js/jquery-1.7.2.min.js" ></ Script>6<title>css+javascript Pictures Slide </title>7<link rel= "icon" href= "Favicon.ico" type= "Images/x-icon"/>8 9<style type= "Text/css" >Ten* {margin:0; padding:0;} One . card {width:527px; height:216px; margin:100px auto; position:relative; border:1px solid; overflow:h Idden;} A . Card. img {position:relative;} - . Card. img img {position:absolute;} - . Card. img. img1 {left:527px;} the . btn {position:absolute; left:10px; bottom:5px;} -. btn a {float: Left; Display:block; width:12px; height:12px; margin-left:5px; Background:url ("Resource/images/pagination.png");} -</style> - +<script type= "Text/javascript" > -$(function(){ +$ (". Btn1"). Click (function(){ A$ (". Img2"). Animate ({left: " -527px"}, "slow"); at$ (". Img1"). Animate ({left: "}," slow "); -$ (". Btn1"). CSS ("background-position", "0-12px"); -$ (". Btn2"). CSS ("background-position", "0 0"); - }); -$ (". Btn2"). Click (function(){ -$ (". Img2"). Animate ({left: "}," slow "); in$ (". Img1"). Animate ({left: "527px"}, "slow"); -$ (". Btn2"). CSS ("background-position", "0-12px"); to$ (". Btn1"). CSS ("background-position", "0 0"); + }); - }); the</script> * $ Panax Notoginseng<body> -<div class= "card" > the<div class= "img" > + A the</div> +<div class= "BTN" > -<a class= "BTN1" ></a> $<a class= "BTN2" ></a> $</div> -</div> -</body> the
"Javascript/css" javascript+css to achieve a picture sliding browsing effect
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
