The source code written with JQ is as follows:
Implementation features:
1, the picture automatically in order Carousel, Carousel Selected picture transparency is 1, the other is 0.1;
2, the mouse over the picture on the transparency of 1, the other is 0.1;
3, the mouse left, continue the carousel, starting position for the mouse to stop the picture of the next picture;
There is a bug:
When the mouse is sliding over multiple images, the carousel order of the pictures will be disrupted!
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> auto-carousel picture Fade </title>
<style>
*{
margin:0;
padding:0;
}
div{
margin-left:146px;
}
img{
width:320px;
height:440px;
margin-top:10px;
margin-bottom:10px;
}
body{
Background: #000;
}
</style>
<script src= "Jquery.js" ></script>
<script>
The execution timer lets the picture fade out;
var n=0;
function res () {
$ ("img"). FadeTo (500,0.1);//all images fade in;
$ ("img"). EQ (n). FadeTo (500,1); Specifies that the picture fades out;
n++;//Traverse all the pictures
if (n>9) {//judgment subscript
n=0;
}
}
var str=setinterval ("Res ()", 1000); Timer 1 seconds to execute res this timer
$ (function () {///when the page loads;
$ ("img"). MouseEnter (function () {///when the mouse passes,
Clearinterval (str); Stop Timer
$ ("img"). FadeTo (500,0.1)//Get the picture back to its original state
$ (this). FadeTo (1000,1). Siblings (). FadeTo (0,0.1);//mouse over the picture fade out, other pictures restore initial 0.1 transparency
n = $ (this). Index () +1;//let the picture subscript equal to the next image of the mouse stop
});
$ ("img"). MouseLeave (function () {///when the mouse leaves;
Str=setinterval ("res ()", 1000); Continue to call the timer and let the timer return value equals str
});
});
</script>
<body>
<div>
</div>
</body>
Timer picture Carousel Fade Basic functionality has been implemented and is being modified in the bug: (Drawings effect and source code)
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
