Js can realize the effect of automatic scrolling of multiple pictures, and when the mouse moves up, it will stop moving, when the mouse moves away, it will continue scrolling, and clicking a picture in the scrolling will realize the effect of showing it from another place (zoom in, and when the mouse moves up, it will zoom in).

Click on the links to view the effect: www.1833233.com/effect/pict…

Click the “View picture” button in the picture, and a picture below the button will appear. Click the scroll picture on the right to change the picture displayed in the center.

HTML main code:

<span class="image js-pic ">< /span> <span class="image js-img "><img src="images/qiqi.jpg" alt="" class="mainImg"></span> </div> <div class="animation"> <ul class="Js-pic-right"> <li class="boniu"><img src="images/boniu.jpg" alt=""></li> <li class="duolaAmeng"><img src="images/duolaAmeng.jpg" alt=""></li> <li class="haimianbaby"><img src="images/haimianbaby.jpg" alt=""></li> <li class="qiqi"><img src="images/qiqi.jpg" alt=""></li> </ul> </div> <script src="js/drawpicture.js"></script>Copy the code

This is the display code for the image.

Js implementation of scrolling and click switch code is as follows:

var imgNode = document.querySelector(".Js-img"); var animationNode = document.querySelector(".animation"); var ulNode = animationNode.querySelector(".Js-pic-right"); var lisNode = animationNode.getElementsByTagName('li'); / / / / dynamic var lisNode = animationNode. QuerySelectorAll (" li "); // static var mainImgNode = document.querySelector('.mainimg '); var boniu = document.querySelector('.boniu'); var duolaAmeng = document.querySelector('.duolaAmeng'); var haimianbaby = document.querySelector('.haimianbaby'); var qiqi = document.querySelector('.qiqi'); var moveDo; var moveNum; var count = 0; Picnode.onclick = function() {picnode.onclick = function() { Imgnode.style. display = 'block'; if (count + 2) % 2 == 0) {imgnode.style. display = 'block'; //ulNode.style.display = 'block'; count++; } else { imgNode.style.display = 'none'; count++; } // picNode.disabled=true; } boniu.onclick = function() {mainimgNode. SRC = 'images/boniu.jpg'; mainImgNode.style.marginTop = "5px"; } duolaAmeng.onclick = function() { mainImgNode.src = 'images/duolaAmeng.jpg'; mainImgNode.style.marginTop = "5px"; } haimianbaby.onclick = function() { mainImgNode.src = 'images/haimianbaby.jpg'; mainImgNode.style.marginTop = "5px"; } qiqi.onclick = function() { mainImgNode.src = 'images/qiqi.jpg'; mainImgNode.style.marginTop = "190px"; } function animationFun(num) {num += 2; LisNode [0]. Style.margintop = (0-num) + "px"; lisNode[0].margintop = (0-num) + "px"; moveNum = num; Num moveDo = window.setTimeout(function() {animationFun(num); }, 10); AppendChild (lisNode[0]);} else {// If the first image is just out of sight, place the first image last and set the top margin to 0px ulNode.appendChild(lisNode[0]); AppendChild adds lisNode[0] to the end of the ulNode child. LisNode [0] lisNode[lisnode.length-1].style.margintop = "0px"; lisNode[lisnode.length - 1].style.margintop = "0px"; // console.log(lisNode.length); animationFun(0); } } animationFun(0); AnimationNode. Onmouseover = function () {/ / pause, delay trigger method is clear it clearTimeout (moveDo); } animationNode.onmouseout = function() {// Move animationFun(moveNum) again at the recorded move position; }Copy the code

Zoom in the center of the image is achieved through CSS:

The transform: scale (1.1); }Copy the code