SLIDESHOW WITH MOUSE SCROLL

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<img id="slideshow" src="https://i.imgur.com/Pq9Dexal.jpg" />
<script>
var myimages=[
"https://i.imgur.com/Pq9Dexal.jpg",
"https://i.imgur.com/kbCkBYel.jpg",
"https://i.imgur.com/gCr4ycDl.jpg",
"https://i.imgur.com/JcRaeRSl.jpg",
"https://i.imgur.com/XMS6PHsl.jpg",
"https://i.imgur.com/I9SFA0sl.jpg"]
var slideshow=document.getElementById("slideshow")
var nextslideindex=0
function rotateimage(e){
var evt=window.event || e
var delta=evt.detail? evt.detail*(-100) : evt.wheelDelta
nextslideindex=(delta<=-100)? nextslideindex+1 : nextslideindex-1
nextslideindex=(nextslideindex<0)? myimages.length-1 : (nextslideindex>
myimages.length-1)? 0 : nextslideindex
slideshow.src=myimages[nextslideindex]
if (evt.preventDefault)
evt.preventDefault()
else
return false}
var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel"
if (slideshow.attachEvent)
slideshow.attachEvent("on"+mousewheelevt, rotateimage)
else if (slideshow.addEventListener)
slideshow.addEventListener(mousewheelevt, rotateimage, false)
</script>