素材牛VIP会员

多样式,多功能图片滚动jquery插件jquery.ScrollPic.js

 所属分类:网页特效-焦点图/幻灯片

 浏览:2424次  评论:1次  更新时间:2016-07-27
牛币素材VIP可免积分下载
多样式,多功能图片滚动jquery插件jquery.ScrollPic.js
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
素材描述:此插件可以配置切换的时间、是否自动切换、切换的速度、插件的效果(左右箭头或方块点控制)等……更多自行发觉

详细介绍

安装方法:

载入CSS样式:css/ScrollPic.css

载入jQuery库文件:js/jquery-1.7.1.min.js

载入插件JS:js/jquery.ScrollPic.js

HTML部分放置:(不同样式有不同的效果,与下面的JS配置对应)

<div class="yiz-slider-1">
    <ul>
        <li><img src="images/1.jpg" />li>
        <li><img src="images/2.jpg" />li>
        <li><img src="images/3.jpg" />li>
        <li><img src="images/4.jpg" />li>
    ul>
div>
<div class="yiz-slider-2">
    <ul>
        <li><img src="images/1.jpg" />li>
        <li><img src="images/2.jpg" />li>
        <li><img src="images/3.jpg" />li>
        <li><img src="images/4.jpg" />li>
    ul>
div>
<div class="yiz-slider-3 yiz-slider" id="yiz-slider" data-yiz-slider="3">
    <ul>
        <li><img src="images/1.jpg" />li>
        <li><img src="images/2.jpg" />li>
        <li><img src="images/3.jpg" />li>
        <li><img src="images/4.jpg" />li>
    ul>
div>

JS配置:(与上面HTML对应)

/*
  插件介绍:本插件实现图片轮播效果,可以配置切换时间、是否自动切换、切换速度、插件效果(左右箭头 Or 方块点控制)
*/
$(function(){
    $('.yiz-slider-1').ScrollPic({
        autoscrooll: true,
        numbercontrol: false
    });
    $('.yiz-slider-2').ScrollPic({
        Time: '3000',
        speed: '800',
        autoscrooll: true
    });
    $('.yiz-slider-3').ScrollPic({
        Time: 4000,    //自动切换时间
        speed: 1000,   //图片切换速度
        autoscrooll: true, //设置是否自动切换
        arrowcontrol: true, //开启开右箭头
        numbercontrol: false //关闭右下角按钮
    });
})

根据自身的需求,自由配置即可,能DIY的插件就是好插件

相关素材 - 焦点图/幻灯片

讨论这个素材(1)回答他人问题或分享使用心得会奖励牛币

古***场  
2019年08月07日

这是我想要的

回复
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0
所需牛币:1 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)