How to use jquery to realize picture rotation and sliding effect

This article mainly introduces how to use jquery to achieve picture rotation and sliding effect, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

The details are as follows

The internship made a simple picture rotation effect.

The following picture shows the effect.

Source code

Html and js sections

Untitled document

$(document) .ready (function (e) {/ / Picture path (put in array) var imglist = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg"]; / / next processing / * $(".next") .click (function () {/ / 1. Get the currently selected element / / html (), text (), val () form element with val / / input: basic selector [type='radio']: basic selector / / input [type='radio']: composite selector intersection var index = $("input [type = 'radio']: checked") .val () / / input: basically select the element selector / / try console.log (index) / / console.log (index); / / 2. The next element's index / / if the last element index of the third is set to 0 / / if not, then index is set to index+1 if (index = = imglist.length-1) {index = 0;} else {index++;} / / 3. Modify src $(".img1") .attr ("src", imglist [index]) of image; / / 4. Modify radio's option / / single tag attribute / javascript object cannot call jquery object / / $("input [type = 'radio']") [index] .prop ("checked", true); / / error / / javascript object to call / / $("input [type =' radio']") [index] .checked=true Prop ("checked", true);}); * / $(".next") .click (function () {fn ();}); / / prev process $(".prev") .click (function () {/ / 1. Get the currently selected element var index = $("input [type = 'radio']: checked"). Val (); / / input: basic selection of the element selector if (index = = 0) {index = imglist.length-1;} else {index--;} / * / / 3. Modify src $(".img1") .attr ("src", imglist [index]) of image; / / 4. Modify the radio option $("input [type = 'radio']") [index] .input = true; $($("input [type =' radio']") [index]) .prop ("checked", true); * / change (index);}) / / radio processing / * $("input [type = 'radio']") .mouseover (function () {$(this) .attr (' checked','true');}); * / $("input [type = 'radio']") .Mouseover (function () {$(this) .prop ("checked", true)) / / attributes with true and false, such as checked, selected or disabled using prop (), and others using attr () var index = $("input [type = 'radio']: checked"). Val (); $(".img1") .attr ("src", imglist [index]);}) / / scheduled refresh / / setInderval (fn,time) / / fn: the handler function called time: interval time (in milliseconds) setInterval (fn,1500); function fn () {var index = $("input [radio']: checked") .val (); index = (parseInt (index) + 1)% imglist.length / / 3. Modify image's src change (index);} function change (index) {$(".img1"). Attr ("src", imglist [index]); $(("input [type = 'radio']") [index]) .prop ("checked", true);}})

Css section:

@ charset "utf-8"; / * CSS Document * / .img1 {width:850px; height:600px; border-radius:5%;} .container {position:relative; / * set the height and width so that the radio box can go up * / width:850px; height:600px; margin:0px auto; padding:0px; border-radius:10%; top:100px } / * left arrow * / .prev {position:absolute; top:270px; left:5px; width:70px; opacity:0.30;} .prev: hover {transform:scale (1.1); opacity:1.0;} / * right arrow * / .next {position:absolute; top:270px; right:5px; width:70px; opacity:0.30 Next: hover {transform:scale (1.1); opacity:1;} .rdodiv {position:absolute; bottom:30px; zmae indexVo 999; left:320px;}. Rdodiv input {transform:scale (1.8); width:30px;}. Rdodiv input:hover {transform:scale (2.5) } Thank you for reading this article carefully. I hope the article "how to use jquery to achieve picture rotation and sliding effect" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!