jQuery实现自动水平滚动展示合作商家

浏览：723次- 评论：0次- 发布时间：2018-05-03

Html

Css

* {
	margin:0;
	padding:0;
	list-style:none;
}
a {
	text-decoration:none;
	color:#666;
}
a:hover {
	color:#1bc1a3;
}
body,hmtl {
	background:#ecf0f1;
	font-family:'Anton',sans-serif;
}
.wrap {
	width:1200px;
	height:100px;
	margin:50px auto;
	background:#fff;
	border:1px solid #333;
	overflow:hidden;
	position:relative;
}
.wrap ul.slider {
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
}
.wrap ul.slider > li {
	float:left;
	position:relative;
	width:1200px;
	height:100px;
}
.wrap ul.slider .show_date {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	transition:all 0.5s ease;
	-webkit-transition:all 0.5s ease;
}
.wrap .show_date li {
	float:left;
	line-height:100px;
	padding:0px 68px;
	font-size:20px;
}
.btn {
	position:absolute;
	top:50%;
	width:50px;
	height:60px;
	line-height:60px;
	text-align:center;
	cursor:pointer;
	background:rgba(0,0,0,0.1);
	z-index:100;
	transition:all 0.1s ease;
	-webkit-transition:all 0.5s ease;
	margin-top:-30px;
}
.btn:hover {
	background:rgba(0,0,0,0.3);
}
#next {
	right:-50px;
	border-radius:7px 0px 0px 7px;
}
#prev {
	left:-50px;
	border-radius:0px 7px 7px 7px;
}
.wrap.active #next {
	right:0px;
}
.wrap.active #prev {
	left:0px;
}

// 计数
var num = 0;

// li的个数
var totalSlider = $('.wrap .slider>li').length;

// 显示的容器的宽度
var sliderWidth = $('.wrap').width();

$(document).ready(function() {
    //整个ul的宽度
    $('.wrap .slider').width(sliderWidth * totalSlider);

//点击next按钮
    $('#next').on('click', function() {
        sliderRight();
    });

//点击prev按钮
    $('#prev').on('click', function() {
        sliderLeft();
    });

//自动向右滑动
    var autoSlider = setInterval(sliderRight, 3000);

$('.wrap').hover(function() {
        $(this).addClass('active');
        clearInterval(autoSlider);

}, function() {
        $(this).removeClass('active');
        autoSlider = setInterval(sliderRight, 3000);

});

function sliderLeft() {
    num--;
    if (num == -1) {
        num = totalSlider - 1;
    };

$('.wrap .slider').animate({
        left: -(sliderWidth * num)
    }, 'ease')
};

function sliderRight() {
    num++;
    if (num == totalSlider) {
        num = 0;
    };
    $('.wrap .slider')
        .animate({
            left: -(sliderWidth * num)
        }, 'ease')
}

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.1

立即下载收藏

积分说明：注册即送10牛币，每日签到可获得5牛币，成为VIP会员可永久免牛币下载！充值积分充值会员更多说明»

代码描述：jQuery实现的水平方向滚动展示效果，可以用于水平展示合作商家、水平播报等应用

1、鼠标移动到展示框，可以显示左右箭头，进行向左、向右选择；
2、通过改变li的left值，进行切换显示

讨论这个常用代码（0）回答他人问题或分享心得会奖励牛币

〒_〒居然一个评论都没有……

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取