jquery图片横向滚动带左右按钮切换|三体教程
文章目录

jquery图片横向滚动带左右按钮切换

今天分享的这篇《jquery图片横向切换滚动带左右按钮》文章,是小编在做产品页主图展示的时候用到的。

主图展示,就像淘宝一样,多个小图可左右滚动,点击小图大图会切换显示。

jquery图片横向切换滚动带左右按钮

这样的展现方式,应该适用于所有的产品展示页面。

所以应该有很多小伙伴会用到。

下面是代码,亲测可用。

html代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery图片滚动</title>
<script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
var j = $.noConflict(); 
j(function () {
    /* param */
    var unit = 135,//翻页宽度(缩略图大小+2)
	num = 4,
	groupLength = unit * num;
    /* related element */
    var prevGroup = j('#prev-group'),
		nextGroup = j('#next-group'),
		prevArrow = j('#prev-arrow'),
		nextArrow = j('#next-arrow'),
		bigPic = j('#big_pic'),
		largeImg = j('#large-image'),
		bigVedio = j('#big_vedio'),
		bigImage = j('#big_image'),
		photoTitle = j('#photo-title'),
		hhScrollBar = j('#scroll-bar');

    /* main function */
    /* unbind click attached */
    prevGroup.addClass('pre').unbind('click');
    nextGroup.addClass('next').unbind('click');
    prevArrow.hide().unbind('click');
    nextArrow.hide().unbind('click');

    var midIndex = parseInt(num / 2);

    /* thumb target object */
    var thumbLink = hhScrollBar.find('a');
    var thumbImg = hhScrollBar.find('a img');

    /* calculate the rest */
    var sum = hhScrollBar.children().length;
    var rest = sum % 4;
    var maxGroupNum = rest == 0 ? parseInt(sum / 4) : parseInt(sum / 4) + 1;
    var maxOffset = -(sum - num) * unit;

    /* flag */

    function setCenter(index) {
        var start = index - midIndex;
        slideTo(-start * unit)
    }

    function slideTo(offset) {
        var slidefrom = hhScrollBar.data('offset');
        var slideToValue = offset;
        if (slidefrom == 0 && slideToValue != 0) {
            prevGroup.removeClass('pre_disable').bind('click', prevGroupHandler);
            prevGroup.addClass('pre');
        }
        if (slidefrom == maxOffset && slideToValue != maxOffset) {
            nextGroup.removeClass('next_disable').bind('click', nextGroupHandler);
            nextGroup.addClass('next');
        }
        hhScrollBar.stop().animate({
            marginLeft: slideToValue
        }, 'fast', function () { });
        hhScrollBar.data('offset', slideToValue);
        updateUI();
    }

    function updateUI(isHover) {
        var offset = hhScrollBar.data('offset');
        if (offset == 0) {
            prevGroup.addClass('pre_disable').unbind('click');
        } else if (offset == maxOffset) {
            nextGroup.addClass('next_disable').unbind('click');
        }
        if (hhScrollBar.data('curIndex') != 0 && hhScrollBar.data('isHover')) {
            prevArrow.show();
        } else {
            prevArrow.hide();
        }
        if (hhScrollBar.data('curIndex') != sum - 1 && hhScrollBar.data('isHover')) {
            nextArrow.show();
        } else {
            nextArrow.hide();
        }
    }

    function prevGroupHandler() {
        if (hhScrollBar.data('offset') > -groupLength) {
            slideTo(0)
        } else {
            slideTo(hhScrollBar.data('offset') + groupLength);
        }
    }

    function nextGroupHandler() {
        if (hhScrollBar.data('offset') < maxOffset + groupLength) {
            slideTo(maxOffset)
        } else {
            slideTo(hhScrollBar.data('offset') - groupLength);
        }
    }

    function thumbLinkClickHandler() {
        var jthis = j(this);
        //sel=current
        hhScrollBar.find('a.current').removeClass('current');
        jthis.addClass('current');

        var photoIndex = hhScrollBar.find('a').index(jthis);
        //photoCur.html(photoIndex + 1);
        hhScrollBar.data('curIndex', photoIndex);

        if (photoIndex > midIndex && photoIndex < sum - midIndex + 1) {
            setCenter(photoIndex);
        } else if (photoIndex <= midIndex) {
            setCenter(midIndex);
        } else {
            setCenter(sum - midIndex);
        }
        var hhType = jthis.find('img').attr('data-hh-type');
        if (hhType == "v") {
            bigImage.hide();
            bigVedio.show();
            bigVedio.html(jthis.find('img').attr('baseSrc'));
        }
        else {
            bigImage.show();
            bigVedio.hide();
            largeImg.attr('src', jthis.find('img').attr('data-large'));
            photoTitle.html(jthis.find('img').attr('alt'));
        }
    }

    /* thumb click event */
    thumbLink.click(thumbLinkClickHandler);
    nextArrow.click(function () {
        hhScrollBar.data('isHover', true);
        var next = hhScrollBar.find('a.current').next();
        if (next.length != 0) {
            next.click()
        }
    });
    prevArrow.click(function () {
        hhScrollBar.data('isHover', true);
        var prev = hhScrollBar.find('a.current').prev();
        if (prev.length != 0) {
            prev.click()
        }
    });
    /* ui initailization */
    hhScrollBar.css('width', unit * sum);
    hhScrollBar.css('margin-left', '0');
    hhScrollBar.data('offset', 0);
    hhScrollBar.data('curIndex', 0);

    updateUI();
    thumbLink.eq(0).addClass('current');
    if (sum > num) {
        nextGroup.removeClass('next_disable').bind('click', nextGroupHandler);
    }

    var isRotate = false;
    var intervalTime = 10000,
        isNext = true,
        setIntervalID;  // setInterval() ID

    var rotate = function () {
        if (sum > 0) {
            var clickID = hhScrollBar.data('curIndex');
            if (!clickID) {
                hhScrollBar.data('curIndex', 0);
                clickID = 0;
            }
            if (clickID == 0 && isNext == false) {
                isNext = true;
            }
            else if (clickID == sum - 1 && isNext == true) {
                isNext = false;
            }

            if (isNext == true) {
                nextArrow.click();
            }
            else {
                prevArrow.click();
            }
        }
    }

    if (isRotate)
        setIntervalID = setInterval(rotate, intervalTime);

    bigPic.hover(
		function () {
			hhScrollBar.data('isHover', true);
			updateUI();
			if (isRotate)
				clearInterval(setIntervalID);
		},
		function () {
			hhScrollBar.data('isHover', false);
			updateUI();
			if (isRotate)
				setIntervalID = setInterval(rotate, intervalTime);
		}
	);
});
</script>
<style>
a{ cursor:pointer;}
.pic_box {position: relative; width: 600px; FLOAT: left; height: 400px; overflow: hidden;}
.pic_box .big_pic {position: relative; width: 600px; margin-bottom: 2px; height: 320px; overflow: hidden}
.pic_box .big_pic IMG {width:600px; height:320px;}
.pic_box .big_pic .pic_intro {position: absolute; padding-bottom: 6px; line-height: 20px; padding-left: 10px; width: 480px; bottom: 0px; padding-right: 10px; color: #fff; padding-TOP: 6px}
.pic_box .big_pic .pic_intro {FILTER: progid:DXImageTransform.Microsoft.gradient(enabled='true',startcolorstr='#33000000', endcolorstr='#33000000')}
.big_pic .pre {position: absolute; font: 80px/280px simsun, sans-serif; background: url(http://www.santii.com/source/1505452027606693.png) no-repeat -9999px -9999px; height: 100%; color: #fff; TOP: 0px}
.big_pic .next {position: absolute; font: 80px/280px simsun, sans-serif; background: url(http://www.santii.com/source/1505452027606693.png) no-repeat -9999px -9999px; height: 100%; color: #fff; TOP: 0px}
.big_pic .pre {width: 25%; left: 0px}
.big_pic .next {width: 62%; right: 0px}
.big_pic .pre:hover {background-position: 30px -86px}
.big_pic .next:hover {background-position: 315px 115px}
.pic_scroll {position: relative;}
.pic_scroll .pre {z-index: 2; position: absolute; text-align: center; background-color: #666; width: 29px; font: 30px/58px simsun, sans-serif; height: 70px; line-height:70px; color: #fff; TOP: 0px}
.pic_scroll .next {z-index: 2; position: absolute; text-align: center; background-color: #666; width: 29px; font: 30px/58px simsun, sans-serif; height: 70px; line-height:70px; color: #fff; TOP: 0px}
.pic_scroll .pre_disable {z-index: 2; position: absolute; text-align: center; background-color: #666; width: 29px; font: 30px/58px simsun, sans-serif; height: 70px; line-height:70px; color: #fff; TOP: 0px}
.pic_scroll .next_disable {	z-index: 2; position: absolute; text-align: center; background-color: #666; width: 29px; font: 30px/58px simsun, sans-serif; height: 70px; line-height:70px; color: #fff; TOP: 0px}
.pic_scroll .pre:hover {background-color: #32c6c6; text-decoration: none}
.pic_scroll .next:hover {background-color: #32c6c6; text-decoration: none}
.pic_scroll .pre_disable {background-color: #ccc}
.pic_scroll .next_disable {background-color: #ccc}
.pic_scroll .pre_disable:hover {background-color: #ccc; CURSOR: default; text-decoration: none}
.pic_scroll .next_disable:hover {background-color: #ccc; CURSOR: default; text-decoration: none}
.pic_scroll .next {right: 0px}
.pic_list {padding-left: 29px; ZOOM: 1;}
.pic_list .list {width: 9999px; ZOOM: 1}
.pic_list .list A {position: relative; FLOAT: left; margin-left: 2px}
.pic_list .list A IMG {FILTER: alpha(opacity=50); width: 133px; height: 70px; opacity: 0.5}
.pic_list .list A:hover IMG {FILTER: alpha(opacity=100); opacity: 1}
.pic_list .list A.current IMG {FILTER: alpha(opacity=100); opacity: 1}
</style>
</head>

<body>
<div id="pic_box" class="pic_box">
    <div id="big_pic" class="big_pic">
        <A id="prev-arrow" class="pre"></A>
        <A id="next-arrow" class="next"></A>
        <div id="big_image">
            <img id="large-image" src="http://www.santii.com/source/1505451934255210.jpg" />
        </div>
    </div>
    <div class="pic_scroll">
        <A id="prev-group" class="pre_disable">&lt;</A> 
        <A id="next-group" class="next">&gt;</A>
        <div class="pic_list">
            <div id="scroll-bar" class="list">
                <a>
                	<img src="http://www.santii.com/source/1505451934255210.jpg" data-large="http://www.santii.com/source/1505451934255210.jpg" />
                </a>
                <a>
                    <img src="http://www.santii.com/source/1505451934407071.jpg" data-large="http://www.santii.com/source/1505451934407071.jpg" />
                </a>
                <a>
                    <img src="http://www.santii.com/source/1505451934477420.jpg" data-large="http://www.santii.com/source/1505451934477420.jpg" />
                </a>
                <a>
                    <img src="http://www.santii.com/source/1505451934529051.jpg" data-large="http://www.santii.com/source/1505451934529051.jpg" />
                </a>
                <a>
                    <img src="http://www.santii.com/source/1505451934549004.jpg" data-large="http://www.santii.com/source/1505451934549004.jpg" />
                </a>
                <a>
                    <img src="http://www.santii.com/source/1505451934559873.jpg" data-large="http://www.santii.com/source/1505451934559873.jpg" />
                </a>
            </div>
        </div>
    </div>
</div>
</body>
</html>
亲自测试一下

不过因为每个制作人的页面大小、图片大小等不同,所以需要调整相关的宽度、高度。

本文网址:http://www.santii.com/article/57.html


数据更新时间:2018-05-26