CSS + JS: image set display (2); css image set

CSS + JS: image set display (2); css image set

The question is repeated with the previous two articles, but the content is different from the previous two. In this article, the effect of the image set is as follows:

1. synchronous display of detailed images and thumbnails;

2. automatic playback of images;

3. display the focus of the thumbnail and the hidden display of other images;

4. move the cursor to the image control widget displayed in the detail chart.

The details are as follows:

Initialization or the first status

Intermediate status

Last status

Image Display in this way is generally common in image news or similar things. For example, Baidu homepage news is displayed in a similar way, as shown below:

Baidu homepage news

The following code is provided for your reference.

1、showimg.css

html, body{    height: 100%;    margin: 0;    padding: 0;    text-align: center;}#prev{    position: absolute;    top: 125px;    left: 0px;    width: 45px;    height: 50px;    background: url(../img/prev.png);}#next{    position: absolute;    top: 125px;    right: 0px;    width: 45px;    height: 50px;    background: url(../img/next.png);}#prev:hover,#next:hover{    cursor: pointer;}.detail-div{    position: relative;    display:inline-block;    padding:4px;    margin:0 0.5rem 1rem 0.5rem 1rem;    line-height:0;    -webkit-transition:background-color 0.1s ease-out;    -moz-transition:background-color 0.1s ease-out;    -o-transition:background-color 0.1s ease-out;    transition:background-color 0.1s ease-out;    -webkit-border-radius:6px;    -moz-border-radius:6px;    -ms-border-radius:6px;    -o-border-radius:6px;    border-radius:6px;}.thumb-div{    position: absolute;    bottom: -110px;    left: 4px;    background: #555;}.thumb{    margin-left: 7px;    margin-top: 5px;    margin-bottom: 5px;    float: left;    position: relative;}.thumb-img{    -webkit-border-radius:5px;    -moz-border-radius:5px;    -ms-border-radius:5px;    -o-border-radius:5px;    border-radius:5px}.thumb-active{    border: 2px solid #fff;    -webkit-border-radius:5px;    -moz-border-radius:5px;    -ms-border-radius:5px;    -o-border-radius:5px;    border-radius:5px;    height: 100px;}.thumb-modal{    background: #141414;    opacity: 0.5;    filter:alpha(opacity=50);    position: absolute;    left: 0px;    bottom: 2px;    -webkit-border-radius:5px;    -moz-border-radius:5px;    -ms-border-radius:5px;    -o-border-radius:5px;    border-radius:5px;}.thumb-modal-hide{    display: none;}

2. juqery. showimg. js

(Function ($) {$. fn. showImg = function (options) {var defaults = {}; var options = $. extend (defaults, options); var container = $ (this); var imgUrls = options. imgUrls; var width = options. width, height = options. height, thumbHeight = options. thumbHeight; var autoPlay = options. autoplay; container.css ("width", width + "px"); var imgIndex = 1, length = imgUrls. length; var play;/*** image details */var detailDiv = $ ("<Div> </div> "). addClass ("detail-div "). appendTo (container); var ctrlDiv =$ ("<div> </div> "). appendTo (detailDiv ). hide (); var prevA =$ ("<a> </a> "). attr ("id", "prev "). appendTo (ctrlDiv ). hide (), nextA = $ ("<a> </a> "). attr ("id", "next "). appendTo (ctrlDiv); $ (". detail-div "). live ("mouseenter", function () {play = clearInterval (play); ctrlDiv. show () ;}); $ (". detail-div "). live ("mouseleave", function () {play = setInt Erval (playImg, 3000); ctrlDiv. hide () ;}); var detailImgA =$ ("<a> </a> "). appendTo (detailDiv); var detailImg = $ (" "). attr ("id", "detailImg "). attr ("width", width ). attr ("height", height ). attr ("src", "img/demopage/image-" + imgIndex + ". jpg "). appendTo (detailImgA);/*** thumbnail image */var thumbDiv =$ ("<div> </div> "). addClass ("thumb-div "). appendTo (container ). css ("width", width + "px"); addThumbImgs (); prevA. o N ("click", function () {imgCtrlFun ("prev") ;}); nextA. on ("click", function () {imgCtrlFun ("next") ;}); if (autoPlay) {play = setInterval (playImg, 3000);} function playImg () {if (imgIndex = length) {imgIndex = 0;} nextA. click ();}/*** image control ** @ param type */function imgCtrlFun (type) {if (type = "prev") {if (imgIndex> 1) {imgIndex = imgIndex-1;} else {if (imgIndex <length) {imgIndex = imgIndex + 1 ;}$ ("# deta IlImg "). attr ("src", "img/demopage/image-" + imgIndex + ". jpg "); thumbDiv.html (" "); addThumbImgs (); if (imgIndex = length) {$ (" # next "). hide ();} else {$ ("# next "). show () ;}if (imgIndex ===1) {$ ("# prev "). hide ();} else {$ ("# prev "). show () ;};/*** add image microcosm */function addThumbImgs () {var thumbWidth = width/3-10; for (var I = imgIndex-2; I  </div> "). addClass ("thumb "). appendTo (ThumbDiv); var thumbModalDiv =$ ("<div> </div> "). addClass ("thumb-modal "). appendTo (thumb); thumbModalDiv.css ("height", thumbHeight + "px "). css ("width", thumbWidth + "px"); var thumbImg = $ (" "). attr ("id", "thumb" + (I + 1 )). attr ("width", thumbWidth ). attr ("height", thumbHeight ). addClass ("thumb-img "). appendTo (thumb); if (! (I <0) {thumbImg. attr ("src", imgUrls [I]);} if (I === imgIndex-1) {thumb. addClass ("thumb-active"); thumbModalDiv. addClass ("thumb-modal-hide") ;}}}) (jQuery );

32.16index.html

<!DOCTYPE html>

The idea is very simple. I believe you will know what the idea is after reading the code. I hope it will help you and inspire others.




If you have any questions, contact:
QQ: 1004740957
Emai: niujp08@qq.com