Requirements Description
I now need a picture to scroll the code, I require the picture is an entire screen, and then scroll up. Required to have text and links to display, but also to have the function of paging
Demand Final screenshot
| The code is as follows |
Copy Code |
|
Core code
$ (function () {
Homepage Picture scrolling jquery Code
Code by Cool Sword
2013.1.27
Contact me at cbaojian@gmail.com
var index = 0;
var len = $ (". Sliderbox > Li"). length;
var Slidertimer;
for (var i=1; i<=len; i++) {$ (". Slidernav"). Append (' <li><a href= ' # ' > ' +i+ ' </a></li> ');}
for (Var j=0 j<len; J + +) {
var title = $ (". Sliderbox li:eq (" +j+ ") img"). attr ("alt");
var url = $ (". Sliderbox li:eq (" +j+ ") a"). attr ("href");
$ (". Slidertext"). Append (' <li><a href= "' +url+ '" > ' +title+ ' </a></li> ');
}
$ (". Slidernav li"). MouseOver (function () {
Index = $ (". Slidernav li"). index (this);
SHOWIMG (index);
$ (this). Children ("a"). Click (function () {return false;});
). EQ (0). MouseOver ();
$ (". Slider"). Hover (function () {
Clearinterval (Slidertimer);
},function () {
Slidertimer = setinterval (function () {
SHOWIMG (index);
index++;
if (index = = len) {index=0;}
},3000);
}). Trigger ("MouseLeave");
function Showimg (index) {
var sliderheight = $ (". Slider"). Height ();
$ (". Sliderbox"). Stop (True,false). Animate ({"Top":-sliderheight*index});
$ (". Slidernav li"). Removeclass ("current"). EQ (index). addclass ("current");
$ (". Slidertext li"). Hide (). EQ (index)-Show ();
}
}). slider{height:300px margin:10px Auto; overflow:hidden; position:relative; width:980px;}
. sliderbox{position:absolute; top:0; left:0;}
. sliderbox li{width:980px; height:300px;}
. slidernav{position:absolute right:10px; bottom:5px; z-index:1;}
. slidernav li{float:left; width:24px;}
. Slidernav Li a{width:16px padding:2px 4px; height:12px background: #fff; color: #000; text-align:center;}
. Slidernav li.current a{background: #3B8DD1; color: #fff;}
Slidertext{background: #000; Background:rgb (00,00,00); opacity:0.8; position:absolute; left:0; bottom:0; width:100%;}
. Slidertext Li{display:none;}
. slidertext Li A{text-align:left; line-height:30px height:30px; color: #fff; |
Although it is very simple function, but still learn a lot of things, the most important place is to use the way to function, so that the process is much simpler, but I still think this can be extended, can be made into a plug-in form to invoke the content. In addition to the jquery animation mode is also more clear. The scroll of the picture is actually using to a setinterval (), defines this function, causes him to circulate unceasingly, thus forms the animation, certainly this does not compare those plug-ins to be good-looking, like the picture rolling transition time may add some blur effect to switch when may more natural point.
Picture scrolling up Demo
2013.2.25 Update
Add code changes to left and right scrolling
To modify the jquery code inside:
| The code is as follows |
Copy Code |
var sliderheight = $ (". Slider"). Height ();
$ (". Sliderbox"). Stop (True,false). Animate ({"Top":-sliderheight*index}); For: var sliderwidth = $ (". Slider"). width (); $ (". Sliderbox"). Stop (True,false). Animate ({"Left":-sliderwidth*index}); Modify the CSS code inside . sliderbox li{width:980px; height:300px;}
For:
. sliderbox li{width:980px; height:300px; float:left;} In addition, fill in the HTML code:
<div class= "Slider" >
<ul class= "Sliderbox" >
<li><a href= "" ></a></li>
<li><a href= "" ></a></li>
</ul>
<ul class= "Slidernav" > "/ul>
<ul class= "Slidertext" ></ul>
</div> |
Updated May 15, 2013
Do this by changing the content to the function object. and supports code support for scrolling left and right.
| The code is as follows |
Copy Code |
| <script type= "Text/javascript"
//Home picture scrolling jquery code
//code by Cool sword
//2013.1.27
//contact me at cbaojian@gmail.com
Function Slider (obj) {
var _this = $ (this);
var index = 0;
_this.obj = obj;
var slid Erbox = $ (". Sliderbox", _this.obj); scroll box
var len = $ ("li", sliderbox). length;//number lengths
var Slidernav = $ (". Slidernav", _this.obj);/digital navigation
Var slider Text = $ (". Slidertext", _this.obj); Display text
var _prev = $ (". Prev", _this.obj);//left
var _next = $ (". Next", _this.obj);//Right
var Slidertimer;
for ( var I=1; i<=len; i++) {slidernav.append (' <li><a href= "#" > ' +i+ ' </a></li> ');}
for (Var j=0 j<len; J + +) {
var title = $ ("Li:eq (" +j+ ") img, Sliderbox). attr (" alt ");
var url = $ (" Li:eq "+j+ "A", Sliderbox). attr ("href");
Slidertext.append (' <li><a href= "' +url+ '" > ' +title+ ' </a></li> ');
} $ ("Li", Slidernav). MouseOver (function () {
index = $ ("li", Slidernav). index (this);
Showimg (index);
$ ( This). Children ("a"). Click (function () {return false;});
}). eq (0). MouseOver ();
if (len<=1) {_prev.hide (); _next.hide ();}
//prev
_prev.click (function () {
Index-= 1;
if (index = = 1) {index = len-1};
Showimg (index);
});
//next
_next.click (function () {
index = 1;
if (index = = len) {index = 0};
showimg (index)
}); $ (_this.obj). Hover (function () {
Clearinterval (Slidertimer);
},function () {
Slidertimer = setinterval (function () {
SHOWIMG (index);
index++;
if (index = = len) {index=0;}
},2000);
}). Trigger ("MouseLeave");
function Showimg (index) {
var sliderheight = $ (_this.obj). Height ();
Sliderbox.stop (True,false). Animate ({"Top":-sliderheight*index}, "slow");
$ ("Li", Sliderbox). Hide (). EQ (index)-Show ();
$ ("Li", Slidernav). Removeclass ("current"). EQ (index). addclass ("current");
$ ("Li", slidertext). Hide (). EQ (index)-Show ();
}
} </script> |
More code and CSS to view the sample
Object-oriented function version-examples of slides with fading fade 3
2013.6.14 Update
Picture Loop scroll up code
The JS code is as follows:
| The code is as follows |
Copy Code |
$ (function () {
var $this = $ ("#scrollTop");
var Scrolltimer;
$this. Hover (function () {
Clearinterval (Scrolltimer);
},function () {
Scrolltimer = setinterval (function () {
Scrollnews ($this);
Scrollnews ($this);
New Scrollnews (". Scrollnews");
}, 3000);
}). Trigger ("MouseLeave");
})
function Scrollnews (obj) {
var $self = Obj.find ("Ul:first");
var liwidth = $self. Find ("Li:first"). width (); Get width, scroll up to get height. Height ()
$self. Animate ({"MarginLeft":-liwidth + "px"}, the function () {//left scroll, scroll up to be margintop, other direction similar, the same below
$self. css ({marginleft:0}). Find ("Li:first"). Appendto ($self); Appendto can move elements directly
// })
var liheight = $self. Find ("Li:first"). Height ();
$self. Animate ({
"MarginTop":-liheight+ "px"},600,function () {
$self. css ({margintop:0}). Find ("Li:first"). Appendto ($self);
})
} |
The CSS code is as follows:
| code is as follows |
copy code |
| *{ margin:0; padding:0;}
Li{list-style:none;}
.scrollnews{
width:490px
height:170px;
overflow:hidden;
Background: #eee;
margin:10px Auto;
}
. scrollnews ul{width:1800px;
.scrollnews li{
height:170px
/* float:left;
display:inline;*/
}
. Left li{ Float:left; Display:inline.} |
