Home > Developer > Web Develop
first, the effect shows
Effect: the picture automatically cycle switch, when the picture to switch, the following text description will also change with the picture changes, click on the left button, the picture starts the carousel, click on the right button, the picture carousel will stop, when the left button again, the carousel Continues.
second, the Code demonstration
1.html part
The HTML part is relatively simple, personally think is mainly to determine the IMG tag, and here will be his address with the first picture to Store.
1 <Body>2 <DivID= "container">3 <DivID= "topimg">4 <imgsrc= "images/00.jpg"alt= "Alternate Text"ID= "saveimg" />5 <DivID= "showtitle">Tsing lung</Div>6 </Div>7 <DivID= "savebtn">8 <inputtype= "button"name= "name"value= "start"ID= "start" />9 <inputtype= "button"name= "name"value= "stop"ID= "stop" />Ten </Div> one </Div> a </Body>
2.css part
Here are the files that refer to jquery
1 <Head>2 <Metahttp-equiv= "content-type"content= "text/html; charset=utf-8"/>3 <title></title>4 <Scriptsrc= "jquery-3.2.1/jquery-3.2.1.js"></Script>//introduction of jquery files5 <styletype= "text/css">6 #container{7 width:400px;8 Height:300px;9 margin:Auto;Ten /*border:1px Solid red;*/ one } a #topImg{ - width:400px; - Height:220px; the position:relative; - } - img{ - width:100%; + Height:100%; - } + #saveBtn{ a Margin-left:140px; at Margin-top:10px; - } - #stop{ - Margin-left:30px; - } - #showTitle{ in width:100%; - Height:30px; to background:#000000; + Opacity:0.4; - Bottom:1px; the position:Absolute; * Color: white; $ font-family:' Microsoft Mhei ';Panax Notoginseng font-size:20px; - text-align:Center; the Font-weight:Bolder; + } a </style>
3.jQuery part
The array part and the value part are relatively important
1<script type= "text/javascript" >2 varInterval =NULL; To define an empty variable3 varindex = 0; Defines a zero variable that is used to get the subscript value of an array4 varIMGs = ["images/00.jpg", "images/01.jpg", "images/02.jpg", "images/03.jpg", "images/04.jpg"];5 vartitle = ["tsing lung", "white tiger", "rose finch", "xuanwu", "liang mei"];6$(function () {7$ ("#start"). Click (function () {8Interval= Window.setinterval (funrun,1000); Set the timer and assign the value to the variable you just9 });Ten$ ("#stop"). Click (function () { one clearinterval (interval); Emptying the timer a }); - });
Define a method to assign values to the picture and the following text - functionFunrun () { theindex++;
Ensure that the range of numbers does not exceed the maximum subscript value of the array - if(index>4) { -index = 0; - }
Gets the src attribute of the picture and assigns it a value +$ ("#saveImg"). attr ("src"), imgs[index]);
Assign a div to display following text -$ ("#showTitle"). HTML (title[index]); + } a</script>
jquery Carousel Diagram
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
