Based on jquery image scroll effect source
This is a picture from the network can be controlled by the rolling effect of the source code, there is a need for friends can refer to.
<! DOCTYPE html>
<meta charset= "Utf-8" >
<title>slide</title>
<script type= "text/web Effects" src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" ></script >
<script type= "Text/javascript" >
$ (function () {
$ ("#img-slider"). Imgscroll ();
$ ("#img-slider-2"). Imgscroll ();});
/* Plugin * *
(function ($) {
$.fn.imgscroll = function () {
var Isdone = False,
Scrollbox = $ (this),
PREVBTN = Scrollbox.find ("#prev"),
NEXTBTN = Scrollbox.find ("#next"),
Imgbox = Scrollbox.find ("ul"),
Next_over = Imgbox.find ("Li"). Width () * Imgbox.find ("li"). Length,
Slide_width = $ (". Slider-wrap"). width ();
Return This.each (function () {
function SetOpacity () {
Imgbox.animate ({
Opacity:1
}, 800,function () {
Isdone = false;
})
}
function Scrollnext () {
if (!isdone && next_over + parseint (imgbox.css tutorial ("left"), ten) > Slide_width) {
Isdone = true;
Imgbox.animate ({
Left: "+ +" + "-" + slide_width,
opacity:0.5
}, SetOpacity);
}
Isdone = False
}
function Scrollprev () {
if (!imgbox.is (': Animated ') && parseint (Imgbox.css ("left"), 10)!=0) {
Imgbox.animate ({
Left: "+ +" + slide_width,//Keep moving
opacity:0.5
}, SetOpacity);
}
}
Prevbtn.bind (' click ', Scrollprev); Roll forward
Nextbtn.bind (' click ', Scrollnext); Scroll Backward
})
}
}) (JQuery);
</script>
<style>
* {
padding:0;
margin:0;
List-style:none
}
img{
Border:none
}
#img-slider, #img-slider-2 {
position:relative;
width:560px;
height:80px;
}
. slider-wrap {
The value of the width:480px;/*width is equal to the sum of all Li's widths.
Overflow:hidden;
position:relative;
height:150px;
margin-left:40px;
}
. slider-wrap UL {
Zoom:1;
Position:absolute;
left:0;
top:0;
width:9999px;
}
. slider-wrap ul Li {
Float:left;
width:120px;
Text-align:center;
padding:5px 0;
}
#prev, #next {
Position:absolute;
top:30px;
left:0px;
width:40px
}
#next {
Left:auto;
right:0px
}
</style>
<body>
<div id= "Img-slider" >
<button id= "prev" >prev</button>
<div class= "Slider-wrap" >
<ul>
<li><a href= "#" ></a></li>
<li><a href= "#" ></a></li>
<li><a href= "#" ></a></li>
<li><a href= "#" ></a></li>
<li><a href= "#" ></a></li>
<li><a href= "#" ></a></li>
</ul>
</div>
<button id= "Next" >next</button>
</div><div id= "Img-slider-2" >
<button id= "prev" >prev</button>
<div class= "Slider-wrap" >
<ul>
<li><a href= "#" ></a></li>
<li><a href= "#" ></a></li>
<li><a href= "#" ></a></li>
<li><a href= "#" ></a></li>
<li><a href= "#" ></a></li>
<li><a href= "#" ></a></li>
</ul>
</div>
<button id= "Next" >next</button>
</div></body>
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
