Home > Developer > JavaScript
<!--
Description: this. html file must have:
(1) The Json,json folder must have the file Data.txt, the contents of the file Data.txt are:
[{"Imgsrc": "Img/banner1.jpg"},
{"IMGSRC": "Img/banner2.jpg"},
{"IMGSRC": "Img/banner3.jpg"},
{"IMGSRC": "Img/banner4.jpg"}]
(2) The following images must be in the Img,img folder of the sibling folder: Banner1.jpg;banner2.jpg;banner3.jpg;banner4.jpg;
-
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<style>
*{
margin:0;
padding:0;
List-style:none;
}
. box{
width:1000px;
height:300px;
position:relative;
margin:30px Auto;
Overflow:hidden;
}
. box. boxinner{
width:4000px;
Position:absolute;
left:0;
top:0;
}
. box. Boxinner div{
width:1000px;
height:300px;
Float:left;
Background:url ("img/default.gif") no-repeat center #e1e1e1;
}
. box. Boxinner Div img{
width:100%;
height:100%;
}
. Box ul{
Position:absolute;
right:10px;
bottom:10px;
}
. Box UL li{
width:18px;
height:18px;
Background: #ccc;
border-radius:50%;
margin-left:10px;
Float:left;
Cursor:pointer;
}
. Box UL li.on{
Background:lightblue;
}
. Box a{
width:30px;
height:45px;
Position:absolute;
top:127px;
Background-image:url ("Img/pre.png");
opacity:0.3;
Filter:alpha (opacity=30);
Display:none;
}
. Box a:hover{
Opacity:1;
Filter:alpha (opacity=100);
}
. box. btnleft{
left:30px;
background-position:0 0;
}
. box. btnright{
right:30px;
Background-position: -50px 0;
}
</style>
<body>
<div class= "box" id= "box" >
<div class= "Boxinner" >
<!--<div></div>
<div></div>
<div></div>
<div></div>-->
</div>
<ul>
<!--<li class= "on" ></li>
<li></li>
<li></li>
<li></li>-->
</ul>
<a href= "javascript:;" class= "Btnleft" ></a>
<a href= "javascript:;" class= "Btnright" ></a>
</div>
<div class= "box Box2" id= "Box2" >
<div class= "Boxinner" >
<!--<div></div>
<div></div>
<div></div>
<div></div>-->
</div>
<ul>
<!--<li class= "on" ></li>
<li></li>
<li></li>
<li></li>-->
</ul>
<a href= "javascript:;" class= "Btnleft" ></a>
<a href= "javascript:;" class= "Btnright" ></a>
</div>
<script>
function Getcss (curele,attr) {
var val=null;
var reg=null;
if (getComputedStyle) {//Standard
Val=getcomputedstyle (Curele,false) [attr];
}else{//Non-standard
if (attr=== ' opacity ') {
Val=curele.currentstyle.filter; ' Alpha (opacity=10) '
Reg=/^alpha\ (opacity[=:] (\d+) \) $/i;
Return Reg.test (val)? Reg.exec (Val) [1]/100:1;
}
VAL=CURELE.CURRENTSTYLE[ATTR];
}
Reg=/^[+-]? ((\d| ([1-9]\d+)) (\.\d+)?) (Px|pt|rem|em) $/i;
Return Reg.test (val)? parseint (val): Val;
}
function Setcss (curele,attr,value) {
if (attr=== ' float ') {
Curele.style.cssfloat=value;
Curele.style.stylefloat=value;
Return
}
if (attr=== ' opacity ') {
Curele.style.opacity=value;
Curele.style.filter= ' alpha (opacity= ' + (value*100) + ') ';
Return
}
Handling of the Unit
var reg=/^ (width|height|top|right|bottom|left| ( (margin|padding) (Top|right|bottom|left))) $/i;
if (Reg.test (attr)) {
if (! ( value=== ' Auto ' | | Value.tostring (). IndexOf ('% ')!==-1)) {
Value=parsefloat (value) + ' px ';
}
}
Curele.style[attr]=value;
}
function Setgroupcss (curele,opt) {
if (opt.tostring ()!== ' [Object Object] ') return;
for (var attr in opt) {
This.setcss (curele,attr,opt[attr]);
}
}
function css (Curele) {
var arg2=arguments[1];
if (typeof arg2=== ' string ') {
var arg3=arguments[2];
if (typeof arg3=== ' undefined ') {//When the third parameter does not exist, is obtained;
Return This.getcss (CURELE,ARG2);
}else{
This.setcss (CURELE,ARG2,ARG3);
}
}
if (arg2.tostring () = = = ' [Object Object] ') {//Get a set of elements
This.setgroupcss (CURELE,ARG2);
}
}
function Animate (curele,target,duration) {
function Tmpeffect (t, B, C, D) {
Return c * t/d + B;
}
1. Prepare for each parameter of the formula
var begin={};
var change={};
for (var attr in target) {
Begin[attr]=css (CURELE,ATTR);
CHANGE[ATTR]=TARGET[ATTR]-BEGIN[ATTR];
}
duration=duration| | : 0];
var time=0;
2. Turn on a timer to keep the time accumulating, and to find the latest position according to the time and formula;
Clearinterval (Curele.timer); Turn off the useless timer before starting a timer.
Curele.timer=setinterval (function () {
time+=10;
3. Conditions for cessation of movement (time>=duration)
if (time>=duration) {
CSS (curele,target);
Clearinterval (Curele.timer);
Return
}
Get the latest value for each attribute, and assign to the attribute corresponding to the element;
for (var attr in target) {
var curpos=tmpeffect (time,begin[attr],change[attr],duration);
CSS (Curele,attr,curpos);
}
},10)
}
(function () {
Get element
var Obox=document.getelementbyid ("box");
var oboxinner=obox.getelementsbytagname (' div ') [0];
var adiv=oboxinner.getelementsbytagname (' div ');
var aimg=oboxinner.getelementsbytagname (' img ');
var oul=obox.getelementsbytagname (' ul ') [0];
var ali=oul.getelementsbytagname (' Li ');
var obtnleft=obox.getelementsbytagname (' a ') [0];
var obtnright=obox.getelementsbytagname (' a ') [1];
var data=null;
var timer=null;
var step=0;
1. Get and parse data
GetData ();
function GetData () {
var xml=new xmlhttprequest;
Xml.open (' Get ', ' json/data.txt ', false);
Xml.onreadystatechange=function () {
if (xml.readystate==4 &&/^2\d{2}$/.test (xml.status)) {
Data=json.parse (Xml.responsetext);
}
};
Xml.send ();
}
2. Binding Data
Bind ();
function bind () {
var strdiv= ';
var strli= ';
for (var i=0; i<data.length; i++) {
strdiv+= ' <div></div> ';
Strli+=i===0? ' <li class= "On" ></li> ': ' <li></li> ';
By judging, the index is 0, let it light, the other do not light
}
Note: To change the 5 src to realimg;
strdiv+= ' <div></div> ';
If you insert a page in a string concatenation, you should assign a value to the innerHTML;
If you insert a page by creating an element, you should assign a value to AppendChild or insertbefore;
Oboxinner.innerhtml+=strdiv;
oboxinner.style.width=adiv.length*adiv[0].offsetwidth+ ' px ';
Oul.innerhtml+=strli;
}
3. Delay Loading Pictures
SetTimeout (lazyimg,500);
function lazyimg () {
for (var i=0; i<aimg.length; i++) {
(function (index) {
var curimg=aimg[index];
1. Create a Picture object
var tmpimg=new Image;
2. Assigning the correct address to a picture object
Tmpimg.src=curimg.getattribute (' realimg ');
3. Verify the Address
Tmpimg.onload=function () {
CURIMG.SRC=THIS.SRC;
Tmpimg=null;
}
}) (i);
}
}
4. Automatic Picture Carousel
Timer=setinterval (automove,1400);
function Automove () {
if (step>=adiv.length-1) {
Step=0;
CSS (Oboxinner, ' left ', 0)
}
step++;
Animate (oboxinner,{left:-step*1000})
Bannertip ();
}
5. Focus Auto-Carousel
function Bannertip () {
var tmpstep=step>=ali.length?0:step;
for (var i=0; i<ali.length; i++) {
Ali[i].classname=i==tmpstep? ' On ': null;
}
}
6. Mouse move stop, move out continue
Obox.onmouseover=function () {
Clearinterval (timer);
obtnleft.style.display= ' block ';
obtnright.style.display= ' block ';
};
Obox.onmouseout=function () {
Timer=setinterval (automove,1400);
Obtnleft.style.display= ' None ';
Obtnright.style.display= ' None ';
};
7. Click Focus to switch manually
HandleChange ();
function HandleChange () {
for (var i=0; i<ali.length; i++) {
Ali[i].index=i;
Ali[i].onclick=function () {
Step=this.index;
Animate (oboxinner,{left:-step*1000});
Bannertip ();
}
}
}
8. Click the left and right buttons to switch manually
Obtnright.onclick=automove;
Obtnleft.onclick=function () {
if (step<=0) {
Step=adiv.length-1;
CSS (Oboxinner, ' left ',-step*1000);
}
step--;
Animate (oboxinner,{left:-step*1000});
Bannertip ();
}
})();
</script>
</body>javascript:100% native JS implementation of the left and right switch Carousel diagram (with delayed loading)
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
