仿优酷、爱奇艺等视频网站轮播图效果

浏览：2184次- 评论：2次- 发布时间：2019-03-30

Html

Css

var isScrolling = false;
 var prevIndex = 0;
 var imageWidth = parseInt($('#my-scroll').width());

$(function() {
     initData();

var tag = $('#scroll-tags li');
     tag.click(function() {
         var index = $(this).index();
         if (prevIndex != index) {
             if (!isScrolling) {
                 isScrolling = true;
                 tag.attr('class', '');
                 tag.eq(index).attr('class', 'scroll-active');

myScroll(index, prevIndex);
                 prevIndex = $(this).index();
             }
         }
     })
 })

function initData() {
     imageWidth = parseInt($('#my-scroll').width());
     var liWidth = 100 / ($('#scroll-tags li').length);
     console.log(liWidth);
     $('#scroll-tags li').css('width', liWidth + '%');
 }

function myScroll(index, prevIndex) {
     var screen = $('#scroll-screen');
     var scrollImgs = $('#scroll-images img');
     var rightImage = $('#right-image');
     var leftImage = $('#left-image');
     var midImage = $('#mid-image');
     var speed = 1000;
     var ease = 'swing';

if (index > prevIndex) { //右滚
         rightImage.attr('src', scrollImgs.eq(index).attr('src'));
         screen.stop().animate({
             left: (parseInt(screen.css('left')) - imageWidth) + 'px'
         }, speed, ease, function() {
             midImage.attr('src', scrollImgs.eq(index).attr('src'));
             screen.css('left', -imageWidth + 'px');
             isScrolling = false;
         });
     } else if (index < prevIndex) { //左滚
         leftImage.attr('src', scrollImgs.eq(index).attr('src'));

screen.stop().animate({
             left: (parseInt(screen.css('left')) + imageWidth) + 'px'
         }, speed, ease, function() {
             midImage.attr('src', scrollImgs.eq(index).attr('src'));
             screen.css('left', -imageWidth + 'px');
             isScrolling = false;
         });
     }

}

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

jQuery调用版本：1.11.3