1、html结构
<div class="numberRun1"></div>
2、js
<script type="text/javascript" src="js/digital_over.js" ></script>//引用 //这是自定义函数（需要在页面中进行调用） <script> //数字滚动function digitalScroll(obj,n){ var numRun = $(obj).numberAnimate({num:n, speed:2000, symbol:","}) var nums = n setInterval(function(){numRun.resetData(nums) },3000) var numWidth= $(obj).width() $(obj).find('.mt-number-animate').css('width',numWidth) $(obj).css('width','100%') $(obj).find('.mt-number-animate').css('margin','0 auto') }window.indexdigitalScroll=function(){ digitalScroll($('.numberRun1'),1160518) } </script> <!--这是在页面中调用的方法--> <script> $(function(){ indexdigitalScroll() }) </script>
3、图片案例
var datas = [{imgSrc:"（图片 ）"},
{imgSrc:"（图片 ）"},
{imgSrc:"（图片 ）"},
{imgSrc:"（图片 ）"},
{imgSrc:"（图片 ）"},
{imgSrc:"（图片 ）"}
]
var banner = document.getElementById("banner")
var list = document.getElementById("list")
for(var i = 0,len = datas.lengthi<leni++){
var div = document.createElement("div")
var li = document.createElement("li")
if(i==0){ //默认第一项轮播项显示 对应的控制按钮被选中
div.className = "item active"
li.className = "active"
}else{ //其他项隐藏 其他的控制按钮样式不改变
div.className = "item"
li.className = ""
}
div.innerHTML = '<a href="' + datas[i].targetSrc + '">' +
'<img src="' + datas[i].imgSrc + '" />' +
'</a>'
li.innerHTML = i + 1
banner.appendChild(div)
list.appendChild(li)
}
var lunBo = document.getElementById("lunBo")
var items = document.querySelectorAll("#lunBo #banner .item")
var lis = document.querySelectorAll("#lunBo #list li")
var currentIndex = 0//(控制按钮和轮播项共同的索引)
for(var i = 0,len = lis.lengthi<leni++){
lis[i].index = i
lis[i].onmouseenter = function(){
currentIndex = this.index
for(var j = 0j<lenj++){
lis[j].className = ""
items[j].className = "item"
}
this.className = "active"
items[this.index].className = "item active"
}
}
var termId //全局变量
function autoPlay(){
termId = setInterval(function(){
currentIndex++
if(currentIndex==lis.length){
currentIndex = 0
}
lis[currentIndex].onmouseenter()
},3000)
}
autoPlay()//打开页面自动轮播
//鼠标进入停止轮播
lunBo.onmouseenter = function(){
clearInterval(termId)
}
//鼠标离开继续轮播
lunBo.onmouseleave = function(){
autoPlay()
}
我这还有其他的，先采纳一下加我，我给你发
推荐使用<marquee>实现图片滚动,示例:<marquee
scrolldelay="100"
direction="up"
onmouseover="this.stop()"
onmouseout="this.start()"><img
src="xxxxxxx"></marquee>
其中scrolldelay="100"
===>指滚动延迟时间,单位是毫秒ms,默认为90ms
direction="up"
===>指滚动方向,默认从左往右,可取的值为:up,down,left,right
onmouseover="this.stop()"
===>指鼠标悬停在图片上时,图片静止
onmouseout="this.start()"
===>指鼠标离开图片时,图片运动
希望对您有所帮助
